<template>
    <global-page title="海技值班详情" showNavRight navRightType="button" navRightText="保存" @handleRightClick="handleRightClick">
        <view class="mocp-title">
            <view class="mocp-color-text-5 time">{{ timeStampFormat(formData.dutyDate, { format: 'YYYY/MM/DD dddd' }) }}</view>
            <global-tag :type="useGetDictByValue('dl_statusColor', formData.status)">
                {{ useGetDictByValue('dl_status', formData.status) }}
            </global-tag>
        </view>
        <up-form labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" ref="formRef">
            <view class="mocp-form">
                <up-form-item label="值班经理" prop="dutyManagerUid" :borderBottom="true" required>
                    <custom-admin-picker
                        pickAlign="right"
                        clearable
                        v-model="formData.dutyManagerUid"
                        :search-value="formData.dutyManagerUname"
                    ></custom-admin-picker>
                </up-form-item>
                <up-form-item label="监察领导" prop="monitorLeaderUid" :borderBottom="true" required>
                    <custom-admin-picker
                        pickAlign="right"
                        clearable
                        v-model="formData.monitorLeaderUid"
                        :search-value="formData.monitorLeaderUname"
                    ></custom-admin-picker>
                </up-form-item>
                <up-form-item label="接班经理" prop="successorManagerUid" :borderBottom="true" required>
                    <custom-admin-picker
                        pickAlign="right"
                        clearable
                        v-model="formData.successorManagerUid"
                        :search-value="formData.successorManagerUname"
                    ></custom-admin-picker>
                </up-form-item>
            </view>
            <view class="mocp-form">
                <up-form-item label="汇报工作" prop="reportWork" :borderBottom="true" labelPosition="top">
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.reportWork" count :maxlength="1000"></up-textarea>
                </up-form-item>
            </view>
            <view class="mocp-form">
                <up-form-item label="重要航班" prop="importantFlight" :borderBottom="true" labelPosition="top">
                    <up-textarea
                        placeholder="请输入"
                        :height="40"
                        border="none"
                        v-model="formData.importantFlight"
                        count
                        :maxlength="1000"
                    ></up-textarea>
                </up-form-item>
            </view>
            <view class="mocp-form">
                <up-form-item label="会议布置工作" prop="meetingArrangementWork" :borderBottom="true" labelPosition="top">
                    <up-textarea
                        placeholder="请输入"
                        :height="40"
                        border="none"
                        v-model="formData.meetingArrangementWork"
                        count
                        :maxlength="1000"
                    ></up-textarea>
                </up-form-item>
            </view>
            <view class="mocp-form">
                <up-form-item label="交接工作内容" prop="handoverWork" :borderBottom="true" labelPosition="top">
                    <up-textarea
                        placeholder="请输入"
                        :height="40"
                        border="none"
                        v-model="formData.handoverWork"
                        count
                        :maxlength="1000"
                    ></up-textarea>
                </up-form-item>
            </view>
        </up-form>
        <global-action-sheet
            v-model="showAction"
            :options="[
                { label: '未交班并保存', value: 'NO_JIAO_BAN' },
                { label: '已交班并保存', value: 'JIAO_BAN' },
                { label: '已接班保存', value: 'JIE_BAN' }
            ]"
            @select="handleSubmit"
        ></global-action-sheet>
    </global-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { formData, formRef, rules, showAction } from './constants/edit.compositions'
import { handleSubmit, resetData, handleRightClick } from './constants/edit.functionals'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { timeStampFormat } from 'mocp/utils/tool'
import useDutyLogStore from 'mocp/store/dutyLog'

const dutyLogStore = useDutyLogStore()
const { details } = storeToRefs(dutyLogStore)
onLoad(() => {
    resetData()
    Object.assign(formData, details.value)
})
</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-form {
    background: #fff;
    padding: 0 32rpx;
    margin-bottom: 16rpx;
}
</style>
