<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._id"
        :class="[
          'flex items-center view-block pl-[32rpx] min-h-[96rpx]! text-[28rpx] text-[#666]',
          currentMenuObj?._id === item._id ? 'active' : '',
        ]"
        @click="changeMenu(item)"
      >
        {{ item.rootName }}
      </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 { getBaseProfession } from '@/service/index/api'
import MajorTreeList from './TreeList.vue'

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

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

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

const getProfessionList = ({ KeyWord }) => {
  getBaseProfession({ KeyWord }).then((resp) => {
    if (resp.code === 200) {
      menus.value = resp.result as any[]
      currentMenuObj.value = menus.value[0]
    }
  })
}

watch(
  () => props.keyword,
  (newV) => {
    getProfessionList({ KeyWord: newV })
  },
)

onBeforeMount(() => {
  getProfessionList({ KeyWord: props.keyword })
})
</script>

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