<template>
  <view class="">
    <RadioGroup
      v-model="choosePhase"
      class="custom-radio-group"
      @change="handleChange"
      v-bind="$attrs"
    >
      <Radio v-for="item in phaseList" :key="item.batch" :name="item.batch" class="custom-radio">
        {{ item.batch }}
      </Radio>
    </RadioGroup>

    <view
      class="px-[24rpx] py-[12rpx] rounded-[8rpx] bg-[rgba(255,96,68,0.1)] flex flex-col gap-[8rpx] text-[#FF6044] text-[24rpx] w-max mt-[82rpx]"
    >
      <text class="" v-for="item in phaseList" :key="item.batch">
        {{ item.batch }}：批次线{{ item.score }}分，线高{{ item.pressureScore }}分
      </text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getBatchDynamicData } from '@/service/index/api'
import RadioGroup from '@/pages-sub/components/radio-group/RadioGroup.vue'
import Radio from '@/pages-sub/components/radio-group/Radio.vue'
import { useUserStore } from '@/store/user'
import { useRules } from '@/pages-sub/home/inputScore/useRules'

const userStore = useUserStore()

const phaseList = ref<any[]>([])

const choosePhase = ref('')

const emits = defineEmits(['changeName', 'change'])

const fetchBatchData = () => {
  let _provinceCode = userStore.userInfo.estimatedAchievement.provinceCode
  let _requireSubject = userStore.userInfo.estimatedAchievement.requireSubject
  getBatchDynamicData({
    LocationCode: _provinceCode,
    Course: _requireSubject.length > 0 ? _requireSubject[0].name : '',
  }).then((res) => {
    if (res.code === 200) {
      phaseList.value = (res.result as { batches: any[] }).batches
      choosePhase.value = userStore.userInfo.batchName
      handleChange(choosePhase.value)
    }
  })
}

onLoad(() => {
  useRules(fetchBatchData)
})

const handleChange = (val: string) => {
  const phase = phaseList.value.find((item) => item.batch === val)
  choosePhase.value = val
  emits('changeName', val)
  emits('change', phase)
}
</script>

<style lang="scss">
:deep(.custom-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
  background-color: #fff;
  justify-content: center;
}

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

  .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>
