<template>
  <view class="flex flex-col pt-[32rpx] px-[32rpx] bg-[#fff]">
    <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]"
      >
        {{ year }}
        <wd-icon name="arrow-down" size="16rpx" custom-class="ml-[80rpx]"></wd-icon>
      </view>
      <view
        @click="handleShow(2)"
        class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
      >
        {{ batche }}
        <wd-icon name="arrow-down" size="16rpx" custom-class="ml-[80rpx]"></wd-icon>
      </view>
    </view>

    <scroll-view class="mt-[38rpx] flex-1 pb-safe">
      <WXXTable :columns="columns" :tableData="tableData"></WXXTable>
    </scroll-view>

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

<script lang="ts" setup>
import WXXTable from '@/pages-sub/home/components/Table.vue'
import { getPlanProList } from '@/service/index/api'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.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([])

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

const tableData = ref([])

const columns = [
  { name: '院校名称', key: 'universityName', width: '25%' },
  { name: '招生专业', key: 'major', width: '37%' },
  { name: '计划数', key: 'plancount', width: '13%' },
  { name: '学制', key: 'academic', width: '10%' },
  { name: '学费', key: 'fee', width: '15%' },
]

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
  }
}

const getPlanProListData = async (newVal) => {
  getPlanProList({
    years: year.value === '全部年份' ? '' : year.value,
    _uid: newVal,
    batchName: batche.value === '全部分类' ? '' : batche.value,
    locationCode: userStore.userInfo.estimatedAchievement.provinceCode,
  }).then((resp) => {
    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 (isFirst) {
      year.value = yearList.value[0]
      batche.value = batches.value[0]
    }
    isFirst = false
  })
}

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