<template>
  <view class="bg-white flex h-full">
    <view class="w-[260rpx] bg-[#F7F8FA] flex flex-col items-center overflow-y-auto h-full">
      <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>
    </view>
    <view class="flex-1 mt-[40rpx] flex flex-col overflow-y-auto h-full">
      <MajorTreeList v-if="currentMenuObj" :sub-major-list="currentMenuObj" />
    </view>
  </view>
</template>

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

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

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

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

const getMajorList = ({ Type, KeyWord }) => {
  getMajorLevelList({ Type, KeyWord }).then((resp) => {
    if (resp.code === 200) {
      menus.value = resp.result[0].rootDtos
      currentMenuObj.value = menus.value[0]
    }
  })
}

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

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

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