<template>
    <hc-dialog is-to-body is-footer-center widths="600px" bg-color="#fff" :show="isShow" title="流程上报" @save="modalSave" @close="modalClose">
        <el-form ref="formRef" class="p-2" label-position="top" :model="formModel" :rules="formRules" size="large">
            <el-form-item label="任务名称：" prop="key1">
                <el-input v-model="formModel.key1" :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入名称" type="textarea" />
            </el-form-item>
            <el-form-item label="任务流程：" prop="fixedFlowId">
                <el-select v-model="formModel.fixedFlowId" block @change="fixedFlowChange">
                    <template v-for="item in fixedFlowData" :key="item.id">
                        <el-option :label="item.name" :value="item.id" />
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item v-if="linkUserString" label="下一位审批人员：">
                <div class="form-item-div">{{ linkUserString }}</div>
            </el-form-item>
            <template v-else>
                <el-form-item label="下一审批岗位：" prop="key2">
                    <div class="form-item-div">
                        <el-radio-group v-model="formModel.key2">
                            <el-radio :label="3">承包商</el-radio>
                            <el-radio :label="6">监理</el-radio>
                            <el-radio :label="9">业主</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="下一审批人员：" prop="userId">
                    <el-select v-model="formModel.userId" block @change="userChange">
                        <template v-for="item in userData" :key="item.id">
                            <el-option :label="item.name" :value="item.id" />
                        </template>
                    </el-select>
                </el-form-item>
            </template>
            <el-form-item label="上报说明：">
                <el-input v-model="formModel.key4" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入上报说明" type="textarea" />
            </el-form-item>
        </el-form>
    </hc-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    name: {
        type: String,
        default: '',
    },
    ids: {
        type: String,
        default: null,
    },
})

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

defineOptions({
    name: 'HcReportDialog',
})

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

//基础变量
const formRef = ref(null)
//监听
watch(() => [
    props.name,
    props.ids,
], ([name, ids]) => {
    formModel.value = { name: name, ids: ids }
})

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

//任务流程
const fixedFlowDefault = [{ id: 0, name: '自定义流程' }]
const fixedFlowData = ref([])
const getFixedFlowApi = () => {
    if (isShow.value) {
        fixedFlowData.value = fixedFlowDefault
    }
}
//任务流程变化
const linkUserString = ref('')
const fixedFlowChange = (val) => {
    if (val === 0) {
        linkUserString.value = '测试的审批人员'
    } else {
        linkUserString.value = ''
    }
}

//审批人员
const userData = ref([{ id: 1, name: '测试的' }])
const userChange = () => {

}

//表单变量
const formModel = ref({
  key1: '', fixedFlowId: null,
})
const formRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: '请输入任务名称',
    },
    fixedFlowId: {
        required: true,
        trigger: 'blur',
        message: '请选择任务流程',
    },
    key2: {
        required: true,
        trigger: 'blur',
        message: '请选择下一审批岗位',
    },
    userId: {
        required: true,
        trigger: 'blur',
        message: '请选择下一审批人员',
    },
}

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

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