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

<template>
  <z-paging
    ref="paging"
    use-virtual-list
    :force-close-inner-list="true"
    cell-height-mode="dynamic"
    @virtualListChange="virtualListChange"
    @query="queryList"
    :auto-show-system-loading="true"
    :safe-area-inset-bottom="true"
  >
    <template #top>
      <view class="relative">
        <Navbar
          safeAreaInsetTop
          bg-color="transparent"
          :bordered="false"
          left-arrow
          title="查扩缩招"
          @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="item.id"
          :title="item.title"
          custom-class="flex items-center"
          v-for="(item, index) in subMenu"
          :activation="item.activation"
        >
          <Region
            :defaultValue="regionKeyInfo"
            @changeName="handleRegionChange"
            @change="handleRegionChangeCode"
            class="custom-check-group"
            v-if="item.id === 1"
          />
          <Nature
            :defaultValue="natureKeyInfo"
            @changeName="handleNatureChange"
            @change="handleNatureChangeCode"
            class="custom-check-group"
            v-if="item.id === 2"
          />
          <UniType
            :defaultValue="uniTypeKeyInfo"
            @change-name="handleUniTypeChange"
            @change="handleUniTypeChangeCode"
            class="custom-check-group"
            v-if="item.id === 3"
          />
          <view class="flex items-center justify-between px-[32rpx] pb-[32rpx] gap-[20rpx]">
            <view class="cancel-btn" @click="handleClear(index)">清空</view>
            <view class="submit-btn" @click="handleCheck">查看</view>
          </view>
        </drop-menu-item>
      </drop-menu>

      <view class="px-32rpx">
        <view class="flex items-center justify-between input-wrapper-class">
          <input
            v-model="searchParams.collegeName"
            placeholder="请输入院校名称"
            confirm-type="done"
            input-mode="numeric"
            class="flex-auto"
          />
          <view class="text-[#1580FF] text-[24rpx] search-text" @click="handleConfirm">查询</view>
        </view>
      </view>
      <view class="bg-[#F8F8F8] h-[16rpx] mt-[40rpx]"></view>
    </template>
    <view class="px-[32rpx] pt-[32rpx]">
      <view
        class="bg-[#F7F7F7] flex items-center justify-between text-[20rpx] text-[#333] px-[28rpx] py-[16rpx] sticky top-0"
      >
        <view class="flex-auto text-[24rpx] font-semibold">院校</view>
        <view class="w-[96rpx] text-center px-[16rpx] text-[24rpx] font-semibold">招生专业</view>
        <view class="w-[116rpx] text-center px-[16rpx] text-[24rpx] font-semibold">
          {{ tModel.year }}计划
        </view>
        <view class="w-[86rpx] text-center pl-[16rpx] text-[24rpx] font-semibold">
          较{{ tModel.year - 1 }}
        </view>
      </view>

      <view
        class="item-wrapper"
        :id="`zp-id-${item.zp_index}`"
        :key="item.zp_index"
        v-for="(item, index) in lineList"
      >
        <view class="flex items-center justify-between text-[20rpx] text-[#333] py-[16rpx]">
          <view class="flex-1 flex items-center">
            <image :src="item.logo" mode="scaleToFill" class="w-[72rpx] h-[72rpx] mr-[6rpx]" />
            <view class="ml-[6rpx]">
              <view class="text-[32rpx] font-semibold text-wrap max-w-[200rpx]">
                {{ item.name }}
              </view>
              <view class="mt-[6rpx] text-[22rpx]">
                <text class="mr-[16rpx]">{{ item.provinceName }}</text>
                <text>排名：{{ item.rank }}</text>
              </view>
            </view>
          </view>
          <view class="w-[96rpx] text-center px-[16rpx] text-[24rpx]">{{ item.planCount }}</view>
          <view class="w-[116rpx] text-center px-[16rpx] text-[24rpx]">{{ item.newPlan }}人</view>
          <view class="w-[86rpx] text-center pl-[16rpx] pr-[28rpx] text-[24rpx]">
            <text v-if="item.newPlan - item.oldPlan === 0">相同</text>
            <view v-else class="flex items-center justify-center gap-[10rpx]">
              <text>{{ item.newPlan - item.oldPlan }}</text>
              <image
                v-if="item.newPlan - item.oldPlan < 0"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAARRJREFUSEu91EFOhDAYhuH370TXHGGOwMaEuNJM4jnKCYwnEE4yeAoTE0LcsZwb6BE8wFC1OBBGO6UmZboikPTJ9/Uvkj3rtbqkMUqK9nb7xEJLrmv9Bqzt/kaJXgqTrNZawXYIshQmFjgH1kPnwEboP9jVi05XkLZ3VRU6O0dQCGaRixUNkBgo2k1VhmB/IB82RcbhCcSckBMzlEpxb5MckI/hOSTZSciFTVLkXcduqLC/gzPJvJAzGeTt5mcIflfpw2ah6YYGHgZkSBeKBUFzU+XDslo/YniNAp2q0b5XUNCRR4Nc2NiEoYwKebAqOmTPpK/reMU7o8NVcCH203vURDeNTvZ7UhGS7pMUIUFI5ftv8gVvqo+bwdfwaAAAAABJRU5ErkJggg=="
                mode="scaleToFill"
                class="w-[16rpx] h-[16rpx]"
              />
              <image
                v-if="item.newPlan - item.oldPlan > 0"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAATlJREFUSEu11eFNwzAQBeB3gQEyAIV2g67QDewJgBGYgHYCRmhH8AbABHSDRhSJvxmA5sEFtTKuk7jIza9EivP57l0SQcZjY8z0ApgSGAtwI0ApInpdSkYH78bcicjy6JnkOiukQAwj8Jod+rD29qd1K78qkqusUAxRsCEX2aAQIXmviGam58mQTtTEuXVseGLItXNt+zSzAkgbhq0xjxCZg5yPnFv4WB/i3zdY0QHZr/KwAKlB2pFzL7Gqe6EjxMNEpPKmqxZydtXR2jarrhc2QGoNtBB50rc+WDOIdEIhst/tpzHjncizhyUhUagL2VfhYeVQuzqHYQj5gwFlXyZhJIeMUpH/foRb6NxIm5GPEKgK0p7SktQKZWvtG35/VtWOnE2cq1IXn3KfbIwpL4ti+dU0D+dCdEPf+I3M1u2H9e8AAAAASUVORK5CYII="
                mode="scaleToFill"
                class="w-[16rpx] h-[16rpx]"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</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 UniType from '@/pages-sub/home/components/UniType.vue'
import Nature from '@/pages-sub/home/components/Nature.vue'

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

const userStore = useUserStore()

const searchParams = ref({
  locationName: [],
  type: [],
  searchNature: [],
  collegeName: '',
})

const handleConfirm = () => {
  paging.value.reload()
}

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

const handleNatureChangeCode = (val: any) => {
  natureKeyInfo.value = val
}
const handleUniTypeChangeCode = (val: any) => {
  uniTypeKeyInfo.value = val
}

const handleRegionChangeCode = (val: any) => {
  regionKeyInfo.value = val
}

const handleRegionChange = (val: any) => {
  searchParams.value.locationName = val
  subMenu.value[0].activation = val.length !== 0
}
const handleNatureChange = (val: any) => {
  searchParams.value.searchNature = val
  subMenu.value[1].activation = val.length !== 0
}

const handleUniTypeChange = (val: any) => {
  searchParams.value.type = val
  subMenu.value[2].activation = val.length !== 0
}

const lineList = ref<any[]>([])
const tModel = ref({ year: 0 })

const paging = ref<any>(null)
const queryList = (page: number, pageSize: number) => {
  getAdmissionTrends({
    pageIndex: page,
    pageSize,
    locationCode: userStore.userInfo.estimatedAchievement.provinceCode,
    provinceName: searchParams.value.locationName,
    utype: searchParams.value.type,
    nature: searchParams.value.searchNature,
    keyword: searchParams.value.collegeName,
  }).then((res) => {
    if (res.code === 200) {
      paging.value.complete((res.result as { rows: any[] }).rows)
      tModel.value.year = (res.result as { tModel: { year: number } }).tModel.year
    } else {
      paging.value.complete([])
    }
  })
}
const virtualListChange = (_vList: any) => {
  lineList.value = _vList
}

const subMenu = ref([
  { id: 1, title: '省份', activation: false },
  { id: 2, title: '层次', activation: false },
  { id: 3, title: '类别', activation: false },
])

const dropMenuRef = ref()
const regionKeyInfo = ref<any[]>([]) // 省份信息
const uniTypeKeyInfo = ref<any[]>([]) // 层次信息
const natureKeyInfo = ref<any[]>([]) // 类型信息

const handleClear = (index: number) => {
  if (subMenu.value[index].id === 1) {
    regionKeyInfo.value = []
  } else if (subMenu.value[index].id === 2) {
    natureKeyInfo.value = []
  } else if (subMenu.value[index].id === 3) {
    uniTypeKeyInfo.value = []
  }
  subMenu.value[index].activation = false
  dropMenuRef.value.closeDropMenu()
}

const handleCheck = () => {
  dropMenuRef.value.closeDropMenu()
  handleConfirm()
}
</script>

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