<template>
  <view class="bg-white flex flex-col">
    <view class="flex">
      <view class="w-[176rpx] h-[45vh]">
        <scroll-view class="bg-[#F7F8FA] flex flex-col items-center" :scroll-y="true">
          <view
            v-for="item in menus"
            :key="item.key"
            :class="[
              'flex items-center view-block pl-[32rpx] min-h-[96rpx] h-[96rpx] text-[28rpx] text-[#666] font-semibold',
              currentMenuObj?.key === item.key ? 'active' : '',
            ]"
            @click="changeMenu(item)"
          >
            {{ item.name }}
          </view>
        </scroll-view>
      </view>
      <scroll-view class="pb-[14rpx] h-[40vh] pt-[32rpx] flex-1" :scroll-y="true">
        <view v-if="currentMenuObj">
          <MajorTreeList v-model:subMajorList="currentMenuObj" @change-check="handleChangeCheck" />
        </view>
      </scroll-view>
    </view>
    <scroll-view class="box-shadow w-full" :scroll-x="true">
      <view class="flex items-center gap-[24rpx] w-max px-[32rpx] pt-[32rpx] pb-[40rpx] h-[58rpx]">
        <view
          class="px-[20rpx] py-[12rpx] bg-[#f8f8f8] rounded-[8rpx]"
          v-for="(item, index) in filterParams"
          :key="item.zymc"
        >
          <text class="text-[#303030] text-[24rpx] font-medium mr-[16rpx]">
            {{ item.zymc }}
          </text>
          <view
            class="i-carbon-close-filled text-[#CBCBCB] text-[24rpx]"
            @click="handleRemove(item, index)"
          ></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { getMajorLevelList } from '@/service/index/api'
import MajorTreeList from './FilterMajorTreeList.vue'

const props = defineProps({
  type: {
    type: Number,
    default: 1050,
  },
  keyword: {
    type: String,
    default: '',
  },
})

const filterParams = ref<any[]>([])
const handleRemove = (item, index) => {
  filterParams.value.splice(index, 1)

  menus.value[item.groupIndex].items[item.majorIndex].childMajors[item.cIndex].check = 1
}

const handleClear = () => {
  filterParams.value.forEach((item) => {
    menus.value[item.groupIndex].items[item.majorIndex].childMajors[item.cIndex].check = 1
  })
  filterParams.value = []
}

const menus = ref<any[]>([])
const currentMenuObj = ref<any>(null)

const changeMenu = (item: any) => {
  currentMenuObj.value = item
}

const handleChangeCheck = (params) => {
  const groupIndex = menus.value.findIndex((menu) => menu.key === params.groupItem.key)
  if (Object.prototype.toString.call(params.cIndex) === '[object Undefined]') {
    // 选中了专业大类
    if (params.pItem.check === 3) {
      //勾选了大类
      params.pItem.childMajors.forEach((childItem, cIndex) => {
        // 检查是否已存在相同的数据
        const isExist = filterParams.value.some((item) => item.zydm === childItem.zydm)
        if (!isExist) {
          filterParams.value.push({
            ...childItem,
            groupIndex,
            majorIndex: params.pIndex,
            cIndex: cIndex,
            pName: params.pItem.name,
          })
        }
      })
    } else if (params.pItem.check === 1) {
      // 取消勾选大类，删除对应的所有子项
      filterParams.value = filterParams.value.filter(
        (item) => !params.pItem.childMajors.some((childItem) => childItem.zydm === item.zydm),
      )
    }
  } else {
    // 选中或取消选中大类中的单个元素
    if (params.pItem.childMajors[params.cIndex].check === 3) {
      // 选中单个元素
      const childItem = params.pItem.childMajors[params.cIndex]
      const isExist = filterParams.value.some((item) => item.zydm === childItem.zydm)
      if (!isExist) {
        filterParams.value.push({
          ...childItem,
          groupIndex,
          majorIndex: params.pIndex,
          cIndex: params.cIndex,
          pName: params.pItem.name,
        })
      }
    } else if (params.pItem.childMajors[params.cIndex].check === 1) {
      // 取消选中单个元素
      filterParams.value = filterParams.value.filter(
        (item) => item.zydm !== params.pItem.childMajors[params.cIndex].zydm,
      )
    }
  }
}

watch(
  () => currentMenuObj.value,
  (newV) => {
    const index = menus.value.findIndex((item) => item.key === newV.key)
    menus.value[index] = newV
  },
  { deep: true },
)

const getMajorList = ({ Type, KeyWord }) => {
  getMajorLevelList({ Type, KeyWord }).then((resp) => {
    if (resp.code === 200) {
      menus.value = resp.result[0].rootDtos.map((tItem) => ({
        ...tItem,
        items: tItem.items.map((item) => ({
          ...item,
          childMajors: item.childMajors.map((cItem) => ({ ...cItem, check: 1 })),
          check: 1,
        })),
      }))
      currentMenuObj.value = menus.value[0]
      // wrapFilterParams = Array.from({ length: menus.value.length }, () => [])
    }
  })
}

watch(
  [() => props.type],
  ([type]) => {
    getMajorList({ Type: type, KeyWord: props.keyword })
  },
  { immediate: true },
)

watch(
  () => props.keyword,
  (newV) => {
    getMajorList({ Type: props.type, KeyWord: newV })
  },
)

const getSearchParam = () => {
  return filterParams.value
}
defineExpose({ getSearchParam, handleClear })
</script>

<style lang="scss" scoped>
.active {
  background-color: #fff;
  color: #1580ff;
}
.view-block {
  width: calc(100% - 32rpx);
}

.box-shadow {
  box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(225, 225, 225, 0.2);
}
</style>
