<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-[28rpx] font-semibold text-[#333] mt-[20rpx] mb-[10rpx]">专业简介</text>
    <text class="text-[26rpx] font-normal text-[#636363] mb-[20rpx] line-clamp-3 line-height-[1.6]">
      {{ zyjx || '暂无' }}
    </text>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
      @click="handleFullFun(1)"
      v-if="zyjx.length > 0"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </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-[28rpx] font-semibold text-[#333] mt-[20rpx] mb-[10rpx]">主干课程</text>
    <text class="text-[26rpx] font-normal text-[#636363] mb-[20rpx] line-clamp-3 line-height-[1.6]">
      {{ kyfx.map((item) => item.zymc).join(',') || '暂无' }}
    </text>

    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
      @click="handleFullFun(2)"
      v-if="kyfx.length > 0"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </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 :data="courseInfo.slice(0, 4)" class="my-[24rpx]">
        <WXXTableCol prop="kcmc" label="课程名称" width="50%"></WXXTableCol>
        <WXXTableCol prop="difficulty" label="课程难易度" width="25%"></WXXTableCol>
        <WXXTableCol prop="practicality" label="课程实用度" width="25%"></WXXTableCol>
      </WXXTable>
    </view>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
      @click="handleFullFun(3)"
      v-show="courseInfo.length > 4"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>
  <ActionSheet v-model:show="show" :title="title" :show-close="true">
    <view class="mx-[32rpx] mt-[32rpx]">
      <view class="text-[26rpx] text-[#636363] line-height-[1.6]" v-show="showType !== 3">
        {{ innerContent }}
      </view>
      <WXXTable :data="courseInfo" class="" v-show="showType === 3">
        >
        <WXXTableCol prop="kcmc" label="课程名称" width="50%"></WXXTableCol>
        <WXXTableCol prop="difficulty" label="课程难易度" width="25%"></WXXTableCol>
        <WXXTableCol prop="practicality" label="课程实用度" width="25%"></WXXTableCol>
      </WXXTable>
    </view>
  </ActionSheet>
</template>

<script lang="ts" setup>
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'
import WXXTable from '@/pages-sub/components/table/Table.vue'
import WXXTableCol from '@/pages-sub/components/table/TableCol.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 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>
