<template>
  <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff] mt-16rpx">
    <text class="text-[32rpx] font-semibold text-[#333]">专业介绍</text>
    <text class="text-[24rpx] font-semibold text-[#333] mt-[32rpx] mb-[26rpx]">专业简介</text>
    <text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
      {{ zyjx || '暂无' }}
    </text>
    <wd-button
      block
      custom-class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]!"
      @click="handleFullFun(1)"
    >
      查看全部
      <wd-icon name="arrow-right"></wd-icon>
    </wd-button>
  </view>
  <view class="h-[16rpx] bg-[#f8f8f8]"></view>
  <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
    <text class="text-[32rpx] font-semibold text-[#333]">课程要求</text>
    <text class="text-[24rpx] font-semibold text-[#333] mt-[32rpx] mb-[26rpx]">主干课程</text>
    <text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
      {{ kyfx.map((item) => item.zymc).join(',') || '暂无' }}
    </text>
    <wd-button
      block
      custom-class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]!"
      @click="handleFullFun(2)"
    >
      查看全部
      <wd-icon name="arrow-right"></wd-icon>
    </wd-button>
  </view>
  <view class="h-[16rpx] bg-[#f8f8f8]"></view>
  <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
    <text class="text-[32rpx] font-semibold text-[#333]">课程列表</text>
    <view class="my-[24rpx]">
      <WXXTable
        :columns="columns"
        :tableData="courseInfo.slice(0, 4)"
        class="my-[24rpx]"
      ></WXXTable>
    </view>
    <wd-button
      block
      custom-class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]!"
      @click="handleFullFun(3)"
    >
      查看全部
      <wd-icon name="arrow-right"></wd-icon>
    </wd-button>
  </view>

  <MessageBox v-model:show="show" :title="title">
    <template>
      <view class="text-[22rpx] text-[#636363] max-h-600rpx mb-[32rpx]" v-show="showType !== 3">
        {{ innerContent }}
      </view>
      <WXXTable
        :columns="columns"
        :tableData="courseInfo"
        class="my-[24rpx]"
        v-show="showType === 3"
      ></WXXTable>
    </template>
  </MessageBox>
</template>

<script lang="ts" setup>
import MessageBox from '@/pages-sub/home/components/MessageBox.vue'
import WXXTable from '@/pages-sub/home/components/Table.vue'
import { getMajorCourse } from '@/service/index/api'

const props = defineProps({
  zyjx: {
    type: String,
    default: '',
  },
  specId: {
    type: String,
    default: '',
  },
  kyfx: {
    type: Array<{ zymc: string }>,
    default: () => [],
  },
})

const columns = [
  { name: '课程名称', key: 'kcmc', width: '50%' },
  { name: '课程难易度', key: 'difficulty', width: '25%' },
  { name: '课程实用度', key: 'practicality', width: '25%' },
]

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

watch(
  () => props.specId,
  (newV) => {
    getMajorCourse({ SpecId: newV }).then((resp) => {
      if (resp.code === 200) {
        courseInfo.value = (resp.result as { kskcList: any[] }).kskcList
      }
    })
  },
)

const show = ref(false)
const title = ref('')
const innerContent = ref('')
const showType = ref(1)

const handleFullFun = (type: number) => {
  show.value = true
  showType.value = type
  if (type === 1) {
    innerContent.value = props.zyjx
    title.value = '专业介绍'
  } else if (type === 2) {
    innerContent.value = props.kyfx.map((item) => item.zymc).join(',')
    title.value = '主干课程'
  } else if (type === 3) {
    innerContent.value = courseInfo.value.map((item) => item.kcmc).join(',')
    title.value = '课程列表'
  }
}
</script>
