<template>
  <view class="h-[16rpx] bg-[#F5F5F5]"></view>
  <view class="flex items-start p-[32rpx]">
    <view class="flex flex-col items-center gap-[16rpx]">
      <image :src="college.logo" mode="scaleToFill" class="w-[112rpx] h-[112rpx]" />
      <view
        class="w-[52rpx] h-[52rpx] rounded-[8rpx] font-semibold text-[28rpx] flex items-center justify-center"
        :style="calcTypeName(college.type).style"
      >
        {{ calcTypeName(college.type).text }}
      </view>
      <text class="text-[32rpx] font-semibold">
        {{
          Math.round(
            college.items.reduce((a, b) => a + Number(b.percentAge.replace('%', '')), 0) /
              college.items.length,
          )
        }}%
      </text>
    </view>
    <view class="flex flex-col ml-[24rpx] justify-between flex-1">
      <view class="flex justify-between mb-[14rpx]">
        <view class="flex justify-between flex-col gap-[6rpx]">
          <text class="text-[32rpx] font-semibold">{{ college.unName }}</text>
          <text class="text-[22rpx] text-[#505050]">
            {{ college.city }}·{{ college.educationCategory }}
          </text>
          <view class="text-[22rpx] text-[#8F959E] flex items-center">
            <text class="truncate max-w-[300rpx]" v-show="college.features.length > 0">
              {{ college.features.slice(0, 3).join('/') }}/
            </text>
            <text>排名{{ college.rank }}</text>
          </view>
          <view class="text-[22rpx] text-[#1F2329] mt-[8rpx] flex gap-[10rpx]">
            <text class="">代码{{ college.collegeCode }}</text>
            <text>
              {{ college.year }}计划{{ college.items.reduce((a, b) => a + b.planCount, 0) }}人
            </text>
          </view>
        </view>

        <view class="flex flex-col gap-[8rpx] items-center whitespace-nowrap">
          <view
            class="text-[24rpx] px-[16rpx] py-[12rpx] rounded-[8rpx] border-[2rpx] border-[#1580FF] border-solid whitespace-nowrap flex items-center text-[#1580FF]"
            @click.stop="handleShow"
          >
            <view class="i-carbon-add-large"></view>
            <view>专业{{ college.items.length }}</view>
          </view>
          <text class="text-[20rpx] text-[#8F959E]" v-if="collegeMajorCount > 0">
            已填 {{ collegeMajorCount }}
          </text>
        </view>
      </view>

      <DataTable :data="college.childItems" v-bind="$attrs" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import DataTable from './DataTable.vue'
import { useUserStore } from '@/store/user'

import { calcTypeName } from '../composable/useWishesList'

const userStore = useUserStore()

const props = defineProps({
  college: Object,
})

const emit = defineEmits(['showAction'])
const handleShow = () => {
  emit('showAction', props.college)
}

const collegeMajorCount = computed(() => {
  return (
    userStore.userInfo.wishList.find((item) => item.uId === props.college.uId)?.vItems.length || 0
  )
})
</script>

<style lang="scss" scoped></style>
