<template>
  <view class="flex flex-col px-[32rpx] pt-[32rpx] bg-[#fff] mt-16rpx">
    <view class="flex items-center gap-[10rpx]">
      <image
        class="w-[48rpx] h-[48rpx]"
        src="https://api.static.ycymedu.com/zdx/faculty.png"
        mode="scaleToFill"
      />
      <text class="text-[32rpx] font-semibold text-[#333]">院系设置</text>
    </view>

    <WXXTable :data="tableData.slice(0, 4)" class="my-[20rpx]">
      <WXXTableCol prop="name" label="学院" width="30%"></WXXTableCol>
      <WXXTableCol prop="major" label="所含专业" width="70%"></WXXTableCol>
    </WXXTable>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
      @click="handleMore"
      v-show="tableData.length > 4"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>
  <ActionSheet v-model:show="show" title="院系设置" :show-close="true">
    <view class="mx-[32rpx]">
      <WXXTable :data="tableData">
        <WXXTableCol prop="name" label="学院" width="30%"></WXXTableCol>
        <WXXTableCol prop="major" label="所含专业" width="70%"></WXXTableCol>
      </WXXTable>
    </view>
  </ActionSheet>
</template>

<script setup lang="ts">
import WXXTable from '@/pages-sub/components/table/Table.vue'
import WXXTableCol from '@/pages-sub/components/table/TableCol.vue'
import { getUniversityListByProvince } from '@/service/index/api'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
})

watch(
  () => props.id,
  (newVal) => {
    getUniversityListByProvince({ id: newVal }).then((resp) => {
      if (resp.code === 200) {
        let _res = (originTableData = resp.result as { name: string; item: { name: string }[] }[])
        _res.forEach((college) => {
          let _college = { name: college.name, major: '' }
          _college.major = college.item.map((item) => item.name).join(',')
          tableData.value.push(_college)
        })
      }
    })
  },
)

const tableData = ref<any[]>([])
const show = ref(false)
let originTableData = []

const handleMore = () => {
  show.value = true
}
</script>

<style lang="scss" scoped></style>
