<template>
    <global-page title="工作验证" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存" @handleRightClick="handleSave">
        <view class="mocp-form">
            <up-form labelPosition="left" labelWidth="auto" :model="formData" :rules="rules" ref="formRef">
                <up-form-item label="跟踪要点" :borderBottom="true" labelPosition="top" prop="trackingPoints" required>
                    <up-textarea
                        v-model="formData.trackingPoints"
                        placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                        :height="40"
                        border="none"
                    ></up-textarea>
                </up-form-item>
                <up-form-item label="事件类型" :borderBottom="true" prop="eventType" required>
                    <global-picker
                        pickAlign="right"
                        v-model="formData.eventType"
                        clearable
                        :options="getParamsByType('LayoutEventType')"
                    ></global-picker>
                </up-form-item>
                <up-form-item label="重复/同类事件" :borderBottom="true" prop="validateType" required>
                    <global-checkbox checkboxAlign="right" v-model="formData.validateType" dictkey="aw_validateType"></global-checkbox>
                </up-form-item>
                <up-form-item label="验证附件" labelPosition="top" :borderBottom="true">
                    <view style="margin-top: 24rpx">
                        <global-upload
                            :fileList="arrangeWorkExtend.validateFileVoList"
                            v-model="formData.validateFile"
                            mapFieldName="id"
                        ></global-upload>
                    </view>
                </up-form-item>
                <up-form-item label="工作验证状态" :borderBottom="true" prop="validateState" required>
                    <global-picker pickAlign="right" clearable v-model="formData.validateState" dictkey="aw_feedbackState"></global-picker>
                </up-form-item>
            </up-form>
        </view>
    </global-page>
</template>

<script setup>
import { reactive, ref } from 'vue'
import useAssignWorkStore from 'mocp/store/assign-work'
import { storeToRefs } from 'pinia'
import { onLoad } from '@dcloudio/uni-app'
import { savaWorkValidateApi } from 'mocp/api/assign-work'
import { getParamsByType } from 'mocp/hooks/use-params/useParams'

const assignWorkStore = useAssignWorkStore()
const { arrangeWorkExtend } = storeToRefs(assignWorkStore)
const formData = reactive({
    trackingPoints: '',
    eventType: '',
    validateFile: [],
    validateType: '',
    validateState: '1'
})
const rules = reactive({
    trackingPoints: [
        {
            required: true,
            message: '请输入跟踪要点',
            trigger: ['blur', 'change']
        }
    ],
    eventType: [
        {
            required: true,
            message: '请选择事件类型',
            trigger: ['blur', 'change']
        }
    ],
    validateType: [
        {
            required: true,
            message: '请选择重复/同类事件',
            trigger: ['blur', 'change']
        }
    ],
    validateState: [
        {
            required: true,
            message: '请选择工作验证状态',
            trigger: ['blur', 'change']
        }
    ]
})
//页面初始化
onLoad(() => {
    formData.id = arrangeWorkExtend.value.id
    formData.workId = arrangeWorkExtend.value.workId
    formData.company = arrangeWorkExtend.value.company
    formData.trackingPoints = arrangeWorkExtend.value.trackingPoints
    formData.eventType = arrangeWorkExtend.value.eventType
    formData.validateType = arrangeWorkExtend.value.validateType
    formData.validateState = arrangeWorkExtend.value.validateState
})
//保存
const formRef = ref()
const handleSave = async () => {
    await formRef.value?.validate()
    const res = await savaWorkValidateApi(formData, { loading: true })
    if (res.code == 200) {
        uni.$mocpJump.navigateBack()
        uni.$mocpMessage.success(res.message)
        //更新当前责任单位详情
        assignWorkStore.setState('arrangeWorkExtend', res.data)
    } else {
        uni.$mocpMessage.error(res.message)
    }
}
</script>
<style lang="scss" scoped>
.mocp-form {
    background: #fff;
    padding: 0 32rpx;
}
</style>
