<template>
  <view class="flex flex-col p-[32rpx] bg-[#fff] mt-16rpx" v-show="subjectIntroduceList.length > 0">
    <text class="text-[32rpx] font-semibold text-[#333]">
      双一流学科·{{ subjectIntroduceList.length }}
    </text>
    <text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
      {{ subjectIntroduceList.join(',') }}
    </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="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]"
    v-show="assessmentSubjectList.length > 0"
  >
    <text class="text-[32rpx] font-semibold text-[#333]">
      学科评估·{{ assessmentSubjectList.length }}
    </text>
    <text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
      {{ assessmentSubjectList.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="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]">
    <text class="text-[32rpx] font-semibold text-[#333]">
      特色专业·{{ featureSubjectList.length }}
    </text>
    <text class="text-[22rpx] font-normal text-[#636363] my-[24rpx]">
      {{ featureSubjectList.join(',') }}
    </text>
    <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]">{{ innerContent }}</view>
    </template>
  </MessageBox>
</template>

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

const subjectIntroduceList = ref([])
const assessmentSubjectList = ref([])
const featureSubjectList = ref([])
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
})

watch(
  () => props.id,
  async (newVal) => {
    getSubjectIntroduceList(newVal).then((resp) => {
      if (resp.code === 200) {
        const res = resp.result as {
          double_subject_list: any[]
          assessment_subject_list: any[]
          feature_subject_list: any[]
        }
        subjectIntroduceList.value = res.double_subject_list
        assessmentSubjectList.value = res.assessment_subject_list
        featureSubjectList.value = res.feature_subject_list
      }
    })
  },
)

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

const handleFullFun = (type: number) => {
  show.value = true
  if (type === 1) {
    title.value = `双一流学科·${subjectIntroduceList.value.length}`
    innerContent.value = subjectIntroduceList.value.join(',')
  } else if (type === 2) {
    title.value = `学科评估·${assessmentSubjectList.value.length}`
    innerContent.value = assessmentSubjectList.value.join(',')
  } else if (type === 3) {
    title.value = `特色专业·${featureSubjectList.value.length}`
    innerContent.value = featureSubjectList.value.join(',')
  }
}
</script>
