<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"
        class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
      >
        {{ provinceName || '请选择省份' }}
        <view class="i-carbon-chevron-down"></view>
      </view>
    </view>

    <view class="mt-[38rpx] flex-1 pb-safe overflow-y-auto flex flex-col">
      <view
        class="bg-[#F7F7F7] flex items-center justify-between text-[24rpx] text-[#333] font-semibold sticky top-0 th-border"
      >
        <view class="px-[20rpx] w-[60rpx] td">代码</view>
        <view class="flex-auto px-[25rpx] td">院校/专业名称</view>
        <view class="w-[108rpx] text-center px-[22rpx] td">{{ year }}招生</view>
        <view class="w-[108rpx] text-center px-[22rpx] td">{{ +year - 1 }}招生</view>
      </view>

      <view
        class="item-wrapper flex-1 flex items-center justify-between tbody-custom text-[24rpx] text-[#333]"
        :key="index"
        v-for="(item, index) in tableData"
      >
        <view class="px-[20rpx] w-[60rpx] td">{{ item.majorCode }}</view>
        <view class="flex-1 p-[24rpx] td max-w-[400rpx]">
          <view class="text-[22rpx] font-bold text-[#333]">{{ item.majorName }}</view>
          <view class="text-[20rpx] text-[#636363]">
            定向生录取分数要求按我校招生章程执行,可在统招线下20分内优录取:{{ item.selectsubject }}
          </view>
        </view>
        <view class="w-[108rpx] text-center px-[22rpx] td">{{ item.newPlan }}</view>
        <view class="w-[108rpx] text-center px-[22rpx] td">{{ item.oldPlan }}</view>
      </view>
      <view
        class="flex flex-col items-center justify-center text-[22rpx] text-[#333] border-body mt-auto flex-1 no-data-wrapper"
        v-if="tableData.length === 0"
      >
        <image
          src="data:image/png;base64,[encoded data, 7048 characters]"
          mode="scaleToFill"
          class="w-[240rpx] h-[240rpx]"
        />
        <view class="text-[28rpx] mt-[30rpx] px-[20rpx] text-[#666]">没有数据哦~</view>
      </view>
    </view>
  </view>
  <ActionSheet v-model:show="show" title="省份">
    <template>
      <view class="px-[24rpx] pt-[24rpx] pb-[32rpx]">
        <Region
          @change="handleRegionChange"
          @change-name="handleRegionChangeName"
          :defaultValue="provinceCode"
          :max="1"
          class="custom-check-group w-full"
          :defaultCols="4"
        />
      </view>
    </template>
  </ActionSheet>
</template>

<script lang="ts" setup>
import { getAdmissionTrendsByCollege } from '@/service/index/api'
import { useUserStore } from '@/store'
import Region from '@/pages-sub/home/components/Region.vue'

import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

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

const userStore = useUserStore()

const provinceName = ref(userStore.userInfo.city.provincename)
const provinceCode = ref([userStore.userInfo.city.code])

const year = ref(0)

const pickList = ref([])

const tableData = ref([])

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

const show = ref(false)
const handleShow = () => {
  show.value = true

  pickList.value = []
}

const getPlanProListData = async (newVal) => {
  getAdmissionTrendsByCollege({
    year: year.value,
    uid: newVal,
    locationCode: provinceCode.value[0],
  }).then((resp) => {
    if (resp.code === 200) {
      const _res = resp.result as {
        items: { batchName: string }[]
        year: number
      }

      tableData.value = _res.items
      if (_res.year !== year.value) {
        year.value = _res.year
        // getPlanProListData(props.id)
      }
    }
  })
}

const handleRegionChange = (val) => {
  if (val.length > 0) {
    show.value = false
  }
  provinceCode.value = val
  getPlanProListData(props.id)
}

const handleRegionChangeName = (val) => {
  provinceName.value = val.join(',')
}
</script>
<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';
@import '@/pages-sub/home/styles/grid-checkbox.scss';

.th-border {
  border: 2rpx solid #eeeeee;

  .td:not(:last-child) {
    border-right: 2rpx solid #eeeeee;
  }

  .td {
    padding-top: 16rpx;
    padding-bottom: 16rpx;
  }
}

.tbody-custom {
  border-left: 2rpx solid #eee;
  border-right: 2rpx solid #eee;
  border-bottom: 2rpx solid #eee;
  align-items: stretch;
  .td:not(:last-child) {
    border-right: 2rpx solid #eeeeee;
  }
  .td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.no-data-wrapper {
  border-left: 2rpx solid #eee;
  border-right: 2rpx solid #eee;
  border-bottom: 2rpx solid #eee;
}
</style>
