<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import SecondBatchSchool from './components/SecondBatchSchool.vue'
import MxDialog from "@/pages-sub/components/dialog/index.vue"
import { useWishlistStore } 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 handleBack = () => {
  uni.navigateBack({ delta: 1 })
}

const navigateToList = () => {
  uni.navigateTo({ url: "/pages-sub/wishlist/create/saveSecondBatchWishList" })
}

const show = ref(false)

const wishlistStore = useWishlistStore()

const {extendWishlist} = storeToRefs(wishlistStore)

const disableSubmit = computed(() => {
  const contents = JSON.parse(extendWishlist.value.contents || '{}')  
  const schools = contents.schools || []
  return schools.length === 0
})
</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="flex-1 overflow-y-auto">
      <view
        class="bg-[#ddebfe] rounded-[16rpx] border-2rpx border-solid border-white flex items-center mx-[20rpx] py-[16rpx] px-[30rpx]"
        @click="show = true">
        <view class="w-[36rpx] h-[36rpx] flex items-center">
          <image src="https://lwzk.ycymedu.com/img/tianbao/tb_tongzhi.png" mode="scaleToFill"
            class="w-[36rpx] h-[36rpx]" />
        </view>
        <view class="text-[#1580FF] text-[30rpx] font-500 ml-[10rpx]">家长须知</view>
        <view class="w-[14rpx] h-[18rpx] flex items-center ml-auto">
          <image src="https://lwzk.ycymedu.com/img/tianbao/tb_lanjiantou.png" mode="scaleToFill"
            class="w-[14rpx] h-[18rpx]" />
        </view>
      </view>
      <view class="px-[20rpx] pt-[20rpx]">
        <SecondBatchSchool />
      </view>
    </view>

    <view class="border-t border-t-solid border-t-[#ededed] px-[40rpx] py-[16rpx]">
      <view class="pb-safe" @click="navigateToList">
        <button :disabled="disableSubmit" form-type="submit" class="rounded-[16rpx] bg-[#1580FF] text-[#f7f7f7] submit-btn">确定</button>
      </view>
    </view>

    <MxDialog v-model:show="show" title="" :defaultPadding="false" defaultWidth="80%" rootClass="rounded-[40rpx]"
      @overlay-click="show = false">
      <template>
        <view class="rounded-[40rpx] bg-white p-[40rpx] custom-dialog-background">
          <view class="text-[52rpx] font-600 clear-both">
            <view>家长须知</view>
            <view class="w-[94rpx] h-[10rpx] bg-[#1580FF] rounded-full"></view>
          </view>
          <view class="w-[192rpx] h-[192rpx] absolute right-[-14rpx] top-[-14rpx]">
            <image src="https://lwzk.ycymedu.com/img/tianbao/tb_laba.png" mode="scaleToFill"
              class="w-[192rpx] h-[192rpx]" />
          </view>
          <view class="text-[30rpx] items-start mt-[50rpx]">
            <view class="text-[#333]">
              本工具用于模拟济南中考志愿填报。
              根据分数、区域和学校信息生成志愿表。
              结果仅供参考，最终以官方公布为准。
            </view>

          </view>
          <view
            class="text-[34rpx] font-500 text-white bg-[#1580FF] rounded-full py-[20rpx] text-center mx-[40rpx] mt-[40rpx]"
            @click="show = false">我知道了</view>
        </view>
      </template>
    </MxDialog>
  </view>
</template>

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

.custom-dialog-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;
}

.submit-btn[disabled] {
    background-color: #73b3ff;
    color: #fff;
}
</style>
