<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import MxSearch from "@/pages-sub/components/search/index.vue"
import { getHightSchool } from '@/service'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'

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

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

const userStore = useUserStore();
const {userInfo} = storeToRefs(userStore)

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

const keywords = ref("")
const region = ref("")

const schools = ref([])

const handleActiveSchool = (name:string) => {
    userInfo.value.userExtend.schoolName = name;
    uni.navigateBack()
}

const handleChange = () => {
    getHightSchool({data:{searchKey:keywords.value,region:region.value}}).then(resp => {
        if(resp.code === 200){
            schools.value = resp.result
        }
    })
}

onLoad((options) => {
    region.value = options.area
    handleChange() 
})
</script>

<template>
    <view class="flex flex-col custom-background h-screen">
        <sar-navbar show-back @back="handleBack" :fixed="true" fixation-style="top:unset;"
            :root-style="{ '--sar-navbar-bg': `transparent`, '--sar-navbar-item-color': 'black', 'padding-top': `${systemInfo?.statusBarHeight}px` }">
            <template #title>
                <view class="flex justify-center">选择就读中学</view>
            </template>
        </sar-navbar>
        <view class="mx-[30rpx] pb-safe flex-1 flex flex-col overflow-hidden">
            <MxSearch v-model:searchText="keywords" root-class="bg-white! border-solid border-1 border-[#1580FF] p-[20rpx_20rpx_20rpx_30rpx]" placeholder="输入高中名称" @complete="handleChange" />
            <view class="flex-1 overflow-y-auto">
                <view class="py-[29rpx] border-b border-b-solid border-b-[#EDEDED] text-[30rpx] text-[#333] flex items-center justify-between" v-for="(val,index) in schools" :key="val.id" @click="handleActiveSchool(val.schoolName)">
                    <view :class="`${userInfo.userExtend.schoolName === val.schoolName ? 'text-[#1580FF]' : ''}`">{{ val.schoolName }}</view>
                    <view class="w-[40rpx] h-[40rpx] flex items-center" v-if="userInfo.userExtend.schoolName === val.schoolName">
                        <image
                            src="https://lwzk.ycymedu.com/img/tianbao/tb_danxuan.png"
                            mode="scaleToFill"
                            class="w-[40rpx] h-[40rpx]"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.custom-background {
    background: linear-gradient(180deg, #D7E4FF 0%, #fff 176rpx);
    background-position: 50% 50%;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: auto auto;
}
</style>
