dz-app/pages/voluntary/index/components/major-popup.vue

<template>
    <uv-popup ref="popup" mode="bottom" closeable round="16" @change="handleChange">
        <view class="h-[50px] fx-row fx-cen-cen text-lg text-main font-bold">
            {{ group.university.name }}
        </view>
        <scroll-view scroll-y class="bg-bg" style="height: 50vh" lower-threshold="100"
                     @scrolltolower="handleMajorScroll">
            <view class="p-30">
                <view v-for="item in pagedMajors" class="fx-col">
                    <view class="fx-row fx-bet-cen">
                        <view class="flex-1 fx-row items-center">
                            <text :class="{'highlight-major': isSearchingMajorFired(item)}">
                                {{ item.marjorName }}
                            </text>
                            ({{ item.marjorBelongs }})
                            <text v-if="item.level" class="text-error">({{ item.level }})</text>
                            <uv-tags v-if="item.enrollFluctuate" text="大小年" size="tiny" type="error"
                                     class="ml-5" @click="$emit('notify', '近两年录取分差较大')"/>
                        </view>
                        <uv-tags v-if="!readonly" :plain="!item.selected" :text="item.selected?'已填':'填报'"
                                 shape="circle" @click="handleApply(item)"/>
                    </view>
                    <view v-if="item.professionType||item.typeNames" class="mb-10 text-xs text-primary font-light">
                        {{ item.professionType }}
                        {{ item.typeNames }}
                    </view>
                    <view class="fx-row fx-sta-cen text-2xs mb-10">
                        <text class="text-content mr-10">录取概率</text>
                        <text class="text-sm font-bold">{{ item.enrollRatio || '-' }}</text>
                        %
                        <text class="text-content ml-10" :class="[getPickTypeColor(item.pickType)]">
                            {{ item.enrollRatioText }}
                        </text>
                    </view>
                    <view class="text-2xs">
                        <view class="mb-5 text-main font-bold">
                            {{
                                `代码 ${item.marjorBelongs} ${headerPlanYear}计划 ${item.planCount}人 ${formatXueZhi(item.xuezhi)} ￥${item.xuefei || '-'}`
                            }}
                        </view>
                        <view class="mb-5 text-content">
                            {{ item.marjorDirection }}
                        </view>
                        <voluntary-history-list :container="item" @notify="$emit('notify', $event)"/>
                    </view>
                    <uv-divider/>
                </view>
            </view>
        </scroll-view>
    </uv-popup>
</template>

<script setup>
import {ref, computed} from 'vue';
import MxConst from "@/common/MxConst";
import {createPropDefine} from "@/utils";
import {toValue} from "@vueuse/core";
import VoluntaryHistoryList from "@/pages/voluntary/index/components/voluntary-history-list.vue";
import {useInjectVoluntaryHeader} from "@/pages/voluntary/hooks/useVoluntaryHeaderInjection";
import {useInjectVoluntaryMajorHighlight} from "@/pages/voluntary/hooks/useVoluntaryMajorHighlightInjection";
import {useInjectVoluntaryAssistant} from "@/pages/voluntary/hooks/useVoluntaryAssistantInjection";
import {useInjectVoluntaryCart} from "@/pages/voluntary/hooks/useVoluntaryCartInjection";

const props = defineProps({
    readonly: createPropDefine(false, Boolean)
})
const emits = defineEmits(['notify'])
const popup = ref(null)
const show = ref(false)
const group = ref({})
const localPageNum = ref(1)
const localPageSize = ref(4)

const {headerPlanYear} = useInjectVoluntaryHeader()
const {toggleMajorSelected} = useInjectVoluntaryCart()
const {isSearchingMajorFired, snapshotSearchingMajorWhenApply} = useInjectVoluntaryMajorHighlight()
const {voluntaryDataCalculate} = useInjectVoluntaryAssistant(props.readonly)

// 已填
// const selectedCount = computed(() => {
//     if (empty(group.value.majors)) return 0
//     return _.countBy(group.value.majors, m => m.selected)[true]
// })
const pagedMajors = computed(() => {
    return group.value.majors?.slice(0, toValue(localPageNum) * toValue(localPageSize)) || []
})

const handleMajorScroll = () => {
    if (toValue(pagedMajors).length >= toValue(group).majors.length) return
    localPageNum.value += 1
}

const formatXueZhi = (val) => {
    if (!val) return val
    return val.endsWith('年') ? val : val + '年'
}

const getPickTypeColor = (pickType) => {
    return MxConst.enum.simulatePickTypes.find(t => t.value == pickType)?.color || ''
}

const handleApply = async (major) => {
    const majorGroup = group.value
    const voluntaryOptions = toValue(voluntaryDataCalculate)
    await toggleMajorSelected(major, majorGroup, voluntaryOptions)
    snapshotSearchingMajorWhenApply(major) // snapshot when toggle succeed.
}

const open = (item) => {
    localPageNum.value = 1
    group.value = item
    popup.value.open()
}
const close = () => {
    popup.value.close()
}

const handleChange = (e) => show.value = e.show

defineExpose({open, close, show})
</script>

<style scoped lang="scss">
::v-deep(.uv-tags) {
    .uv-tags__text--medium {
        font-size: 12px !important;
    }
}
</style>