<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
  needLogin: true,
}
</route>
<template>
  <view class="h-screen overflow-hidden flex flex-col bg-[#F8F8F8]" :bordered="false">
    <Navbar
      title="成绩填写"
      left-arrow
      @click-left="navigatorBack"
      safeAreaInsetTop
      :bordered="false"
    />
    <view class="px-[32rpx] pt-[47rpx] flex flex-col" hover-class="none">
      <text class="text-[24rpx] text-[#636363] text-normal" :selectable="false" :decode="false">
        为了使推荐更准确，请您认真填写
      </text>
      <text
        class="text-[28rpx] text-[#000] text-medium mt-[47rpx]"
        :selectable="false"
        :decode="false"
      >
        预估总分
      </text>
      <view class="mt-[24rpx] rounded-[16rpx] bg-white flex items-center px-[32rpx] py-[24rpx]">
        <input
          v-model="score"
          placeholder="请输入分数"
          @input="handleChange"
          type="number"
          :focus="true"
          class="flex-1"
          confirm-type="done"
          @blur="handleBlurChange"
        />
        <text class="" :selectable="false" :decode="false">分</text>
      </view>

      <view
        class="mt-[24rpx] rounded-[16rpx] bg-white flex items-center px-[32rpx] py-[24rpx] justify-between"
        @click="show = true"
      >
        <view>{{ term }}</view>
        <view class="i-carbon-chevron-down rotate-270"></view>
      </view>
    </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>
      <RadioGroup
        v-model="requireSubject"
        cell
        inline
        class="custom-radio-group"
        checked-color="#1580FF"
      >
        <Radio
          v-for="item in requireSubjectList"
          :key="item.code"
          :name="item.code"
          shape="button"
          class="custom-radio"
        >
          {{ item.name }}
        </Radio>
      </RadioGroup>
    </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>
      <CheckboxGroup v-model="optionalSubject" :max="requireSubjectList.length > 0 ? 2 : 3">
        <Checkbox
          v-for="item in optionalSubjectList"
          :key="item.code"
          :name="item.code"
          class="custom-checkbox"
        >
          {{ item.name }}
        </Checkbox>
      </CheckboxGroup>
    </view>
    <button
      block
      :class="`mt-auto mb-[32rpx] rounded-[8rpx] mx-[32rpx] text-[32rpx] text-[#fff]! font-normal ${btnFlag < 3 ? 'bg-[#BFBFBF]!' : 'bg-[#1580FF]!'}`"
      @click="saveScore"
      :disabled="btnFlag < 3"
    >
      保存
    </button>
    <view class="pb-safe" hover-class="none"></view>

    <ActionSheet v-model:show="show" title="">
      <view class="px-[32rpx]">
        <CustomPickerView
          :list="termList"
          v-model:modelValue="term"
          value-key="code"
          label-key="name"
        />
      </view>
      <view class="flex items-center justify-between px-[32rpx] gap-[20rpx]">
        <view class="cancel-btn" @click="show = false">取消</view>
        <view class="submit-btn" @click="handleConfirm">确认</view>
      </view>
    </ActionSheet>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import CheckboxGroup from '@/pages-sub/components/check-group/CheckboxGroup.vue'
import Checkbox from '@/pages-sub/components/check-group/Checkbox.vue'
import RadioGroup from '@/pages-sub/components/radio-group/RadioGroup.vue'
import Radio from '@/pages-sub/components/radio-group/Radio.vue'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

import {
  useRules,
  requireSubjectList,
  optionalSubjectList,
} from '@/pages-sub/home/inputScore/useRules'

import { savePerfectInfo } from '@/service/index/api'

const userStore = useUserStore()

const show = ref(false)

const handleConfirm = () => {
  show.value = false
}

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

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

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

const handleBlurChange = () => {
  let _score = Number(score.value) || 0
  if (_score < 150) {
    score.value = 150
  }
}

// 单选 必选学科
const requireSubject = ref<number | string>('')

// 任意选择科目
const optionalSubject = ref<any[]>([])

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

onShow(() => {
  userStore.$subscribe(() => {
    const _requireSubject = userStore.userInfo.estimatedAchievement.requireSubject
    requireSubject.value = _requireSubject.length > 0 ? _requireSubject[0].code : ''
    optionalSubject.value = userStore.userInfo.estimatedAchievement.optionalSubject.map(
      (item) => item.code,
    )
  })
  useRules()
})

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

  const subjects = data.optionalSubject
    .map((item) => item.simplename)
    .concat(data.requireSubject.length > 0 ? data.requireSubject[0].simplename : [])
    .join(',')

  userStore.setEstimatedAchievement({
    ...data,
    subjectGroup: subjects,
    provinceName: userStore.userInfo.city.provincename,
    provinceCode: userStore.userInfo.city.code,
  })

  savePerfectInfo({
    year: term.value,
    score: Number(score.value),
    subjectGroup: subjects,
    provinceCode: userStore.userInfo.city.code,
    provinceName: userStore.userInfo.city.provincename,
  }).then((res) => {
    if (res.code === 200) {
      uni.showToast({
        title: '保存成功',
        icon: 'none',
      })
      setTimeout(() => {
        uni.navigateBack({
          fail: () => {
            // 如果无法返回，说明可能已在首页
            uni.switchTab({
              url: '/pages/home/index/index',
            })
          },
        })
      }, 500)
    }
  })
}
</script>

<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';

:deep(.custom-checkbox) {
  .checkbox {
    width: 152rpx;
    height: 76rpx;
    background-color: #fff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #fff;
  }
  .checkbox__icon {
    display: none;
  }
}

:deep(.checkbox-active) {
  background-color: rgba(21, 128, 255, 0.1) !important;
  border-color: #1580ff !important;
  .checkbox__label,
  .radio__label {
    color: #1580ff !important;
  }
}

:deep(.custom-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
  justify-items: center;
  background-color: #f8f8f8;
}

:deep(.custom-radio) {
  width: 152rpx;
  height: 76rpx;
  background-color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #fff;

  .radio__icon {
    display: none;
  }

  .radio-active {
    background-color: rgba(21, 128, 255, 0.1) !important;
    border-color: #1580ff !important;
    border: 2rpx solid #1580ff;
    border-radius: 8rpx;
  }
}
</style>
