<route lang="json5" type="page">
{
  layout: 'page',
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="h-screen overflow-hidden flex flex-col bg-[#F8F8F8]" :bordered="false">
    <wd-navbar title="成绩填写" left-arrow @click-left="navigatorBack" safeAreaInsetTop></wd-navbar>
    <view class="px-[32rpx] pt-[47rpx] flex flex-col" hover-class="none">
      <text class="text-[22rpx] text-[#636363] text-normal" :selectable="false" :decode="false">
        为了使推荐更准确，请您认真填写
      </text>
      <text
        class="text-[28rpx] text-[#000] text-medium mt-[47rpx]"
        :selectable="false"
        :decode="false"
      >
        预估总分
      </text>
      <wd-input
        custom-class="mt-[24rpx] rounded-[16rpx] bg-white flex items-center px-[32rpx] py-[24rpx]"
        custom-input-class="h-full flex items-center"
        type="number"
        v-model="score"
        placeholder="请输入分数"
        @input="handleChange"
        inputmode="numeric"
        :focus="true"
        :no-border="true"
      >
        <template #suffix>
          <text class="" :selectable="false" :decode="false">分</text>
        </template>
      </wd-input>
      <wd-picker
        custom-class="mt-[16rpx]"
        :columns="termList"
        value-key="code"
        label-key="name"
        v-model="term"
      />
    </view>

    <view class="mt-[32rpx] px-[32rpx]" hover-class="none" v-if="requireSubjectList.length > 0">
      <view class="mb-[16rpx]" hover-class="none">
        <text class="" :selectable="false" :decode="false">首选科目</text>
        <text class="text-[24rpx] text-gray">({{ requireSubjectList.length }}选1)</text>
      </view>
      <wd-radio-group
        v-model="requireSubject"
        cell
        inline
        custom-class="grid md:grid-cols-4 grid-cols-3 gap-[32rpx] justify-items-center bg-[#F8F8F8]!"
        checked-color="#1580FF"
      >
        <wd-radio
          v-for="item in requireSubjectList"
          :key="item.code"
          :value="item.code"
          shape="button"
          custom-class="w-[152rpx]! h-[76rpx] p-0! mr-0! "
          custom-label-class="w-[152rpx]! h-[76rpx]! rounded-[8rpx]! checkbox-item-border"
        >
          {{ item.name }}
        </wd-radio>
      </wd-radio-group>
    </view>

    <view class="mt-[32rpx] px-[32rpx]" hover-class="none">
      <view class="mb-[16rpx]" hover-class="none" v-if="requireSubjectList.length > 0">
        <text class="" :selectable="false" :decode="false">次选科目</text>
        <text class="text-[24rpx] text-gray">
          ({{ optionalSubjectList.length }}选{{ requireSubjectList.length > 0 ? 2 : 3 }})
        </text>
      </view>
      <wd-checkbox-group
        v-model="optionalSubject"
        custom-class="grid md:grid-cols-4 grid-cols-3 gap-[32rpx] justify-items-center  bg-[#F8F8F8]!"
        :max="3"
        checked-color="#1580FF"
      >
        <wd-checkbox
          v-for="item in optionalSubjectList"
          :key="item.code"
          :model-value="item.code"
          cell
          shape="button"
          custom-class="w-[152rpx]! h-[76rpx] p-0! mr-0!"
          custom-label-class="w-[152rpx]! h-[76rpx]! rounded-[8rpx]! checkbox-item-border bg-white!"
        >
          {{ item.name }}
        </wd-checkbox>
      </wd-checkbox-group>
    </view>
    <wd-button
      block
      custom-class="mt-auto mb-[32rpx] rounded-[8rpx]! bg-[#1580FF]! mx-[32rpx]"
      @click="saveScore"
      :disabled="btnFlag < 3"
    >
      保存
    </wd-button>
    <view class="bg-white" :style="`height: ${safeAreaInsets.bottom}px`" hover-class="none"></view>
    <wd-toast />
  </view>
</template>

<script lang="ts" setup>
import useNavbarWeixin from '@/hooks/useNavbarWeixin'
import { useUserStore } from '@/store/user'

import { useRules, requireSubjectList, optionalSubjectList } from '@/hooks/useRules'
import { useToast } from 'wot-design-uni'

const { safeAreaInsets } = useNavbarWeixin()

const toast = useToast()

const userStore = useUserStore()

// 学期
const term = ref(userStore.userInfo.estimatedAchievement.year)
const termList = ref<{ name: string; code: number }[]>(userStore.userInfo.city.lizations)

const navigatorBack = () => {
  uni.navigateBack()
}

// 输入成绩
const score = ref<number | string>(userStore.userInfo.estimatedAchievement.score || '')
const handleChange = (e: any) => {
  const _score = Number(score.value) || 0
  if (_score > userStore.userInfo.city.allscore) {
    score.value = userStore.userInfo.city?.allscore
  }
}

// 单选 必选学科
const requireSubject = ref(userStore.userInfo.estimatedAchievement.requireSubject.code || '')

// 任意选择科目
const optionalSubject = ref(
  userStore.userInfo.estimatedAchievement.optionalSubject.map((item) => item.code),
)

// 判断是否关闭按钮
const btnFlag = computed(() => {
  let num = 0
  if (requireSubject.value !== '') {
    num++
  }
  num = num + optionalSubject.value.length
  return num
})

onBeforeMount(() => {
  useRules()
})

const saveScore = () => {
  if (score.value === '') {
    toast.warning('请检查分数')
    return
  }
  const data = {
    year: term, // 学期
    score: score.value, // 成绩
    optionalSubject: optionalSubjectList.value.filter((item) =>
      optionalSubject.value.includes(item.code),
    ), // 任意选择科目
    requireSubject: requireSubject.value, // 必选科目
    cityCode: userStore.userInfo.city.code, // 城市code
  }

  userStore.setEstimatedAchievement(data)

  uni.showToast({
    title: '保存成功',
    icon: 'none',
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}
</script>

<style lang="scss" scoped>
:deep(.checkbox-item-border) {
  border: 2rpx solid #fff;
  .wd-icon-check-bold {
    display: none;
  }
}
:deep(.wd-checkbox.is-button.is-checked .wd-checkbox__label) {
  background-color: rgba(21, 128, 255, 0.1) !important;
}

:deep(.wd-radio__label) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  line-height: unset !important;
  background-color: #fff !important;
  border-radius: 8rpx !important;
}

:deep(.wd-radio__shape) {
  display: none !important;
}

:deep(.wd-radio.is-button.is-checked .wd-radio__label) {
  background-color: rgba(21, 128, 255, 0.1) !important;
}
</style>
