<template>
  <view class="">
    <wd-radio-group
      v-model="choosePhase"
      cell
      inline
      custom-class="flex flex-wrap gap-[32rpx] justify-items-center"
      checked-color="#1580FF"
    >
      <wd-radio
        v-for="item in phaseList"
        :key="item.code"
        :value="item.code"
        shape="button"
        custom-class="w-[240rpx]! h-[60rpx] p-0! mr-0! radio-item-border"
      >
        {{ item.name }}
      </wd-radio>
    </wd-radio-group>

    <view
      class="px-[24rpx] py-[12rpx] rounded-[8rpx] bg-[rgba(255,96,68,0.1)] flex flex-col gap-[8rpx] text-[#FF6044] text-[22rpx] w-max mx-auto mt-[82rpx]"
    >
      <text class="">普通类一段：批次线442分，线高139分</text>
      <text class="">普通类二段：批次线150分，线高432分</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUniversityLevel } from '@/hooks/useFilterSchool'

defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

const { phaseList } = useUniversityLevel()
const choosePhase = ref('')
</script>

<style lang="scss">
:deep(.radio-item-border) {
  border: 2rpx solid #fff !important;
  .wd-icon-check-bold {
    display: none;
  }

  > .wd-radio__label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 16rpx 96rpx !important;
    line-height: unset !important;
    background-color: #f7f8fa !important;
    border-radius: 8rpx !important;
  }
}

:deep(.wd-radio__shape) {
  display: none !important;
}
</style>
