<template>
    <global-page :padding="24" title="工作任务指令详情">
        <template v-if="details">
            <view class="details">
                <view class="details-header">
                    <view class="details-header-top">
                        <view class="left">
                            <custom-state :value="useGetDictByValue('wa_state', details.state)" :size="32"></custom-state>
                        </view>
                        <view class="right">
                            <global-tag :type="useGetDictByValue('wa_isSuccessType', details.isSuccess)">
                                {{ useGetDictByValue('wa_isSuccess', details.isSuccess) }}
                            </global-tag>
                        </view>
                    </view>
                    <view class="details-header-bottom">
                        <view class="left">
                            <global-icon class="left-icon" icon="Vector" size="24" color="#DD4012"></global-icon>
                            <view class="txt">{{ details.aviation }} {{ details.machineNumber }} {{ details.model }}</view>
                        </view>
                        <view class="right">
                            <view class="txt">{{ details.terminal }}</view>
                        </view>
                    </view>
                </view>
                <view class="details-body">
                    <view class="details-body-content">
                        {{ details.taskDescription || '无' }}
                    </view>
                    <view class="details-body-file">
                        <global-upload :fileList="details.taskFile" :showUpload="false"></global-upload>
                    </view>
                </view>
                <view class="details-footer">
                    <view class="row">
                        <global-field label="反馈时限:" :value="timeStampFormat(details.feedbackTime, { format: 'YYYY/MM/DD' })"></global-field>
                    </view>
                    <view class="row">
                        <global-field label="发起人:" :value="details.sponsor || '-'"></global-field>
                        <global-field label="发起时间:" :value="timeStampFormat(details.creationTime, { format: 'YYYY/MM/DD' })"></global-field>
                    </view>
                    <view class="row">
                        <global-field label="接收人:" :value="details.recipient || '-'"></global-field>
                        <global-field label="接收时间:" :value="timeStampFormat(details.recipientTime, { format: 'YYYY/MM/DD' })"></global-field>
                    </view>
                </view>
            </view>
        </template>
        <template #bottom>
            <view class="footer-btn">
                <template
                    v-if="
                        details.sponsorId == userStore.userInfo?.realUserInfo.id ||
                        details.recipientId == userStore.userInfo?.realUserInfo.id ||
                        details.isSuccess != '2'
                    "
                >
                    <global-button type="success" plain size="large" :radius="5" icon="check-circle-filled" v-if="details.isSuccess == '3'">
                        已接收
                    </global-button>
                    <global-button type="danger" plain size="large" :radius="5" icon="close-circle-filled" v-if="details.isSuccess == '1'">
                        已拒绝
                    </global-button>
                </template>
                <template v-else>
                    <up-row gutter="10">
                        <up-col span="6">
                            <global-button type="primary" plain size="large" :radius="5" @tap="confirm('1')">拒绝</global-button>
                        </up-col>
                        <up-col span="6">
                            <global-button type="primary" size="large" :radius="5" @tap="confirm('3')">接收</global-button>
                        </up-col>
                    </up-row>
                </template>
            </view>
        </template>
        <up-modal
            :width="250"
            :content="isSuccessValue == '1' ? '确认拒绝吗?' : '确认接收吗?'"
            :show="show"
            showCancelButton
            closeOnClickOverlay
            @confirm="handleWorkTaskIsSuccess"
            @cancel="show = false"
            @close="show = false"
        ></up-modal>
    </global-page>
</template>

<script setup>
import useWorkAssignmentStore from 'mocp/store/work-assignment'
import { storeToRefs } from 'pinia'
import useUserStore from 'mocp/store/user'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { ref } from 'vue'
import { WorkTaskIsSuccessApi } from 'mocp/api/work-assignment'

const workAssignmentStore = useWorkAssignmentStore()
const { details } = storeToRefs(workAssignmentStore)
const userStore = useUserStore()
//接收或者拒绝
const show = ref(false)
const isSuccessValue = ref('')
const confirm = (isSuccess) => {
    show.value = true
    isSuccessValue.value = isSuccess
}
const handleWorkTaskIsSuccess = async () => {
    const params = {
        id: details.value.id,
        isSuccess: isSuccessValue.value
    }
    const res = await WorkTaskIsSuccessApi(params, { loading: true })
    if ((res.code = 200)) {
        show.value = false
        uni.$mocpMessage.success(res.message)
        //更新详情
        workAssignmentStore.setState('details', res.data)
    } else {
        uni.$mocpMessage.error(res.message)
    }
}
</script>
<style lang="scss" scoped>
@import './constants/details.scss';
.footer-btn {
    padding: 24rpx 32rpx;
    background-color: #fff;
}
</style>
