<template>
  <view class="h-full overflow-auto">
    <view class="flex items-center justify-between bg-white p-30 text-26 text-fore-light">
      <view>
        <view>{{ data.bigName }}</view>
        <view>➣ {{ data.middleName }}</view>
        <view>➣➣ {{ data.name }}</view>
      </view>
      <view class="flex flex-col items-center justify-center" @click="handleCollect">
        <uv-icon :name="data.isCollect ? 'heart-fill' : 'heart'" size="22" color="var(--primary-color)"></uv-icon>
        <text class="text-primary text-24">{{ data.isCollect ? '已收藏' : '收藏' }}</text>
      </view>
    </view>
    <view class="mt-20 p-30 bg-white flex flex-col gap-30">
      <view v-for="card in cards" :key="card.prop">
        <view class="title">{{ card.title }}</view>
        <view class="p-30 text-28 text-fore-content bg-back rounded-12 mt-10 whitespace-pre-line">
          {{ data[card.prop as keyof Major.MajorOverview] }}
        </view>
      </view>
    </view>
    <ie-safe-area-bottom bg-color="#FFFFFF" />
  </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/userStore';
import { collectMajor, cancelCollectMajor } from '@/api/modules/major';
import { Major } from '@/types';
const userStore = useUserStore();

const props = defineProps<{
  data: Major.MajorOverview;
}>();
const cards = ref([
  {
    title: '核心课程',
    prop: 'mainCourse'
  },
  {
    title: '就业方向',
    prop: 'jobDirection'
  },
  {
    title: '职业能力',
    prop: 'loreAndAbility'
  },
  {
    title: '资格证书',
    prop: 'qualification'
  },
  {
    title: '衔接中职专业',
    prop: 'zhongzhiMajors'
  },
  {
    title: '衔接本科专业',
    prop: 'benMajors'
  },
]);
const handleCollect = async () => {
  const isLogin = await userStore.checkLogin();
  if (!isLogin) {
    return;
  }
  if (props.data.isCollect) {
    cancelCollectMajor(props.data.code).then(res => {
      props.data.isCollect = false;
      uni.$ie.showToast('取消收藏成功');
    }).catch(() => {
      uni.$ie.showToast('取消收藏失败');
    });
  } else {
    collectMajor(props.data.code).then(res => {
      props.data.isCollect = true;
      uni.$ie.showToast('收藏成功');
    }).catch(() => {
      uni.$ie.showToast('收藏失败');
    });
  }
};
</script>
<style lang="scss" scoped>
.title {
  @apply text-30 text-fore-title font-bold relative pl-20;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    border-radius: 2px;
    background-color: var(--primary-color);
  }
}
</style>