<template>
    <view class="bg-white rounded-xl p-28 flex justify-between items-center gap-20 relative">
        <view v-if="showIndex" class="absolute left-0 top-10 px-20 py-12 rounded-r-full text-24 font-bold"
              :class="showIndex.clazz">
            {{ showIndex.text }}
        </view>
        <view class="flex-1" :class="{'mt-50': showIndex}">
            <view class="flex justify-between items-center gap-20">
                <ie-image :src="data.universityLogo" mode="aspectFit" custom-class="w-48 h-48"/>
                <view class="text-30 font-bold text-fore-title flex-1">{{ data.universityName }}</view>
                <uv-icon name="more-dot-fill" size="20" @click="$emit('more')"/>
            </view>
            <voluntary-majors-draggable v-model:majors="data.majors" @change="handleSortUpdate" @delete="handleDelete" />
        </view>
    </view>
</template>

<script lang="ts" setup>
import {VoluntaryMajorItem, VoluntaryRecord} from "@/types/voluntary";
import VoluntaryMajorsDraggable from "@/pagesOther/pages/voluntary/list/components/voluntary-majors-draggable.vue";
import {removeVoluntaryByMajor, sortVoluntaryByMajor} from "@/api/modules/voluntary";

const props = defineProps<{
    index: number;
    data: VoluntaryRecord;
}>()
const emits = defineEmits(['more', 'error', 'deleted'])

const indexOptions = [{
    text: '第一志愿',
    clazz: 'bg-warning-light text-warning-dark'
}, {
    text: '第二志愿',
    clazz: 'bg-primary-100 text-primary'
}]
const showIndex = computed(() => indexOptions[props.index])

const handleSortUpdate = () => {
    sortVoluntaryByMajor(props.data.universityId, props.data.majors.map(m => m.majorId))
        .catch((e: any) => emits('error', e))
}

const handleDelete = async (m: VoluntaryMajorItem) => {
    await uni.$ie.showConfirm({title: '删除提醒', content: `确定删除该专业？！`})
    await removeVoluntaryByMajor(m.majorId)
    uni.$ie.showSuccess('删除成功')
    emits('deleted')
}
</script>

<style scoped>

</style>