<script lang="ts" setup>
import { computed, ref } from 'vue'
import { ChevronDownOutline, ChevronUpOutline } from '@vicons/ionicons5'

interface IModuleInfo {
  modelName: string
  modelId: string
  modelType: string
}
interface IModuleList {
  moduleList: IModuleInfo[]
}

const props = withDefaults(defineProps<IModuleList>(), {
  moduleList: () => [],
})

const allModelName = computed(() =>
  props.moduleList.map(item => item.modelName)
)

const expandedNames = ref<Array<string | number>>(allModelName.value)
const expandedUpdate = (expandedList: Array<string | number>) => {
  // console.log(expandedList)
  expandedNames.value = expandedList
}

const emits = defineEmits(['handleCheckModel'])
// 标题点击
const handleTitleClick = data => {
  // console.log(data, 'data')
  emits(
    'handleCheckModel',
    props.moduleList.find(item => item.modelName === data.name)
  )
}
</script>

<template>
  <n-collapse
    :default-expanded-names="allModelName"
    class="h-full flex flex-col"
    @update:expanded-names="expandedUpdate"
    @item-header-click="handleTitleClick"
  >
    <n-collapse-item
      v-for="module in props.moduleList"
      :key="module.modelId"
      :title="module.modelName"
      :name="module.modelName"
      :class="expandedNames.includes(module.modelName) ? 'flex-1' : ''"
    >
      <template #header>
        {{ module.modelName }}
        <img
          class="h-18px pl-2"
          src="@/assets/image/title_icon.png"
          alt=""
          srcset=""
        />
      </template>
      <template #header-extra>
        <img
          class="h-20px pl-2"
          src="@/assets/image/toBig.png"
          alt=""
          srcset=""
          v-if="expandedNames.includes(module.modelName)"
        />
        <img
          class="h-20px pl-2"
          src="@/assets/image/toSmall.png"
          alt=""
          srcset=""
          v-else
        />
      </template>
      <slot :name="module.modelName"></slot>
    </n-collapse-item>
  </n-collapse>
</template>

<style lang="scss" scoped>
::v-deep.n-collapse {
  .n-collapse-item:not(:first-child) {
    border: 0;
  }
  .n-collapse-item-arrow {
    display: none !important;
  }
}
</style>
