<template>
  <scroll-view class="h-full">
    <view class="font-semibold text-[#303030] text-[28rpx] px-[32rpx]">
      {{ subMajorList.name }}
      <text class="text-[22rpx] text-[#bfbfbf] font-normal">({{ subMajorList.count }}个)</text>
    </view>

    <Collapse v-model="collapseValue" accordion type="line">
      <CollapseItem v-for="(item, index) in subMajorList.items" :key="item.key" :name="`${index}`">
        <template #title="{ expanded }">
          <view class="header">
            <text :class="`text-[26rpx] text-[#303030] ${expanded ? 'text-[#1580FF]!' : ''}`">
              {{ item.name }}
            </text>
            <view class="flex items-center justify-between">
              <text
                :class="`mr-[10rpx] text-[28rpx] text-[#303030] ${expanded ? 'text-[#1580FF]!' : ''}`"
              >
                {{ item.childMajors.length }}
              </text>
              <view
                class="i-carbon-chevron-down rotate-180 text-[16rpx] text-[#1580FF]"
                v-if="expanded"
              ></view>
              <view class="i-carbon-chevron-down text-[16rpx]" v-else></view>
              <view @click.stop="handleCheckSubMajor(item, index)" class="ml-[8rpx]">
                <CustomCheckbox :status="item.check" />
              </view>
            </view>
          </view>
        </template>
        <view class="flex flex-col gap-[48rpx] h-full mb-[40rpx]">
          <view
            class="text-[24rpx] text-[#303030] ml-[32rpx] flex items-center justify-between"
            v-for="(childMajor, cIndex) in item.childMajors"
            :key="childMajor.zymc"
            @click="handleCheckMajor(childMajor, index, cIndex)"
          >
            <view :class="`${childMajor.check === 3 ? 'text-[#1580FF]' : ''} ml-[32rpx]`">
              {{ childMajor.zymc }}
            </view>
            <view class="mr-[32rpx]">
              <CustomCheckbox :status="childMajor.check" />
            </view>
          </view>
        </view>
      </CollapseItem>
    </Collapse>
  </scroll-view>
</template>

<script lang="ts" setup>
import Collapse from '@/pages-sub/components/collapse/Collapse.vue'
import CollapseItem from '@/pages-sub/components/collapse/CollapseItem.vue'
import CustomCheckbox from './CustomCheckbox.vue'

const props = defineProps({
  subMajorList: {
    type: Object as () => {
      name: string
      key: string
      count: number
      itemsCount: number
      items: any[]
    },
    default: () => ({
      name: '',
      key: '',
      count: 0,
      itemsCount: 0,
      items: [],
    }),
  },
})

const collapseValue = ref<string>('')
const emits = defineEmits(['update:subMajorList', 'changeCheck'])

const handleCheckSubMajor = (_item: any, index: number) => {
  const newItems = [...props.subMajorList.items]
  newItems[index] = {
    ...newItems[index],
    childMajors: newItems[index].childMajors.map((cItem) => ({
      ...cItem,
      check: newItems[index].check === 3 ? 1 : 3,
    })),
    check: newItems[index].check === 3 ? 1 : 3,
  }

  const newSubMajorList = {
    ...props.subMajorList,
    items: newItems,
  }

  emits('update:subMajorList', newSubMajorList)
  emits('changeCheck', { pIndex: index, pItem: newItems[index], groupItem: props.subMajorList })
}

const handleCheckMajor = (_item: unknown, index: number, cIndex: number) => {
  const newItems = [...props.subMajorList.items]
  let childItems = [...newItems[index].childMajors]
  childItems[cIndex].check = childItems[cIndex].check === 3 ? 1 : 3
  let fatherCheck = childItems.filter((cItem) => cItem.check === 1)
  newItems[index] = {
    ...newItems[index],
    childMajors: childItems,
    check:
      fatherCheck.length > 0 && fatherCheck.length < childItems.length
        ? 2
        : fatherCheck.length === childItems.length
          ? 1
          : 3,
  }

  const newSubMajorList = {
    ...props.subMajorList,
    items: newItems,
  }

  emits('update:subMajorList', newSubMajorList)
  emits('changeCheck', {
    pIndex: index,
    pItem: newItems[index],
    cItem: childItems[cIndex],
    cIndex,
    groupItem: props.subMajorList,
  })
}

watch(
  () => props.subMajorList,
  (newVal) => {
    if (newVal?.items) {
      newVal.items.forEach((item) => {
        const checkedCount = item.childMajors.filter((child) => child.check === 3).length
        const totalCount = item.childMajors.length

        if (checkedCount === 0) {
          // 全部未选中
          item.check = 1
        } else if (checkedCount === totalCount) {
          // 全部选中
          item.check = 3
        } else {
          // 部分选中
          item.check = 2
        }
      })
    }
  },
  { deep: true },
)
</script>

<style lang="scss" scoped>
:deep(.custom-collapse-item) {
  padding: 16rpx 0 !important;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
}

:deep(.uni-collapse-item__wrap-content) {
  border-bottom: 0;
}
</style>
