<script lang="ts" setup>
import MxSearch from "@/pages-sub/components/search/index.vue"
import MxCheckbox from "@/pages-sub/components/checkbox/index.vue?async"
import MxRadio from "@/pages-sub/components/radio/index.vue?async"
import { getAreaList, getBusSchoolAdmission, getSchoolNature } from "@/service"
import { useWishlistStore } from "@/store"

const tableData = ref([])
const tableColumns = [
    { title: '院校名称', prop: 'schoolName', width: '40%', align: 'left' },
    { title: '冲稳保', prop: 'tags', width: "15%", align: "center" },
    { title: '计划数', prop: 'planCount', width: '15%', align: "center" },
    { title: '分数线', prop: 'score', width: '15%', align: "center" },
] as const

const chooseData = ref([])
const chooseDataMap = new Map()
const wishlistStore = useWishlistStore()

const handleChoose = (val) => {

    if (chooseData.value.includes(val.schoolId)) {
        const index = chooseData.value.indexOf(val.schoolId);
        if (index > -1) {
            chooseData.value.splice(index, 1);
            chooseDataMap.delete(val.schoolId)
        }
    } else {
        if (chooseData.value.length > 2) {
            uni.showToast({ title: "第三志愿最多只能3个", icon: "none" })
            return;
        }
        chooseData.value.push(val.schoolId);
        chooseDataMap.set(val.schoolId, val)
    }
    let tempSchool = []
    chooseDataMap.forEach((val, key) => {
        tempSchool.push({ ...val, type: "thirdBatch" })
    })

    wishlistStore.setSchool(JSON.stringify({ schools: tempSchool }))
}

const popVisible = ref(false)
const cwbs = ref([{ value: '冲', label: '冲' }, { value: '稳', label: '稳' }, { value: '保', label: '保' }])
const natureList = ref([])
const totalCount = ref(0)
const regions = ref([])

const searchParams = ref({
    cwb: null,
    cwbLabel: "",
    nature: null,
    natureLabel: "",
    region: [],
    keyword: ""
})

const popType = ref("")
const handleOpenPop = (type: string) => {
    popVisible.value = true;
    popType.value = type
}

const handleChangeSchool = () => {
    getBusSchoolAdmission({
        data: {
            schoolName: searchParams.value.keyword,
            schoolNature: searchParams.value.nature,
            region: searchParams.value.region,
            tags: searchParams.value.cwb
        }
    }).then(resp => {
        popVisible.value = false;
        tableData.value = resp.result.rows;
        cwbs.value = cwbs.value.map((item) => {
            return {
                value: item.value,
                label: `${item.value}(${item.value === '冲' ? resp.result.chongCount : item.value === '稳' ? resp.result.wenCount : resp.result.baoCount})`
            }
        })
        totalCount.value = Number(resp.result.chongCount) + Number(resp.result.wenCount) + Number(resp.result.baoCount)
    })
}
const handleCancel = () => {
    searchParams.value.region = []
    popVisible.value = false;
}


onLoad(() => {

    getAreaList().then(resp => {
        if (resp.code === 200) {
            regions.value = resp.result
        }
    })

    getSchoolNature().then(resp => {
        if (resp.code === 200) {
            natureList.value = resp.result
        }
    })

    handleChangeSchool()
})
</script>
<template>
    <view class="">

        <view class="mb-[14rpx] flex gap-[10rpx]">

            <view
                class="text-[24rpx] text-[#303030] flex items-center py-[12rpx] px-[20rpx] bg-[#F3F4F8] rounded-[12rpx]"
                @click="handleOpenPop('school')">
                <view class="mr-[10rpx]">全部({{ totalCount }})</view>
                <view class="w-[18rpx] h-[18rpx] flex items-center">
                    <image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill"
                        class="w-[18rpx] h-[18rpx]" />
                </view>
            </view>

            <view
                class="text-[24rpx] text-[#303030] flex items-center py-[12rpx] px-[20rpx] bg-[#F3F4F8] rounded-[12rpx]"
                @click="handleOpenPop('nature')">
                <view class="mr-[10rpx]">办学性质</view>
                <view class="w-[18rpx] h-[18rpx] flex items-center">
                    <image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill"
                        class="w-[18rpx] h-[18rpx]" />
                </view>
            </view>

            <view
                class="text-[24rpx] text-[#303030] flex items-center py-[12rpx] px-[20rpx] bg-[#F3F4F8] rounded-[12rpx]"
                @click="handleOpenPop('region')">
                <view class="mr-[10rpx]">所在地区</view>
                <view class="w-[18rpx] h-[18rpx] flex items-center">
                    <image src="https://lwzk.ycymedu.com/img/qt/qt_quyu.png" mode="scaleToFill"
                        class="w-[18rpx] h-[18rpx]" />
                </view>
            </view>

            <MxSearch root-class="py-[14rpx]! px-[20rpx]! w-[166rpx] rounded-[12rpx]!" :clear-icon="false"
                placeholder="请输入" />
        </view>
        <view v-if="tableData.length === 0"
            class="flex flex-col items-center justify-center bg-[#F7F7F7] min-h-[240rpx] rounded-[16rpx]">
            <view class="w-[148rpx] h-[148rpx] flex items-center">
                <image src="https://lwzk.ycymedu.com/img/tianbao/tb_moren.png" mode="scaleToFill"
                    class="w-[148rpx] h-[148rpx]" />
            </view>
            <view class="text-[26rpx] text-[#B2B2B2]">没用匹配数据</view>
        </view>

        <view class="min-h-[240rpx]" v-if="tableData.length > 0">
            <sar-table root-style="--sar-table-bg:transparent;">
                <sar-table-row root-class="rounded-[12rpx] px-[20rpx] bg-[#F3F4F8] py-[20rpx] text-[#333] text-[24rpx]">
                    <sar-table-cell v-for="item in tableColumns" :key="item.prop" bold :width="item.width">
                        <view :style="{ textAlign: item.align }">{{ item.title }}</view>
                    </sar-table-cell>
                    <sar-table-cell bold width="15%">
                        <view class="text-center">选择</view>
                    </sar-table-cell>
                </sar-table-row>

                <sar-table-row v-for="(record, index) in tableData" :key="index"
                    :root-class="`py-[18rpx] px-[20rpx] text-[26rpx] ${index % 2 === 0 ? 'bg-white' : 'bg-[#FAFAFA]'}`">
                    <sar-table-cell v-for="item in tableColumns" :key="item.prop" :width="item.width">
                        <view class="flex items-center justify-center" v-if="item.prop === 'tags'">
                            <view
                                class="w-[44rpx] h-[44rpx] rounded-[8rpx] text-[26rpx] font-600 flex items-center justify-center"
                                :class="`${tableData[index].tags === '稳' ? 'text-[#FA8E23] bg-[#ffeede]' : tableData[index].tags === '保' ? 'bg-[#dcf6f0] text-[#15C496]' : 'bg-[#fce5e3] text-[#EB5241]'}`">
                                {{ tableData[index].tags }}</view>
                        </view>
                        <view :style="{ textAlign: item.align }" v-else>{{ record[item.prop] }}</view>
                    </sar-table-cell>

                    <sar-table-cell width="15%">
                        <view class="flex items-center justify-center" @click="handleChoose(record)">
                            <view class="w-[36rpx] h-[36rpx] flex items-center"
                                v-if="chooseData.includes(record.schoolId)">
                                <image src="https://lwzk.ycymedu.com/img/tianbao/tb_duoxuan.png" mode="scaleToFill"
                                    class="w-[36rpx] h-[36rpx]" />
                            </view>
                            <sar-icon name="square" size="36rpx" color="#CCC" v-else></sar-icon>
                        </view>
                    </sar-table-cell>
                </sar-table-row>
            </sar-table>
        </view>

        <sar-popup :visible="popVisible" effect="slide-bottom" root-class="min-h-[560rpx]" @leave="handleChangeSchool">
            <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>{{ popType === 'school' ? '全部学校' : (popType === 'nature' ?
                        '请选择办学性质' : '请选择所在区(可多选)') }}</view>
                    <view class="w-[36rpx] h-[36rpx] flex items-center" @click="popVisible = false">
                        <image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
                            class="w-[36rpx] h-[36rpx]" />
                    </view>
                </view>
                <MxRadio v-model:value="searchParams.cwb" v-model:label="searchParams.cwbLabel" :options="cwbs"
                    label-key="label" value-key="value"
                    custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]" custom-root-class=" pb-[16rpx]"
                    custom-item-class="py-[12rpx] text-center border-1 border-solid border-[#F3F4F8]"
                    active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!"
                    v-if="popType === 'school'" @change="popVisible = false" />
                <MxRadio v-model:value="searchParams.nature" v-model:label="searchParams.natureLabel"
                    :options="natureList" label-key="label" value-key="value"
                    custom-root-cols-class="grid grid-cols-2 items-center gap-[16rpx]" custom-root-class=" pb-[16rpx]"
                    custom-item-class="py-[12rpx] text-center border-1 border-solid border-[#F3F4F8]"
                    active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!"
                    v-if="popType === 'nature'" @change="popVisible = false" />
                <MxCheckbox v-model:value="searchParams.region" :options="regions" label-key="label" value-key="value"
                    custom-root-class=" pb-[16rpx]" custom-item-class="w-full py-[16rpx] text-center"
                    v-if="popType === 'region'" />

                <view
                    class="grid grid-cols-2 gap-[20rpx] border-t-[1rpx] border-t-solid border-t-[#eee] pt-[16rpx] px-[30rpx]"
                    v-if="popType === 'region'">
                    <view class="text-[34rpx] font-500 text-[#333] bg-[#F5F5F5] rounded-[12rpx] py-[20rpx] text-center"
                        @click="handleCancel">
                        取消</view>
                    <view class="text-[34rpx] font-500 text-white bg-[#1580FF] rounded-[12rpx] py-[20rpx] text-center"
                        @click="handleChangeSchool">
                        确定</view>
                </view>
            </view>
        </sar-popup>
    </view>
</template>

<style lang="scss" scoped>
.submit-btn[disabled] {
    background-color: #a1cbff;
    color: #fff;
}
</style>
