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

<template>
  <view class="h-screen flex flex-col">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        title="位次查询"
        @click-left="navigatorBack"
        content-class="justify-between"
      ></Navbar>
      <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 || '省份'"
        custom-class="flex items-center"
        :disabled="true"
      ></drop-menu-item>
      <drop-menu-item
        :key="2"
        :title="searchParams.year || '年份'"
        custom-class=""
        :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>

    <view class="px-32rpx">
      <view class="flex items-center justify-between input-wrapper-class">
        <input
          v-model="searchParams.Score"
          type="number"
          placeholder="请输入你的高考分数"
          confirm-type="done"
          input-mode="numeric"
          class="flex-auto"
        />
        <view class="text-[#1580FF] text-[24rpx] search-text" @click="handleConfirm">查询</view>
      </view>
      <view class="text-[#636363] text-[20rpx] mt-[24rpx]">分数范围：{{ betweenScores }}</view>
    </view>

    <view class="bg-[#F8F8F8] h-[16rpx] mt-[40rpx]"></view>

    <view class="pt-[40rpx] px-[32rpx] flex flex-col">
      <text class="font-semibold text-[32rpx]">查询结果</text>
      <view class="flex flex-col mt-[22rpx]">
        <view class="text-[24rpx] text-[#636363]">
          位次区间:
          <text class="text-[#1580FF]">{{ betweenRanks?.scoreRange }}</text>
        </view>
        <view class="text-[24rpx] text-[#636363]">
          建议位次:
          <text class="text-[#1580FF]">{{ betweenRanks?.ranges }}</text>
        </view>
        <view class="text-[24rpx] text-[#636363]">
          同分人数:
          <text class="text-[#1580FF]">{{ betweenRanks?.currentCount }}</text>
        </view>
      </view>
    </view>
    <view class="">
      <LEchart ref="echart" class="h-[300rpx]" v-show="!noData"></LEchart>
      <view class="flex flex-col items-center justify-center mt-[40%]" v-show="noData">
        <image
          src="data:image/png;base64, "
          mode="scaleToFill"
          class="w-[240rpx] h-[240rpx]"
        />
        <text>暂无数据</text>
      </view>
      <!-- <view class="flex items-center justify-center flex-col my-[80rpx] relative" v-show="noData">
        <image
          src="https://api.static.ycymedu.com/evaluation/sub/no-data.jpg"
          mode="scaleToFill"
          class="w-[300rpx] h-[300rpx]"
        />
        <text class="text-[24rpx] text-[#636363] absolute bottom-[60rpx]">暂无数据</text>
      </view> -->
    </view>

    <view class="flex flex-col p-[24rpx] bg-[#FEF0F0] text-[#F56C6C] mx-[32rpx] border-class">
      <text class="text-[32rpx] font-bold">*说明</text>
      <text class="text-[24rpx] mt-[16rpx] text-[22rpx] font-normal">
        1.位次查询结果根据各省教育考试院发布的一分一段表计算。
      </text>
      <text class="text-[24rpx] mt-[16rpx] text-[22rpx] font-normal">
        2.在正式填报时，请以各省教育考试院发布的数据为准，本平台数据仅供参考
      </text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
import DropMenu from '@/pages-evaluation-sub/components/drop-menu/DropMenu.vue'
import DropMenuItem from '@/pages-evaluation-sub/components/drop-menu/DropMenuItem.vue'
import CheckGroup from '@/pages-evaluation-sub/components/check-group/CheckGroup.vue'
import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'

const echarts = require('../uni_modules/lime-echart/static/echarts.min')

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

import { useUserStore } from '@/store'
import { initRankAreaEchart } from '../composable/rankAreaEchart'

const userStore = useUserStore()

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

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

const handleConfirm = () => {
  let maxSCore = betweenScores.value.split('到').map((item) => item.replace(/分/g, ''))
  if (+searchParams.value.Score > +maxSCore[1]) {
    searchParams.value.Score = maxSCore[1]
  } else if (+searchParams.value.Score < +maxSCore[0]) {
    searchParams.value.Score = maxSCore[0]
  }
  getScoreSectionData()
}

const checkYearList = ref<any[]>([])
const dropMenuRef = ref()
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()
  }
  getScoreSectionData()
}

const betweenScores = ref('')
const noData = ref(false)
const betweenRanks = ref({
  currentCount: 0,
  ranges: '',
  scoreRange: '',
})

const getScoreSectionData = () => {
  getScoreSection(searchParams.value).then((resp) => {
    if (resp.code === 200) {
      const _result = resp.result as {
        betweenScores: string
        betwenRanks: {
          currentCount: number
          ranges: ''
          scoreRange: ''
        }
        list: {
          type: number
          score: number
          currentCount: number
          cumulativeCount: number
          startRank: number
          endRank: number
        }[]
        configList: { yearList: { year: string; check: boolean }[] }
      }
      checkYearList.value = _result.configList.yearList
      betweenScores.value = _result.betweenScores
      noData.value = _result.list.length === 0
      betweenRanks.value = _result.betwenRanks

      if (!noData.value) {
        const xAxisData = _result.list.map((item) => item.score)
        const yAxisData = _result.list.map((item) => item.currentCount)

        const areaIndex = xAxisData.findIndex((item) => item === Number(searchParams.value.Score))
        const currentCount = _result.list.filter(
          (item) => item.score === Number(searchParams.value.Score),
        )[0].currentCount

        initRankAreaEchart({
          echart,
          echarts,
          xAxisData,
          yAxisData,
          Score: searchParams.value.Score,
          currentCount,
          areaIndex,
        })
      }
    }
  })
}

const echart = ref<any>(null)

onLoad(() => {
  getScoreSectionData()
})

onBeforeMount(() => {
  if (echart.value) {
    echart.value.dispose()
  }
})
</script>

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

.input-wrapper-class {
  border-radius: 8rpx;
  border: 2rpx solid #ededed;
  padding: 10rpx 24rpx;
  margin-top: 48rpx;

  .search-text {
    border-left: 2rpx solid #ededed;
    padding-left: 24rpx;
  }
}

.border-class {
  border-radius: 8rpx;
  border: 2rpx solid #ffeaea;
}
</style>
