<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'
import MxSearch from "@/pages-sub/components/search/index.vue?async"
import MxRadioGroup from "@/pages-sub/components/radio/index.vue?async"
import { getAreaList, getSchoolQuotaScores } from "@/service"

// #ifdef MP-WEIXIN
definePage({
  style: {
    navigationStyle: 'custom',
  },
  excludeLoginPath: false,
})
// #endif

// #ifndef MP-WEIXIN
definePage({
  style: {
    navigationStyle: 'custom',
    transparentTitle: 'always',
    navigationBarTitleText: ''
  },
  excludeLoginPath: false,
})
// #endif

const handleBack = () => {
  uni.navigateBack({ delta: 1 })
}

const regionVisible = ref(false)
const regions = ref([])

const schools = ref([])
const searchParams = ref({
  keyword: "",
  region: "",
  regionLabel: ''
})

const navigateToDetail = (schoolName: string) => {
  uni.navigateTo({ url: `/pages-sub/information/quotaDetail?schoolName=${schoolName}` })
}

const handleChange = () => {
  getSchoolQuotaScores({ query: { SchoolName: searchParams.value.keyword, Region: searchParams.value.region } }).then(resp => {
    if (resp.code === 200) {
      schools.value = resp.result
    }
  })
}

onLoad(() => {
  getAreaList().then(resp => {
    if (resp.code === 200) {
      regions.value = [{ label: '不限', value: '' }, ...resp.result]
    }
  })
  handleChange()
})

</script>

<template>
  <view class="gradient-custom h-screen flex flex-col">
    <sar-navbar title="指标生分配" :show-back="true" @back="handleBack"
      :root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, 0)`, 'padding-top': `${safeAreaInsets?.top}px`, '--sar-navbar-item-color': 'black' }">
    </sar-navbar>
    <view class="flex">
      <view class="flex items-center ml-[30rpx]" @click="regionVisible = true">
        <text class="text-[#666] text-[30rpx]">{{ searchParams.regionLabel === '' || searchParams.regionLabel === '不限' ?
          '区域' : searchParams.regionLabel }}</text>
        <view class="w-[24rpx] h-[24rpx] ml-[10rpx] flex items-center">
          <image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill" class="w-[24rpx] h-[24rpx]" />
        </view>
      </view>
      <view class="flex-1 ml-[30rpx]">
        <mx-search root-class="mr-[40rpx]" placeholder="输入学校名称" v-model:searchText="searchParams.keyword"
          @complete="handleChange" />
      </view>
    </view>

    <scroll-view scroll-y class="flex-1">
      <view v-for="(val, index) in schools" :key="index"
        class="flex items-center justify-between py-[28rpx] mx-[30rpx] border-b-1 border-b-solid border-[#f5f5f5]"
        @click="navigateToDetail(val.schoolName)">
        <view class="text-[#333] text-[30rpx]">{{ val.schoolName }}</view>
        <view class="w-[18rpx] h-[36rpx]">
          <image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png" mode="scaleToFill"
            class="w-[18rpx] h-[36rpx]" />
        </view>
      </view>
      <view class="pb-safe"></view>
    </scroll-view>

    <sar-popup :visible="regionVisible" effect="slide-bottom" root-class="min-h-[560rpx]" @leave="handleChange">
      <view class="bg-white rounded-[24rpx_24rpx_0_0] px-[30rpx] pb-safe pt-[30rpx] min-h-[492rpx]">
        <view class="text-[34rpx] font-500 flex items-center justify-between mb-[30rpx]">
          <view>请选择中考所在地</view>
          <view class="w-[36rpx] h-[36rpx] flex items-center" @click="regionVisible = false">
            <image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
              class="w-[36rpx] h-[36rpx]" />
          </view>
        </view>
        <MxRadioGroup v-model:value="searchParams.region" v-model:label="searchParams.regionLabel" :options="regions"
          label-key="label" value-key="value" custom-root-class=""
          custom-item-class="w-full py-[16rpx] text-center border-[1rpx] border-solid"
          active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!"
          default-item-class="bg-[#F3F4F8] border-[#F3F4F8]" @change="regionVisible = false" />
      </view>

    </sar-popup>
  </view>
</template>

<style lang="scss" scoped></style>
