<template>
  <view class="flex flex-col pt-[32rpx] px-[32rpx] bg-[#fff] h-full">
    <view class="flex flex-wrap justify-between items-center">
      <view
        @click="handleShow(1)"
        class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
      >
        {{ year }}
        <view class="i-carbon-chevron-down rotate-270"></view>
      </view>
    </view>

    <scroll-view class="mt-[38rpx] flex-1">
      <WXXTable :data="tableData">
        <WXXTableCol prop="year" label="年份" width="10%"></WXXTableCol>
        <WXXTableCol prop="major_name" label="专业" width="24%"></WXXTableCol>
        <WXXTableCol prop="subjectAndCollege" label="院校/批次-选考要求" width="25%"></WXXTableCol>
        <WXXTableCol prop="score" label="分数" width="24%"></WXXTableCol>
        <WXXTableCol prop="rank_min" label="最低位次" width="17%"></WXXTableCol>
      </WXXTable>
    </scroll-view>

    <ActionSheet v-model:show="show" title="">
      <view class="px-[32rpx]">
        <CustomPickerView :list="pickList" v-model:modelValue="pickValue" />
      </view>
      <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>
    </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 { getAdmissionMark } from '@/service/index/api'
import { useUserStore } from '@/store'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

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

const userStore = useUserStore()

const batchList = []
const batche = ref(batchList[0])
const batches = ref(batchList)

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

const getPlanProListData = async (newVal) => {
  getAdmissionMark({
    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 }[]
      years: string[]
      newZsplanfusions: any[]
    }
    yearList.value = ['全部年份', ..._res.years]
    batches.value = ['全部分类']
    tableData.value = _res.newZsplanfusions.map((item) => {
      let _item = item
      _item.score = `最高分：${item.score_max !== '0' ? item.score_max : '--'} \n 最低分：${item.score_min !== '0' ? item.score_min : '--'} \n 平均分：${item.score_average !== '0' ? item.score_average : '--'}`
      _item.subjectAndCollege = ` 院校/批次:${item.volunteer_type} \n 选科:${item.second_subject}`
      return _item
    })

    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>
