<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        :title="`近4年批次线(${searchParams.locationName})`"
        @click-left="navigatorBack"
      />
      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
    </view>
    <drop-menu ref="dropMenuRef">
      <drop-menu-item
        :key="1"
        :title="searchParams.locationName || '省份'"
        :activation="searchParams.locationName !== ''"
      >
        <Region
          :defaultValue="searchParams.locationCode ? [searchParams.locationCode] : []"
          :max="1"
          class="custom-check-group"
          @changeName="handleRegionChange"
          @change="handleRegionChangeCode"
        />
      </drop-menu-item>
      <drop-menu-item
        :key="2"
        :title="searchParams.year || '年份'"
        custom-class="flex items-center"
        :activation="searchParams.year !== ''"
      >
        <CheckGroup
          :list="checkYearList"
          :default-value="searchParams.year ? [searchParams.year] : []"
          @change="handleYearChange"
          labelKey="year"
          valueKey="year"
          :max="1"
          class="custom-check-group"
          width="100%"
        />
      </drop-menu-item>
    </drop-menu>
    <WXXTable :data="lineList" class="px-[32rpx] mt-[16rpx] pb-safe flex-1">
      <WXXTableCol prop="province_name" label="地区" width="14%"></WXXTableCol>
      <WXXTableCol prop="year" label="年份" width="16%"></WXXTableCol>
      <WXXTableCol prop="subject_name" label="类别" width="18%"></WXXTableCol>
      <WXXTableCol prop="batch_name" label="批次" width="35%"></WXXTableCol>
      <WXXTableCol prop="score" label="分数线" width="17%"></WXXTableCol>
    </WXXTable>
  </view>
</template>

<script lang="ts" setup>
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import { useUserStore } from '@/store'
import DropMenu from '@/pages-sub/components/drop-menu/DropMenu.vue'
import DropMenuItem from '@/pages-sub/components/drop-menu/DropMenuItem.vue'
import Region from '@/pages-sub/home/components/Region.vue'

import CheckGroup from '@/pages-sub/components/check-group/CheckGroup.vue'
import WXXTable from '@/pages-sub/components/table/Table.vue'
import WXXTableCol from '@/pages-sub/components/table/TableCol.vue'

import { getBatchList } from '@/service/index/api'

const userStore = useUserStore()

const searchParams = ref({
  locationCode: userStore.userInfo.estimatedAchievement.provinceCode || '370000',
  locationName: userStore.userInfo.estimatedAchievement.provinceName || '山东省',
  year: '',
  type: '',
})

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

const dropMenuRef = ref()

const navigatorBack = () => {
  uni.navigateBack()
}

const handleRegionChange = (val: any) => {
  searchParams.value.locationName = val.join(',')
}
const handleRegionChangeCode = (val: any) => {
  searchParams.value.locationCode = val[0]
  getBatchListData()
  if (val.length !== 0) {
    dropMenuRef.value.closeDropMenu()
  }
}

const handleYearChange = (val: any) => {
  let _yearList = []

  if (val.length > 1 && val.some((item: any) => item === '')) {
    _yearList = val.filter((item: any) => item !== '')
  } else {
    _yearList = val
  }
  searchParams.value.year = _yearList.join(',')
  if (val.length !== 0) {
    dropMenuRef.value.closeDropMenu()
  }

  getBatchListData()
}

type LineItem = {
  batch_id: number
  batch_name: string
  province_code: number
  province_name: string
  score: string
  subject_id: number
  subject_name: string
  year: number
}

const lineList = ref<LineItem[]>([])

const getBatchListData = () => {
  getBatchList({
    locationCode: searchParams.value.locationCode,
    year: searchParams.value.year === '不限' ? '' : searchParams.value.year,
    type: searchParams.value.type,
  }).then((resp) => {
    if (resp.code === 200 && resp.result !== '暂无数据') {
      const _result = resp.result as {
        configList: { yearList: { year: string; check: boolean }[] }
        list: LineItem[]
      }
      checkYearList.value = _result.configList.yearList

      lineList.value = _result.list
    }
  })
}

onBeforeMount(() => {
  getBatchListData()
})
</script>

<style lang="scss" scoped>
@import '@/pages-sub/home/styles/navbar-background.scss';
@import '@/pages-sub/home/styles/grid-checkbox.scss';
</style>
