<template>
  <view class="bg-white rounded-10 py-24 pl-30 pr-20 relative flex items-center gap-x-16 mb-20"
    :class="{ 'border border-solid border-primary': active }">
    <view class="flex-1 min-w-1 flex items-center gap-x-20">
      <ie-image :src="data.universityLogo" custom-class="w-96 h-96" mode="aspectFill" />
      <view class="flex-1 min-w-1">
        <view class="text-28 text-fore-title font-bold">{{ data.universityName }}</view>
        <view class="mt-8 w-fit text-20 text-primary border border-solid border-primary rounded-4 px-10 py-4">
          {{ data.majorName }}
        </view>
        <view class="mt-8 text-20 text-fore-light">{{ data.majorAncestors }}</view>
      </view>
      <view class="w-fit flex flex-col items-end">
        <view class="mb-30" @click="handleDelete">
          <uv-icon name="trash" color="#bbb" size="24" />
        </view>
        <view v-if="active"
          class="w-120 flex items-center justify-between gap-x-4 text-white bg-primary rounded-full px-8 py-4 box-border">
          <ie-image src="/pagesStudy/static/image/icon-check-white.png" custom-class="w-24 h-24" />
          <text class="text-24">学习中</text>
        </view>
        <view v-else
          class="w-120 flex items-center justify-between gap-x-10 text-primary bg-[#EEF8FD] rounded-full px-8 py-4 border border-solid border-primary box-border"
          @click="handleSetDirectedSchool">
          <ie-image src="/pagesStudy/static/image/icon-switch.png" custom-class="w-28 h-28" mode="aspectFill" />
          <text class="text-24">切换</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { DirectedSchool } from '@/types/study';

const props = defineProps<{
  data: DirectedSchool;
  active: boolean;
}>();
const emit = defineEmits<{
  (e: 'choose', data: DirectedSchool): void;
  (e: 'delete', data: DirectedSchool): void;
}>();
const handleDelete = () => {
  emit('delete', props.data);
}
const handleSetDirectedSchool = () => {
  emit('choose', props.data);
}
</script>
<style lang="scss" scoped></style>