<script lang="ts" setup>
import MxDialog from "@/pages-sub/components/dialog/index.vue"
import { getMyScore, saveWishlist } from "@/service"
import { useWishlistStore } from "@/store"
import { storeToRefs } from "pinia"
definePage({
    style: {
        navigationBarTitleText: '我的志愿表'
    },
    excludeLoginPath: true,
})

const show = ref(false)
const handleSave = () => {
    show.value = true
}

const handleSubmit = () =>{
    saveWishlist({data:{title:wishListName.value,contents:extendWishlist.value.contents,batchName:'第三批次',TotalScore:totalScore.value}}).then(resp => {
        if(resp.code === 200){
            show.value = false
            wishlistStore.clearExtendWishlist();
            uni.switchTab({url:"/pages/index/index"})
        }
    })
}

const navigateToHome = () => {
    wishlistStore.clearExtendWishlist();
    uni.switchTab({url:"/pages/index/index"})
}

const wishlistStore = useWishlistStore()
const {extendWishlist} = storeToRefs(wishlistStore)
const content = JSON.parse(extendWishlist.value.contents)
const schools = ref(content.schools)
const totalScore = ref(0)

const wishListName = ref("")
onShow(() => {
    getMyScore().then(resp => {
      if (resp.code === 200 && resp.result) {
        totalScore.value = resp.result.totalScore
      }
    })
})

onBackPress(() => {
    wishlistStore.clearExtendWishlist();
})
</script>

<template>
    <view class="flex flex-col h-screen ">
        <view class="pb-safe flex-1 flex flex-col overflow-hidden">
            <view class="flex-1 overflow-y-auto px-[30rpx] bg-[#F8F8F8]">
                <view v-for="(val, index) in schools" :key="index" class="flex mt-[26rpx]">
                    <view
                        class="py-[29rpx] text-[30rpx] text-[#333] grid gap-[8rpx] bg-white px-[30rpx] py-[20rpx] not-last:mb-[30rpx] rounded-[16rpx] w-full">
                        <view class="text-[32rpx] font-600">{{ val.schoolName }}</view>
                        <view class="text-[24rpx] text-[#333]">{{new Date().getFullYear()}}计划招生：{{ val.planCount }}人</view>
                        <!-- <view class="flex items-center">
                            <view class="text-[#666] bg-[#F8F8F8] rounded-[8rpx] px-[10rpx] py-[4rpx]"
                                v-for="value in 2" :key="value">重点高中</view>
                        </view> -->
                        <view class="text-[#333] text-[24rpx]">
                            {{ val.region }}·{{ val.schoolNature }}
                        </view>
                    </view>
                </view>

            </view>
            <view class="grid grid-cols-2 gap-[20rpx] px-[28rpx] py-[16rpx]">
                <view class="rounded-[16rpx] bg-[#f5f5f5] text-[#333] text-[36rpx] py-[18rpx] text-center" @click="navigateToHome">重新测评</view>
                <view class="rounded-[16rpx] bg-[#1580FF] text-white text-[36rpx] py-[18rpx] text-center"
                    @click="handleSave">保存志愿表</view>
            </view>
        </view>

        <MxDialog v-model:show="show" title="" :defaultPadding="false" defaultWidth="80%" rootClass="rounded-[40rpx]">
            <template>
                <view class="rounded-[40rpx] bg-white p-[40rpx] custom-background"
                    style="--status-bar-height:56rpx; --start-color:#ebf1ff">
                    <view class="text-[40rpx] font-500 text-center">志愿表名称</view>
                    <view
                        class="rounded-full py-[20rpx] px-[30rpx] bg-[#F3F4F8] border-[#E5E5E5] border-solid border-[1rpx] flex items-center justify-between my-[60rpx]">
                        <input type="text" v-model="wishListName" placeholder="请输入姓名" confirm-type="done"
                            placeholder-style="color:#C5C8D1;font-size:30rpx;text-align:left;" class="text-left flex-1">
                        <view class="w-[40rpx] h-[40rpx] flex items-center" v-if="wishListName"  @click="wishListName = ''">
                            <image src="https://lwzk.ycymedu.com/img/tianbao/tb_shanchu.png"
                                mode="scaleToFill" class="w-[40rpx] h-[40rpx]" />
                        </view>
                    </view>
                    <view class="grid grid-cols-2 items-center mx-[40rpx] gap-[24rpx]">

                        <view
                            class="text-[34rpx] font-500 text-[#999] bg-white rounded-full py-[20rpx] text-center border border-[#eee] border-solid"
                            @click="show = false">取消</view>
                        <view class="text-[34rpx] font-500 text-white bg-[#1580FF] rounded-full py-[20rpx] text-center"
                            @click="handleSubmit">确定</view>
                    </view>
                </view>
            </template>
        </MxDialog>
    </view>
</template>

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