<template>
  <view class="flex flex-col p-[32rpx] bg-[#fff]" v-show="subjectIntroduceList.length > 0">
    <text class="text-[32rpx] font-semibold text-[#333]">
      双一流学科·{{ subjectIntroduceList.length }}
    </text>
    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
      {{ subjectIntroduceList.join(',') }}
    </text>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
      @click="handleFullFun(1)"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </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-[24rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
      {{ assessmentSubjectList.join(',') }}
    </text>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
      @click="handleFullFun(2)"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>
  <view class="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]" v-show="featureSubjectList.length > 0">
    <text class="text-[32rpx] font-semibold text-[#333]">
      特色专业·{{ featureSubjectList.length }}
    </text>
    <text class="text-[24rpx] font-normal text-[#636363] my-[24rpx]">
      {{ featureSubjectList.join(',') }}
    </text>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
      @click="handleFullFun(3)"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>

  <ActionSheet v-model:show="show" :title="title" :show-close="true">
    <view class="text-[24rpx] text-[#636363] px-[32rpx] pt-[32rpx]">
      {{ innerContent }}
    </view>
  </ActionSheet>
</template>

<script lang="ts" setup>
import { getSubjectIntroduceList } from '@/service/index/api'
import ActionSheet from '@/pages-sub/components/ActionSheet.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>
