<template>
  <view class="mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
    <TitleBar title="推荐专业" />
    <text class="text-[24rpx] text-[#999]">以下专业仅作为参考</text>

    <view class="w-full">
      <view class="flex py-[15rpx] px-[36rpx] bg-[#F5FAFF]">
        <text class="w-[129rpx] text-center font-bold">专业大类</text>
        <text class="flex-1 text-center font-bold">专业类</text>
        <text class="flex-1 text-center font-bold">专业名称</text>
      </view>

      <view
        :class="`flex py-[15rpx] text-[#333] text-[24rpx] px-[36rpx] ${index % 2 === 0 ? 'bg-[#fff]' : 'bg-[#F5FAFF]'}`"
        v-for="(major, index) in majorList"
        :key="index"
      >
        <text class="w-[129rpx] text-center">{{ major.tradeName }}</text>
        <text class="flex-1 text-center">{{ major.categoryName }}</text>
        <text class="flex-1 text-center">{{ major.name }}</text>
      </view>
    </view>
  </view>
</template>

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

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

const majorList = ref<any[]>([])

watch(
  () => props.tag,
  (newV) => {
    getTagMapPro({ tag: newV }).then((resp) => {
      if (resp.code === 200) {
        majorList.value = resp.result as any[]
      }
    })
  },
)
</script>

<style lang="scss" scoped>
@import '@/pages-evaluation-sub/styles/parallelogram.scss';
</style>
