<template>
  <div class="material-body">
    <!-- 左侧分类目录 -->
    <material-catalog
      v-model="cateId"
      :cate-lists="cateLists"
      :is-picker="props.isPicker"
      :type="props.selectTab.type"
      @getList="getCateLists"
    />
    <!-- 右侧内容区 -->
    <material-list
      :select-tab="props.selectTab"
      :limit="props.limit"
      :page-limit="props.pageLimit"
      :is-picker="props.isPicker"
      :file-size="props.fileSize"
      :cate-id="cateId"
      :cate-lists="cateLists"
      :active="props.active"
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import { materialCateLists } from '@/api/material'

// 定义组件属性
const props = withDefaults(
  defineProps<{
    selectTab: Record<string, any>
    limit?: number
    pageLimit?: number
    isPicker?: boolean
    fileSize?: number | string
    active?: boolean
  }>(),
  {
    pageLimit: 30,
    selectTab: () => ({ type: '', name: '全部' }),
    limit: -1,
    isPicker: false,
    fileSize: 120,
    active: true
  }
)
// 定义组件事件
const emit = defineEmits<{
  (e: 'change', selectedItems: any[]): void
}>()
// 分类相关参数
const cateId = ref<string | number>('')
const cateLists = ref<any[]>([])
// 获取分类列表
const getCateLists = () => {
  materialCateLists({ type: props.selectTab.type })
    .then((res) => {
      cateLists.value = res
    })
    .catch(() => {
      cateLists.value = []
    })
}
// 监听类型变化，刷新分类列表
watch(
  () => props.selectTab.type,
  () => {
    cateId.value = ''
    getCateLists()
  }
)
// 监听激活状态变化
watch(
  () => props.active,
  (newVal) => {
    if (newVal) {
      getCateLists()
    }
  }
)
// 处理子组件的change事件
const handleChange = (selectedItems: any[]) => {
  emit('change', selectedItems)
}

onMounted(() => {
  getCateLists()
})
</script>

<style lang="scss" scoped>
.material-body {
  @apply h-full flex;
}
</style>
