<template>
  <div>
    <div class="h-[16rpx] bg-[#f8f8f8]"></div>
    <div
      class="flex flex-col items-center gap-[16rpx] custom-background px-[32rpx] no-copy"
      :style="`--background-color:${calcTypeName(college.type).style.backgroundColor}`"
      @copy.prevent
      @contextmenu.prevent>
      <div class="flex py-[32rpx] gap-[30rpx] w-full">
        <div class="flex flex-col items-center gap-[16rpx]">
          <div class="flex items-center gap-[8rpx] text-[#303030] text-[28rpx]"  @click="toggleCollapse">
            {{ collegeIndex + 1 }}
            <div class="i-carbon-chevron-down text-[16rpx] transition-transform duration-300" :class="{ 'rotate-180': isCollapsed }"></div>
          </div>
          <div 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 }}
          </div>
          <span class="text-[32rpx] font-semibold">
            {{ Math.round(college.vItems.reduce((a: number, b: any) => a + Number(b.percentAge.replace("%", "")), 0) / college.vItems.length) }}%
          </span>
        </div>
        <div class="flex flex-col justify-between flex-1">
          <div class="flex justify-between mb-[14rpx]">
            <div class="flex justify-between flex-col gap-[6rpx]">
              <span class="text-[32rpx] font-semibold">{{ college.unName }}</span>
              <span class="text-[22rpx] text-[#505050]">{{ college.ownership }}·{{ college.educationCategory }}</span>
              <div class="text-[22rpx] text-[#8F959E] flex items-center">
                <span class="truncate max-w-[450rpx]" v-show="college.features.length > 0">{{ college.features.slice(0, 3).join("/") }}/</span>
                <span>排名{{ college.rank }}</span>
              </div>
              <div class="text-[22rpx] text-[#1F2329] mt-[8rpx] flex gap-[10rpx] gap-[36rpx]">
                <span class="">代码{{ college.unCode }}</span>
                <span>{{ college.year }}计划{{ college.vItems.reduce((a: number, b: any) => a + b.planCount, 0) }}人</span>
                <span>{{ college.subjectType }}</span>
              </div>
            </div>
            <div class="flex gap-[40rpx] text-[#666]">
              <div class="i-carbon-move handle"></div>
              <div class="i-carbon-trash-can" @click="handleDelete"></div>
            </div>
          </div>

          <DataTable :data="college.childItems" :score="score" />
        </div>
      </div>
      <div class="h-[2rpx] bg-[#EDEDED] w-full"></div>
      <div class="transition-all duration-300 w-full" :style="{ height: isCollapsed ? 'max-content' : '0' }" v-if="isCollapsed">
        <virtual-list v-model="college.vItems" data-key="sort" lock-axis="x" handle=".handle-major" chosen-class="choose-item">
          <template v-slot:item="{ record, index }">
            <MajorItem :collegeIndex="collegeIndex" :major="record" :major-index="index" :score="score" :year="2024" v-bind="$attrs" />
          </template>
        </virtual-list>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { calcTypeName } from "@/composables/useSortCollege";
  import VirtualList from "vue-virtual-draglist";
  import MajorItem from "./MajorItem.vue";
  import DataTable from "./DataTable.vue";

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

  const emit = defineEmits(["toggleCollapse", "updateHeight", "move", "delete", "deleteMajor"]);

  const isCollapsed = ref(false);
  const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value;
  };

  const { removeCollege } = inject<{ removeCollege: (collegeIndex: any) => void }>("sort")!;

  const handleDelete = () => {
    removeCollege(props.collegeIndex);
  };
</script>

<style lang="scss" scoped>
  .custom-background {
    background: linear-gradient(180deg, var(--background-color) 0%, #fff 30%, #fff 100%);
    box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(225,225,225,0.2);
  }

  // 添加过渡效果
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .no-copy {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  .choose-item :deep(.handle-major) {
    color: #1580ff;
  }
</style>
