<template>
  <div
    class="bg-[#E2EDF9] text-[#1580FF] text-[22rpx] flex justify-between items-center px-[32rpx] py-[10rpx]"
  >
    <div class="flex gap-[16rpx]">
      <span>{{ score }}分</span>
      <span>
        {{ subjectGroup.split(',').join('/') }}
      </span>
      <span>{{ batchName }}</span>
    </div>


    <div class="flex items-center gap-[26rpx] text-[22rpx] text-[#000]">
      <div v-for="(model) in tModels" :key="model.type" class="flex items-center gap-[6rpx]">
        <div
          class="w-[16rpx] h-[16rpx] rounded-full"
          :style="{ backgroundColor: calcTypeName(model.type).roundedBgColor }"
        ></div>
        <span class="text-[22rpx]">{{ calcTypeName(model.type)?.text }}({{ model.count }})</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {calcTypeName, countModel} from "@/composables/useSortCollege"

const props = defineProps({
  subjectGroup:{
    type:String,
    default: ""
  },
  batchName:{
    type:String,
    default:''
  },
  score:{
    type:[Number,String],
    default:0
  },
  wishList:{
    type:Array,
    default:() => []
  }
})

const userWhishList = ref([])
const tModels = ref([])

watch(() => props.wishList, (newVal) => {  
  userWhishList.value = newVal
  const {tModel} = countModel(userWhishList.value)
  tModels.value = tModel  
})


</script>

<style lang="scss" scoped>
.t-model-base {
  font-weight: 400;
  font-size: 22rpx;
  color: #000000;
}
</style>
