<template>
    <hc-new-dialog widths="600px" bg-color="#fff" :show="isShow" title="流程上报" @save="modalSave" @close="modalClose">
        <el-form ref="formRef" class="p-4" :model="formModel" :rules="formRules" label-width="auto" size="large">
            <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="formModel.taskName" disabled />
            </el-form-item>
            <el-form-item label="任务描述" prop="taskContent">
                <el-input v-model="formModel.taskContent" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入任务描述" type="textarea" />
            </el-form-item>
            <el-form-item label="任务流程" prop="fixedFlowId">
                <el-select v-model="formModel.fixedFlowId" block @change="handleProcessValue">
                    <el-option v-for="item in processData" :key="item.id" :disabled="item.disabled" :value="item.id" :label="item.fixedFlowName">
                        <el-tooltip v-if="item.tips && item.disabled" class="box-item" effect="light" :content="item.tips " placement="right-end">{{ item.fixedFlowName }}</el-tooltip>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="diyProcessUser" label="任务人" prop="userTasks">
                <hc-tasks-user
                    :contract-id="contractId" :project-id="projectId" :type="type" :type-data="typeData"
                    ui="w-full" :classify-type="classifyType" :table-owner="tableOwner" :node-id="formModel.ids ? formModel.ids : nodeId "
                    :info-ids="infoIds" @change="diyProcessUserChange"
                />
            </el-form-item>
            <el-form-item v-else label="任务人">
                <div class="form-item-div">{{ linkUserJoinString }}</div>
            </el-form-item>
            <el-form-item label="上报批次">
                <hc-counter v-model="formModel.batch" />
            </el-form-item>
            <el-form-item label="限定审批时间">
                <hc-counter v-model="formModel.restrictDay" text="(天)" />
            </el-form-item>
        </el-form>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { arrIndex } from 'js-fast-way'

const props = defineProps({
    title: {
        type: String,
        default: '上报审批',
    },
    taskName: {
        type: String,
        default: '',
    },
    ids: {
        type: String,
        default: null,
    },
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    classifyType: {
        type: [String, Number],
        default: '',
    },
    tableOwner: {
        type: [String, Number],
        default: '',
    },
    url: {
        type: [String, Number],
        default: '',
    },
    datas: {
        type: Array,
        default: () => ([]),
    },
    isDatas: {
        type: Boolean,
        default: false,
    },
    addition: {
        type: Object,
        default: () => ({}),
    },
    type: { //first,log,wbs
        type: [String, Number],
        default: '',
    },
    typeData: {
        type: [String, Number, Array, Object],
        default: '',
    },
    trialSelfInspectionRecordId: {
        type: [String, Number],
        default: '',
    },
    nodeId:{
        type: [String, Number],
        default: '',
    },
    reportArr: {
        type: Array,
        default: () => ([]),
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

defineOptions({
    name: 'HcReportDialog',
})

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(isShow, (val) => {
    if (val) {}
})

const processData = ref([])
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)

//基础变量
const formRef = ref(null)
const formModel = ref({
    projectId: projectId.value,
    contractId: contractId.value,
    ids: props.ids,
    userTasks: null,
    taskName: props.taskName,
    taskContent: '',
    fixedFlowId: '',
    batch: 1,
    restrictDay: 1,
    trialSelfInspectionRecordId: props.trialSelfInspectionRecordId,
    ...props.addition,
})
const formRules = ref({
    taskContent: {
        required: false,
        trigger: 'blur',
        message: '请输入任务描述',
    },
    fixedFlowId: {
        required: true,
        trigger: 'blur',
        message: '请选择任务流程',
    },
    userTasks: {
        required: true,
        trigger: 'blur',
        message: '请选择任务人',
    },
})

//流程数据切换
const infoIds = ref('')
const diyProcessUser = ref(false)
const linkUserJoinString = ref('')
const handleProcessValue = (val) => {
    if (val > 0) {
        diyProcessUser.value = false
        const list = processData.value
        const index = arrIndex(list, 'id', val)
        linkUserJoinString.value = list[index]?.linkUserJoinString
    } else {
        linkUserJoinString.value = ''
        diyProcessUser.value = true
    }
}

//自定义流程任务人选择完毕
const diyProcessUserChange = (user) => {
    formModel.value.userTasks = user
}


//保存
const modalSave = () => {
    emit('finish')
    modalClose()
}

//关闭弹窗
const modalClose = () => {
    isShow.value = false
    formModel.value = {}
    emit('close')
}
</script>
