<template>
    <global-page
        title="海技值班详情"
        showNavRight
        :showNavRight="checkPermi('/dutyLog/edit')"
        navRightType="button"
        @handleRightClick="navigateTo('/panel/dutyLog/edit')"
    >
        <template v-if="details">
            <view class="mocp-title">
                <view class="mocp-color-text-5 time">{{ timeStampFormat(details.dutyDate, { format: 'YYYY/MM/DD dddd' }) }}</view>
                <global-tag :type="useGetDictByValue('dl_statusColor', details.status)">
                    {{ useGetDictByValue('dl_status', details.status) }}
                </global-tag>
            </view>
            <view class="mocp-cell">
                <up-cell-group>
                    <up-cell title="值班经理" :value="details.dutyManagerUname + details.dutyManagerPhone || '-'"></up-cell>
                    <up-cell title="监察领导" :value="details.monitorLeaderUname + details.monitorLeaderPhone || '-'"></up-cell>
                    <up-cell title="接班经理" :value="details.successorManagerUname + details.successorManagerPhone || '-'"></up-cell>
                </up-cell-group>
            </view>
            <view class="mocp-cell">
                <up-cell-group>
                    <up-cell title="汇报工作">
                        <template #label>
                            <text>{{ details.reportWork || '-' }}</text>
                        </template>
                    </up-cell>
                    <up-cell title="重要航班">
                        <template #label>
                            <text>{{ details.importantFlight || '-' }}</text>
                        </template>
                    </up-cell>
                    <up-cell title="会议布置工作">
                        <template #label>
                            <text>{{ details.meetingArrangementWork || '-' }}</text>
                        </template>
                    </up-cell>
                    <up-cell title="交接工作内容">
                        <template #label>
                            <text>{{ details.handoverWork || '-' }}</text>
                        </template>
                    </up-cell>
                </up-cell-group>
            </view>
            <view class="mocp-cell">
                <up-cell-group>
                    <up-cell title="交班操作时间" :value="timeStampFormat(details.jiaoBanTime) || '-'"></up-cell>
                    <up-cell title="接班操作时间" :value="timeStampFormat(details.jieBanTime) || '-'"></up-cell>
                </up-cell-group>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { timeStampFormat } from 'mocp/utils/tool'
import useDutyLogStore from 'mocp/store/dutyLog'
import { navigateTo } from 'mocp/utils/jump'
import { checkPermi } from 'mocp/utils/permission'

const query = defineProps(['id'])
const dutyLogStore = useDutyLogStore()
const { details } = storeToRefs(dutyLogStore)

onLoad(() => {
    dutyLogStore.setState('id', query.id)
    dutyLogStore.getDetails()
})
uni.$on('updateDutyLog', () => {
    dutyLogStore.getDetails()
})
onUnload(() => {
    uni.$off('updateDutyLog')
})
</script>
<style lang="scss" scoped>
.mocp-title {
    display: flex;
    align-items: center;
    padding: 0 32rpx 24rpx 32rpx;
    background-color: $mocp-fill-1;
    .time {
        font-size: 34rpx;
        margin-right: 16rpx;
    }
}
.mocp-cell {
    background: #fff;
    margin-bottom: 16rpx;
}
.mocp-title {
    padding: 0 32rpx 24rpx 32rpx;
    background-color: $mocp-fill-1;
}
</style>
