<template>
    <global-page
        title="非计划预警详情"
        :showFooterBtn="showFooterBtn"
        :footerBtnText="isCreateUser ? '撤销' : '审核'"
        @handleFooterClick="handleFooterClick"
    >
        <view class="mocp-cell">
            <up-cell-group v-if="details">
                <up-cell title="审核状态">
                    <template #value>
                        <global-text-status :value="details.applyStatus" dictkey="unPlan_applyStatus"></global-text-status>
                    </template>
                </up-cell>
                <up-cell title="数据来源" :value="useGetDictByValue('np_sourceType', details.sourceType)"></up-cell>
                <up-cell title="工作包编号" :value="details.packageNo || '-'"></up-cell>
                <up-cell title="工作包名称" :value="details.packageName || '-'"></up-cell>
                <up-cell title="计划开始时间" :value="timeStampFormat(details.startTime) || '-'"></up-cell>
                <up-cell title="计划结束时间" :value="timeStampFormat(details.endTime) || '-'"></up-cell>
                <up-cell title="申请原因">
                    <template #label>
                        {{ getParamNameByValue('WarningReason', details.warningReason, { isArray: true }) || '-' }}
                    </template>
                </up-cell>
                <up-cell title="缺件航材">
                    <template #label>
                        <template v-if="details.materialPns && details.materialDelay == '1'">
                            <view v-for="(item, index) in details.materialPns.split(',')" :key="index">{{ item }}</view>
                        </template>
                        <view v-else>无</view>
                    </template>
                </up-cell>
                <up-cell title="具体原因">
                    <template #label>{{ details.reason || '-' }}</template>
                </up-cell>
                <up-cell title="申请人" :value="details.createUserName || '-'"></up-cell>
                <up-cell title="申请时间" :value="timeStampFormat(details.createTime) || '-'"></up-cell>
                <template v-if="['1', '2'].includes(details.applyStatus)">
                    <up-cell title="审核人" :value="details.approverName || '-'"></up-cell>
                    <up-cell title="审核时间" :value="timeStampFormat(details.updateTime) || '-'"></up-cell>
                    <up-cell title="审核说明">
                        <template #label>{{ details.examineReason || '-' }}</template>
                    </up-cell>
                </template>
                <view class="mocp-form" v-if="isApprover && details.applyStatus == '0'">
                    <up-form labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" ref="formRef">
                        <up-form-item label="审核说明" prop="examineReason" :borderBottom="true" required>
                            <up-input v-model="formData.examineReason" border="none" inputAlign="right" placeholder="请输入" clearable></up-input>
                        </up-form-item>
                    </up-form>
                </view>
            </up-cell-group>
        </view>
        <global-action-sheet
            v-model="showAction"
            title="审核"
            description="审核本条非计划预警"
            :options="[
                { label: '审核驳回', value: '2' },
                { label: '审核通过', value: '1' }
            ]"
            @select="(value) => handleSelect(value, details.id)"
        ></global-action-sheet>
        <up-modal
            :width="250"
            content="确认撤销审核吗？"
            :show="showConfirm"
            showCancelButton
            closeOnClickOverlay
            @confirm="handleSelect('3', details.id)"
            @cancel="showConfirm = false"
            @close="showConfirm = false"
        ></up-modal>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { getParamNameByValue } from 'mocp/hooks/use-params/useParams'
import useUnplanWarningStore from 'mocp/store/unplanWarning'
import { onLoad } from '@dcloudio/uni-app'
import { timeStampFormat } from 'mocp/utils/tool'
import { handleSelect } from './constants/details.functionals'
import { formData, rules, formRef, showAction, showConfirm } from './constants/details.compositions'
import { computed } from 'vue'
import useUserStore from 'mocp/store/user'

const query = defineProps(['id'])
const unplanWarningStore = useUnplanWarningStore()
const { details } = storeToRefs(unplanWarningStore)
const userStore = useUserStore()
const isCreateUser = computed(() => {
    return userStore.userInfo.id == details.value?.createUser
})
const isApprover = computed(() => {
    return userStore.userInfo.id == details.value?.approver
})
const showFooterBtn = computed(() => {
    return details.value?.applyStatus == '0' && (isCreateUser.value || isApprover.value)
})
onLoad(() => {
    showConfirm.value = false
    unplanWarningStore.setState('id', query.id)
    unplanWarningStore.getDetails()
    formData.examineReason = ''
})
const handleFooterClick = () => {
    if (isCreateUser.value) {
        showConfirm.value = true
    } else {
        showAction.value = true
    }
}
</script>
<style lang="scss" scoped>
.mocp-cell {
    background: #fff;
}
.mocp-form {
    background: #fff;
    padding: 0 32rpx;
}
</style>
