<template>
    <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title'
            width="40%">
        <el-scrollbar>
            <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>

                <el-form-item label='表单类型' prop='formType'>
                    <el-radio-group v-model='formData.formType' :disabled='!!formData.id'>
                        <el-radio border :label='20'>业务表单</el-radio>
                        <el-radio border :label='10'>流程表单</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label='流程名称' prop='name'>
                    <el-input
                        v-model='formData.name'
                        :disabled='!!formData.id'
                        clearable
                        placeholder='请输入流程名称'
                        maxlength="32"
                        show-word-limit
                    />
                </el-form-item>


                <el-form-item label='流程分类' prop='category'>
                    <el-select
                        v-model='formData.category'
                        clearable
                        placeholder='请选择流程分类'
                        style='width: 100%'
                    >
                        <el-option
                            v-for='category in categoryList'
                            :key='category.id'
                            :label='category.name'
                            :value='category.id'
                        />
                    </el-select>
                </el-form-item>
                <!--        <el-form-item v-if='formData.id' label='流程图标' prop='icon'>-->
                <!--          <UploadImg v-model='formData.icon' :limit='1' height='128px' width='128px' />-->
                <!--        </el-form-item>-->

                <el-form-item label='流程标识' prop='key' v-if='formData.formType == 20'>
                    <el-select v-model='formData.key' clearable style='width: 100%' @change='changeSign'>
                        <el-option
                            v-for='item in flowInfo'
                            :key='item.id'
                            :label='item.name'
                            :value='item.signKey'
                            placeholder='请选择流程标识'
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label='流程标识' prop='key' v-else>
                    <el-input v-model='formData.key'  maxlength="32"
                        show-word-limit/>
                </el-form-item>

                <el-form-item label='流程表单' prop='formId' v-if='formData.formType == 10'>
                    <el-select v-model='formData.formId' clearable style='width: 100%'>
                        <el-option
                            v-for='form in formList'
                            :key='form.id'
                            :label='form.name'
                            :value='form.id'
                        />
                    </el-select>
                </el-form-item>
                <!--        <el-form-item label='表单提交路由' prop='description'>-->
                <!--          <el-input v-model='formData.description' clearable type='textarea' />-->
                <!--        </el-form-item>-->
                <el-form-item v-else label='表单查看路由' prop='formCustomViewPath'>
                    <el-input v-model='formData.formCustomViewPath' disabled />
                </el-form-item>

                <el-form-item label='流程描述' prop='description'>
                    <el-input v-model='formData.description' clearable type='textarea' />
                </el-form-item>

            </el-form>
        </el-scrollbar>

        <template #footer>
            <span class='dialog-footer'>
                <el-button @click='dialogVisible = false'>取消</el-button>
                <el-button type='primary' @click='submit'>确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang='ts' setup>
import { ref, inject, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getFormSimpleList } from '@/api/bpm-boot/form'
import { getCategorySimpleList } from '@/api/bpm-boot/category'
import { addModel, updateModel } from '@/api/bpm-boot/model'
import { getSignSimpleList } from '@/api/bpm-boot/sign'

//传入type的名称
const categoryList = ref()
const flowInfo = ref()
const formList = ref()

const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()

const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const formData = reactive({
    id: '',
    key: '',
    name: '',
    category: '',
    icon: '',
    description: '',
    formType: 20,
    formCustomCreatePath: '',
    formCustomViewPath: '',
    formId: ''
})

//form表单校验规则
const rules = {
    key: [{ required: true, message: '流程标识不能为空', trigger: 'change' }],
    name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
    category: [{ required: true, message: '流程分类不能为空', trigger: 'change' }],
    formType: [{ required: true, message: '表单类型不能为空', trigger: 'change' }]
}
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

const open = async (text: string, data?: any) => {
    title.value = text
    await getFormSimpleList().then(res => {
        formList.value = res.data
    })

    await getCategorySimpleList().then(res => {
        categoryList.value = res.data
    })

    await getSignSimpleList().then(res => {
        flowInfo.value = res.data
    })
    //默认选中第一个tab
    if (data) {
        // 表单赋值
        for (let key in formData) {
            formData[key] = data[key]
        }
    } else {
        resetForm()
        // 在此处恢复默认表单
        for (let key in formData) {
            formData[key] = ''
        }
        //随机一个key给该模型
        formData.formType = 20
    }
    dialogVisible.value = true
}


/**
 * 提交用户表单数据
 */
const submit = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            if (formData.id) {
                await updateModel(formData)
                ElMessage.success('更新成功')
                tableStore.index()
                dialogVisible.value = false
            } else {
                await addModel(formData).then(res => {
                    formData.id = res.data
                    //查询进线数据，避免一直处于loading状态
                    ElMessage.success('保存成功')
                    tableStore.index()
                    dialogVisible.value = false
                })
            }

        }
    })
}

defineExpose({ open })

const changeSign = (event: any) => {
    //根据选择的流程标识回显查看路径
    const path = flowInfo.value.filter(item => item.signKey == event)[0].viewPath
    formData.formCustomCreatePath = path
    formData.formCustomViewPath = path
}

</script>

<style scoped>
.el-upload-list__item {
    transition: none !important;
}

.el-select {
    min-width: 180px;
}
</style>
