<template>
    <global-page
        title="公司值班经理意见"
        navLeftType="text"
        showNavRight
        navRightType="button"
        navRightText="保存"
        @handleRightClick="handleRightClick"
    >
        <view class="mocp-form">
            <up-form labelPosition="left" labelWidth="auto">
                <up-form-item label="公司值班经理" :borderBottom="true">
                    <custom-admin-picker
                        ref="adminPickerRef"
                        pickAlign="right"
                        clearable
                        v-model="formData.approver"
                        :searchValue="details.approverName"
                    ></custom-admin-picker>
                </up-form-item>
                <up-form-item label="公司值班经理意见" :borderBottom="true">
                    <global-radio radioAlign="right" clearable v-model="formData.decisionState" dictkey="md_decisionState"></global-radio>
                </up-form-item>
                <up-form-item label="公司值班经理意见描述" :borderBottom="true" labelPosition="top">
                    <up-textarea placeholder="请输入" :height="40" border="none" v-model="formData.decisionOpinion"></up-textarea>
                </up-form-item>
            </up-form>
        </view>
    </global-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'
import useMoveDecisionStore from 'mocp/store/move-decision'
import { updateApproverInfoApi } from 'mocp/api/move-decision'

const moveDecisionStore = useMoveDecisionStore()
const { details } = storeToRefs(moveDecisionStore)
//表单数据
const formData = reactive({
    id: '',
    approver: '',
    decisionState: '',
    decisionOpinion: ''
})
onLoad(() => {
    formData.id = details.value.id
    formData.approver = details.value.approver
    formData.decisionState = details.value.decisionState
    formData.decisionOpinion = details.value.decisionOpinion
})
const adminPickerRef = ref()
const handleRightClick = async () => {
    const res = await updateApproverInfoApi(formData, { loading: true })
    if (res.code == 200) {
        uni.$mocpJump.navigateBack()
        uni.$mocpMessage.success(res.message)
        res.data.approver = formData.approver
        res.data.approverName = adminPickerRef.value?.getName()
        res.data.decisionState = formData.decisionState
        res.data.decisionOpinion = formData.decisionOpinion
        //更新详情
        moveDecisionStore.setState('details', res.data)
    } else {
        uni.$mocpMessage.error(res.message)
    }
}
</script>

<style lang="scss" scoped>
.mocp-form {
    background: #fff;
    padding: 0 32rpx;
}
</style>
