<template>
  <view
    v-for="major in college.items"
    :key="major.planId"
    class="pt-[32rpx] px-[32rpx] pb-[30rpx] custom-background flex gap-[48rpx]"
    :style="`--background-color:${calcTypeName(major.type).style.backgroundColor}`"
  >
    <view class="flex flex-col gap-[16rpx]">
      <view
        class="w-[52rpx] h-[52rpx] rounded-[8rpx] font-semibold text-[28rpx] flex items-center justify-center"
        :style="calcTypeName(major.type).style"
      >
        {{ calcTypeName(major.type).text }}
      </view>
      <text class="text-[32rpx] font-semibold text-[#000]">{{ major.percentAge || '0%' }}</text>
    </view>
    <view class="flex flex-col gap-[16rpx] flex-1">
      <view class="flex justify-between flex-auto">
        <view class="flex flex-col flex-1">
          <view class="flex items-center justify-start">
            <text class="text-[32rpx] text-[#000] font-semibold truncate max-w-[400rpx]">
              {{ major.major.replace(/(\r\n|\n|\r)/g, '') }}
            </text>
            <view
              v-if="major.majorGroup"
              class="bg-[#E2EDF9] rounded-[4rpx] flex items-center justify-center px-[6rpx] py-[4rpx] text-[20rpx] text-[#1580FF] ml-[16rpx]"
            >
              专业组{{ major.majorGroup }}
            </view>
          </view>
          <text class="text-[22rpx] text-[#1F2329] mt-[14rpx] line-clamp-2">
            {{ major.remark }}
          </text>
          <view class="flex justify-between text-[22rpx] text-[#1F2329] mt-[14rpx]">
            <view class="flex flex-col gap-[6rpx]">
              <text>代码{{ major.majorCode }}</text>
              <text>{{ college.year }}计划{{ major.planCount }}人</text>
            </view>
            <view class="flex flex-col gap-[6rpx]">
              <text>选科:{{ major.subjectClam }}</text>
              <text>学费/学制:{{ major.fee }}/{{ major.academic }}</text>
            </view>
          </view>
        </view>

        <view
          :class="`w-[104rpx] min-w-[104rpx] h-[52rpx] rounded-[8rpx] text-[24rpx] custom-btn ${checkActive(major) ? 'active-btn' : ''}`"
          @click.stop="handleClick(major)"
        >
          {{ checkActive(major) ? '已填报' : '填报' }}
        </view>
      </view>
      <DataTable
        :data="major.items"
        :score="college.lowScore"
        :lowscoreRank="college.lowscoreRank"
      />
    </view>
  </view>
</template>

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

const userStore = useUserStore()

const props = defineProps<{
  college: any
  score?: number
}>()

const handleClick = (major: any) => {
  let exitMajorUnList = userStore.userInfo.wishList.find((item) => item.uId === props.college.uId)
  let exitMajor = exitMajorUnList?.vItems.find((item) => item.planId === major.planId)
  if (exitMajor) {
    userStore.deleteWishListMajor({ uId: props.college.uId, planId: major.planId })
  } else if (exitMajorUnList) {
    userStore.setWishListMajor({
      val: {
        ...major,
      },
      uId: props.college.uId,
    })
  } else {
    let _major = {
      ...props.college,
      vItems: [
        {
          ...major,
          sort: 1,
        },
      ],
    }
    delete _major.items
    userStore.setWishListMajorWithUn(_major)
  }
}

const checkActive = (major: unknown) => {
  const _major = major as { planId: string }
  return userStore.userInfo.wishList.find((item) => {
    if (item.uId !== props.college.uId) {
      return false
    } else if (item.vItems.find((vItem) => vItem.planId === _major.planId)) {
      return true
    }
  })
}
</script>

<style lang="scss" scoped>
.custom-background {
  background: linear-gradient(180deg, var(--background-color) 0%, #fff 60%, #fff 100%);
}

.custom-btn {
  border: 2rpx solid #1580ff;
  color: #1580ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-btn {
  background-color: #1580ff;
  color: #fff;
}
</style>
