<template>
  <view class="flex flex-col pt-[32rpx] px-[32rpx] bg-[#fff] h-full">
    <view class="flex flex-wrap justify-between items-center">
      <text class="font-semibold text-[#303030] text-[32rpx] w-full text-center mb-[20rpx]">
        招生计划({{ provinceName }})
      </text>
      <view
        @click="handleShow(1)"
        class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
        v-show="year"
      >
        {{ year }}
        <view class="i-carbon-chevron-down rotate-270"></view>
      </view>
      <view
        @click="handleShow(2)"
        class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
        v-show="batches.length > 0"
      >
        {{ batche }}
        <view class="i-carbon-chevron-down rotate-270"></view>
      </view>
    </view>

    <scroll-view class="mt-[38rpx] flex-1 pb-safe">
      <WXXTable :data="tableData" v-if="!flag">
        <!-- <WXXTableCol prop="universityName" label="院校名称" width="25%"></WXXTableCol> -->
        <WXXTableCol prop="major" label="招生专业" width="47%"></WXXTableCol>
        <WXXTableCol prop="selectsubject" label="选科" width="15%"></WXXTableCol>
        <WXXTableCol prop="plancount" label="计划数" width="13%"></WXXTableCol>
        <WXXTableCol prop="academic" label="学制" width="10%"></WXXTableCol>
        <WXXTableCol prop="fee" label="学费" width="15%"></WXXTableCol>
      </WXXTable>
      <WXXTable :data="tableData" v-else>
        <!-- <WXXTableCol prop="universityName" label="院校名称" width="20%"></WXXTableCol> -->
        <WXXTableCol prop="majorgroupname" label="专业组" width="15%"></WXXTableCol>
        <WXXTableCol prop="major" label="招生专业" width="33%"></WXXTableCol>
        <WXXTableCol prop="selectsubject" label="选科" width="15%"></WXXTableCol>
        <WXXTableCol prop="plancount" label="计划数" width="15%"></WXXTableCol>
        <WXXTableCol prop="academic" label="学制" width="10%"></WXXTableCol>
        <WXXTableCol prop="fee" label="学费" width="12%"></WXXTableCol>
      </WXXTable>
    </scroll-view>

    <ActionSheet v-model:show="show" title="">
      <view class="px-[32rpx]">
        <CustomPickerView :list="pickList" v-model:modelValue="pickValue" />
      </view>
      <template #footer>
        <view class="flex items-center justify-between px-[32rpx] gap-[20rpx]">
          <view class="cancel-btn" @click="show = false">取消</view>
          <view class="submit-btn" @click="handleConfirm">确认</view>
        </view>
      </template>
    </ActionSheet>
  </view>
</template>

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

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

const userStore = useUserStore()

const batchList = []
const batche = ref(batchList[0])
const batches = ref(batchList)
const provinceName = userStore.userInfo.estimatedAchievement.provinceName

const year = ref('')
const yearList = ref<any[]>([])

const pickList = ref<any[]>([])
const pickValue = ref('')
let pickType = 1

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

let isFirst = true
watch(
  () => props.id,
  (newVal) => {
    getPlanProListData(newVal)
  },
)

const show = ref(false)
const handleShow = (type: number) => {
  show.value = true
  pickType = type

  if (type === 1) {
    pickList.value = yearList.value
    pickValue.value = year.value
  } else if (type === 2) {
    pickList.value = batches.value
    pickValue.value = batche.value
  }
}

const flag = ref(false)
const getPlanProListData = async (newVal) => {
  getPlanProList({
    years: year.value === '全部年份' ? '' : year.value,
    _uid: newVal,
    batchName: batche.value === '全部分类' ? '' : batche.value,
    locationCode: userStore.userInfo.estimatedAchievement.provinceCode,
  }).then((resp) => {
    if (resp.code === 200) {
      const _res = resp.result as {
        batches: { batchName: string }[]
        yearsDtos: string[]
        plans: any[]
      }
      yearList.value = ['全部年份', ..._res.yearsDtos]
      batches.value = ['全部分类', ..._res.batches.map((item) => item.batchName)]
      tableData.value = _res.plans

      if (_res.plans.length > 0) {
        flag.value = !!_res.plans[0].majorgroupname
      }

      if (isFirst) {
        year.value = yearList.value[0]
        batche.value = batches.value[0]
      }
      isFirst = false
    }
  })
}

const handleConfirm = () => {
  if (pickType === 1) {
    year.value = pickValue.value ? pickValue.value : yearList.value[0]
  } else if (pickType === 2) {
    batche.value = pickValue.value ? pickValue.value : batches.value[0]
  }
  show.value = false
  getPlanProListData(props.id)
}
</script>
<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';
</style>
