<!-- 表单开发 -->
<template>
	<el-drawer
		v-model="visible"
		v-loading="loading"
		title="设计表单"
		:before-close="handleClose"
		:modal="false"
		size="95%"
		:wrapper-closable="false"
		class="detailDrawer"
	>
		<div width="100%">
			<el-header class="main-header">
				<div class="float-left main-title">
					<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
						<el-row>
							<el-col :span="4">
								<el-form-item label="表单名称" prop="formName">
									<el-input v-model="dataForm.formName" placeholder="" clearable />
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="表单编号" prop="formName">
									<el-input v-model="dataForm.formCode" placeholder="" readonly clearable />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="表单描述" prop="formContent">
									<el-input v-model="dataForm.formContent" placeholder="" clearable />
								</el-form-item>
							</el-col>
							<el-col :span="8" align="right">
								<el-button type="primary" @click="addSub()">新增从表</el-button>
								<el-button type="primary" @click="getColum(1)">获取表最新字段</el-button>
								<el-button type="primary" @click="saveOrUpdate()">保存</el-button>
							</el-col>
						</el-row>
            <el-row>
              <el-col :span="4">
                <el-form-item label="是否流程" prop="isFlow">
                  <el-switch v-model="dataForm.isFlow" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="dataForm.isFlow=='1'">
                <el-form-item label="流程类型" prop="flowType">
                  <fast-select v-model="dataForm.flowType" dict-type="flowType" clearable placeholder="流程类型"></fast-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="dataForm.isFlow=='1'">
                <el-form-item label="流程名称" prop="flowKey">
                  <fast-select v-model="dataForm.flowKey" dict-type="flowKey" clearable placeholder="流程名称"></fast-select>
                </el-form-item>
              </el-col>
            </el-row>
						<el-row>
							<el-col :span="24">
								<el-collapse v-model="activeNames">
									<el-collapse-item name="1" title="关联表">
										<el-table :data="dataForm.fastFormTableList" border stripe>
											<el-table-column label="表名" align="left" prop="name" show-overflow-tooltip width="200">
												<template #default="scope">
													<el-input v-model="scope.row.name" clearable size="small"></el-input>
												</template>
											</el-table-column>
											<el-table-column label="表描述" align="left" prop="label" show-overflow-tooltip width="300">
												<template #default="scope">
													<el-input v-model="scope.row.label" clearable size="small"></el-input>
												</template>
											</el-table-column>
											<el-table-column label="是否主表" align="left" prop="isMain" show-overflow-tooltip width="120">
												<template #default="scope">
													<el-checkbox v-model="scope.row.isMain" true-label="1" false-label="0"></el-checkbox>
												</template>
											</el-table-column>
											<el-table-column label="从表对应字段" align="left" prop="subColumn" show-overflow-tooltip width="180">
												<template #default="scope">
													<el-input v-model="scope.row.subColumn" clearable size="small"></el-input>
												</template>
											</el-table-column>
											<el-table-column label="关联主表字段" align="left" prop="mainColumn" show-overflow-tooltip width="180">
												<template #default="scope">
													<el-input v-model="scope.row.mainColumn" clearable size="small"></el-input>
												</template>
											</el-table-column>
											<el-table-column label="从表是否多行" align="left" prop="isManyRow" show-overflow-tooltip width="120">
												<template #default="scope">
													<el-checkbox v-model="scope.row.isManyRow" true-label="1" false-label="0"></el-checkbox>
												</template>
											</el-table-column>
											<el-table-column label="操作" width="120">
												<template #default="scope">
													<el-button type="text" @click="delTableRow(scope.row, scope.$index)"> 删除</el-button>
												</template>
											</el-table-column>
										</el-table>
									</el-collapse-item>
								</el-collapse>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-collapse v-model="activeNames">
									<el-collapse-item name="1" title="非表字段(格式:字段编码,字段名称;字段编码,字段名称;)">
										<el-row>
											<el-col :span="20">
												<el-input v-model="dataForm.otherColumns" type="textarea"></el-input>
											</el-col>
											<el-col :span="4">
												<el-button type="primary" @click="tableItemRest()">刷新表字段</el-button>
											</el-col>
										</el-row>
									</el-collapse-item>
								</el-collapse>
							</el-col>
						</el-row>
						<el-row>
							<v-form-designer ref="eboDesignerRef"></v-form-designer>
						</el-row>
					</el-form>
				</div>
			</el-header>
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import {getFormConfig, getFormTableColumn, saveOrUpdateApi} from '../api/formDevReview'
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'

const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const loading = ref(false)
const formCode = ref('')
const dataFormRef = ref()
const eboDesignerRef = ref()
const activeNames = ref(['1'])
const dataForm = reactive({
	id: '',
	formCode: '',
	formName: '',
	formJson: '',
  isFlow:'0',
  flowKey:'',
  flowType:'',
	formContent: '',
	otherColumns: '',
	fastFormTableList: []
})

const init = (formCode?: string) => {
	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}
	visible.value = true

	if (formCode) {
		getInfo(formCode)
	}
}
const getInfo = (sourceFormCode: any) => {
	formCode.value = sourceFormCode
	if (formCode.value == 0) {
		return
	}
	dataForm.fastFormTableList = []

	var data = { formCode: formCode.value }

	getFormConfig(data).then(response => {
		Object.assign(dataForm, response.data)

		dataForm.fastFormTableList.forEach(item => {
			item.isMain = item.isMain + ''
			item.isManyRow = item.isManyRow + ''
		})
		if (dataForm.fastFormTableList.length > 0) {
			getColum(1)
		}

		tableItemRest()
    if(/(%[0-9A-F2-F]{2})+/i.test(dataForm.formJson)){
      dataForm.formJson = decodeURIComponent(dataForm.formJson);
    }
		eboDesignerRef.value.setFormJson(dataForm.formJson)
	})
}

const tableItemRest = () => {
	if (dataForm.otherColumns && dataForm.otherColumns != '') {
		var columns = dataForm.otherColumns.trim().split(';')
		var fieldList = []
		for (var i = 0; i < columns.length; i++) {
			if (columns[i] != '') {
				var cccc = columns[i].split(',')
				var item = { columnJavaName: cccc[0], columnLabel: cccc[1] }
				item.name = item.columnJavaName
				item.label = item.columnLabel
				item.tablAndLabelColumn = item.columnLabel
				item.elType = 'input'
				fieldList.push(item)
			}
		}
		eboDesignerRef.value.setFieldList(fieldList)
		ElMessage.success({
			message: '已获取最新非表字段',
			duration: 2000
		})
	}
}

const handleClose = () => {
	visible.value = false
}
const saveOrUpdate = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
    if(dataForm.isFlow === '1'){
      if(!dataForm.flowType || dataForm.flowType==''){
        ElMessage.info({
          message: '流程类型不能为空',
          duration: 2000
        })
        return false
      }else if(!dataForm.flowKey || dataForm.flowKey==''){
        ElMessage.info({
          message: '流程名称不能为空',
          duration: 2000
        })
        return false
      }
    }
		var formJson = eboDesignerRef.value.getFormJson()
		dataForm.formJson = encodeURIComponent(JSON.stringify(formJson))
		saveOrUpdateApi(dataForm).then(response => {
			Object.assign(dataForm, response.data)
			dataForm.fastFormTableList.forEach(item => {
				item.isMain = item.isMain + ''
				item.isManyRow = item.isManyRow + ''
			})
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					//visible.value = false
					//emit('refreshDataList')
				}
			})
		})
	})
}

const dataRules = ref({
	formName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }],
  isFlow: [{ required: true, message: '是否流程必填', trigger: 'blur' }]
})

const getColum = (flag: any) => {
	if (dataForm.id == '') {
		if (flag == 1) {
			ElMessage.info({
				message: '请先保存',
				duration: 2000
			})
		}
		return
	}
	var data = { id: dataForm.id }
	getFormTableColumn(data).then(response => {
		if (response.data) {
			response.data.forEach(item => {
				item.name = item.columnJavaName
				item.label = item.columnLabel
				item.tablAndLabelColumn = item.tableLable + '.' + item.columnLabel
				if (item.columnLabel == '【集合对象】') {
					item.elType = 'sub-form'
				} else {
					item.elType = 'input'
				}
			})
			eboDesignerRef.value.setFieldList(response.data)
			ElMessage.success({
				message: '已获取最新表字段',
				duration: 2000
			})
		}
	})
}

const delTableRow = (row, index) => {
	dataForm.fastFormTableList.splice(index, 1)
}
const addSub = () => {
	var obj = { isMain: 0, isManyRow: 0 }
	dataForm.fastFormTableList.push(obj)
}

defineExpose({
	init
})
</script>

<style lang="scss">
body {
	margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
