<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form label-width="auto" ref="ruleFormRef" :model="form" :rules="rules" :inline="true">
				<el-form-item label="表名前缀" prop="tablePrefix">
					<el-input v-model="form.tablePrefix" @input="handleInputTablePrefix" placeholder="T_TEST"
						style="width: 200px;" clearable></el-input>
				</el-form-item>
				<el-form-item label="包名" prop="parentPackageName" clearable>
					<el-input v-model="form.parentPackageName" style="width: 200px;"
						@change="changePackageName"></el-input>
				</el-form-item>
				<el-form-item label="微服务名" prop="serviceName">
					<el-input v-model="form.serviceName" style="width: 400px;" @change="changeServiceName" clearable>
						<template #append>微服务架构填写,单体架构不需填写</template>
					</el-input>
				</el-form-item>
				<el-form-item label="模块名" prop="moduleName">
					<el-input v-model="form.moduleName" style="width: 200px;" clearable>
					</el-input>
				</el-form-item>

				<div>
					<el-form-item label="java路径" prop="javaPath">
						<el-input v-model="form.javaPath" placeholder="C:\workspaces\sgiip\Proj_SgIIP_Src_vue"
							style="width: 800px;">
							<template v-if="form.serviceName&& form.serviceName!=''"
								#append>\{{form.serviceName}}\src\main\java\{{form.parentPackageName}}\{{form.moduleName}}</template>
							<template v-else #append>\src\main\java\{{form.moduleName}}</template>
						</el-input>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="vue路径" prop="vuePath">
						<el-input v-model="form.vuePath" placeholder="C:\workspaces\sgiip\Proj_SgIIP_Src_vue"
							style="width: 800px;">
							<template v-if="form.serviceName&& form.serviceName!=''"
								#append>\src\view\{{form.serviceName}}\{{form.moduleName}}</template>
							<template v-else #append>\src\view\{{form.moduleName}}</template>
						</el-input>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="H5路径" prop="h5Path">
						<el-input v-model="form.h5Path" placeholder="C:\workspaces\sgiip\Proj_SgIIP_Src_vue"
							style="width: 800px;">
							<template v-if="form.serviceName&& form.serviceName!=''"
								#append>\src\view\{{form.serviceName}}\{{form.moduleName}}</template>
							<template v-else #append>\src\view\{{form.moduleName}}</template>
						</el-input>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="app路径" prop="appPath">
						<el-input v-model="form.appPath" placeholder="C:\workspaces\sgiip\Proj_SgIIP_Src_vue"
							style="width: 800px;">
							<template v-if="form.serviceName&& form.serviceName!=''"
								#append>\src\pages\{{form.serviceName}}\{{form.moduleName}}</template>
							<template v-else #append>\src\pages\{{form.moduleName}}</template>
						</el-input>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="界面方式" prop="fixedFlag">
						<el-radio-group v-model="form.fixedFlag" style="width: 200px;" @change="changeFixed">
							<el-radio value="0" label="0">静态界面</el-radio>
							<el-radio value="1" label="1">动态界面</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="菜单" prop="menu.menuName">
						<el-input v-model="form.menu.menuName" style="width: 200px;" :disabled="form.fixedFlag=='0'">
							<template #append>
								<el-button @click="handlePopupMenuTree"><el-icon>
										<Search />
									</el-icon></el-button>
							</template>
						</el-input>
					</el-form-item>
					<!-- 				<el-form-item label="表格名称" prop="tName">
					<el-input v-model="form.tName" style="width: 200px;" :disabled="form.fixedFlag=='0'"></el-input>
				</el-form-item> -->

				</div>
				<div>
					<el-form-item label="流程挂载" prop="processFlag">
						<el-radio-group v-model="form.processFlag" style="width: 200px;" @change="changeProcess">
							<el-radio value="0" label="0">不挂载</el-radio>
							<el-radio value="1" label="1">挂载</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="流程Key" prop="processKey">
						<el-input v-model="form.processKey" style="width: 200px;" :disabled="form.processFlag=='0'">
							<template #append>
								<el-button @click="handlePopupProcess"><el-icon>
										<Search />
									</el-icon></el-button>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="流程名称" prop="processName">
						<el-input v-model="form.processName" style="width: 200px;" :disabled="form.processFlag=='0'">
							<template #append>
								<el-button @click="handlePopupProcess"> <el-icon>
										<Search />
									</el-icon></el-button>
							</template>
						</el-input>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="附件挂载" prop="attachmentFlag">
						<el-radio-group v-model="form.attachmentFlag" style="width: 200px;" @change="changeAttachment">
							<el-radio value="0" label="0">不挂载</el-radio>
							<el-radio value="1" label="1">挂载</el-radio>
						</el-radio-group>
					</el-form-item>
				</div>

			</el-form>
		</el-card>

	<PopupMenuTree ref="refMenu" @receiveFromChild="receiveFromChild"></PopupMenuTree>

	</div>

</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)
	const inputStyle = ref(style.input)

	onMounted(() => {})

	const props = defineProps({
		tableName: {
			type: String,
			default: ''
		}
	})

	const form = ref({
		tableName: '',
		tablePrefix: '',
		moduleName: '',
		serviceName: '',
		parentPackageName: 'com.shinsoft',
		parentPackagePath: '',
		processKey: '',
		processName: '',
		vuePath: '',
		javaPath: '',
		appPath: '',
		fixedFlag: '0',
		tName: '表格',
		menu: {
			menuName: ''
		},
		processFlag: '0',
		processName: '',
		processKey: '',
		attachmentFlag: '0',
		attachmentType: '0',
	})
	const tablespaces = ref([])
	const ruleFormRef = ref()
	const rules = reactive({
		javaPath: [{
			required: true,
			message: '请输后端项目路径',
			trigger: 'change' | 'blur',
		}],
		tablePrefix: [{
			required: true,
			message: '请输入表前缀',
			trigger: 'change' | 'blur',
		}],
		// moduleName: [{
		// 	required: true,
		// 	message: '请输入模块名',
		// 	trigger: 'change' | 'blur',
		// }],
		parentPackageName: [{
			required: true,
			message: '请输入包名',
			trigger: 'change' | 'blur',
		}],
		vuePath: [{
			required: true,
			message: '请输入Vue文件路径',
			trigger: 'change' | 'blur',
		}],
		appPath: [{
			required: true,
			message: '请输入App文件路径',
			trigger: 'change' | 'blur',
		}],
		h5Path: [{
			required: true,
			message: '请输入H5文件路径',
			trigger: 'change' | 'blur',
		}],
		appPath: [{
			required: true,
			message: '请输入App文件路径',
			trigger: 'change' | 'blur',
		}],
		fixedFlag: [{
			required: true,
			message: '请选择列类型',
			trigger: 'change' | 'blur',
		}],
		processFlag: [{
			required: true,
			message: '请选择流程挂载',
			trigger: 'change' | 'blur',
		}],
		attachmentFlag: [{
			required: true,
			message: '请选择附件挂载',
			trigger: 'change' | 'blur',
		}], 
		'menu.menuName': [{
			required: true,
			message: '请选择菜单',
			trigger: 'change' | 'blur',
		}],
		tName: [{
			required: false,
			message: '请输入表格名称',
			trigger: 'change' | 'blur',
		}],
		processKey: [{
			required: false,
			message: '请选择流程key',
			trigger: 'change' | 'blur',
		}],
		processName: [{
			required: false,
			message: '请选择流程名称',
			trigger: 'change' | 'blur',
		}],
		attachmentType: [{
			required: false,
			message: '请选择附件挂载类型',
			trigger: 'change' | 'blur',
		}],
		
	})



	const handleInputTableName = (value) => {
		form.value.tableName = value.toUpperCase()
	}

	const handleInputTablespace = (value) => {
		form.value.tablespace = value.toUpperCase()
	}




	const handleInputFieldName = (value) => {
		tableField.value.fieldName = value.toUpperCase()
	}
	const handleServiceNameInput = (value) => {

	}

	const tableData = ref([])
	const tableRowClassName = ({
		row,
		rowIndex
	}) => {
		row.sort = rowIndex + 1;
	}
	const selectedRowIndex = ref(0)

	const fieldTypeOptions = ref([])

	const handleQueryDBType = () => {

		var url = 'framework/Generate/queryDBType'
		var param = {}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == 0) {
				ElMessage({
					message: response.data.data.dbType,
					type: 'success'
				})
				form.value.dbType = response.data.data.dbType
				if (form.value.javaPath == null || form.value.javaPath == '') {
					form.value.javaPath = response.data.data.javaPath
				}

				if (form.value.vuePath == null || form.value.vuePath == '') {
					form.value.vuePath = response.data.data.vuePath
				}
				if (form.value.appPath == null || form.value.appPath == '') {
					form.value.appPath = response.data.data.appPath
				}
				if (form.value.h5Path == null || form.value.h5Path == '') {
					form.value.h5Path = response.data.data.h5Path
				}


				console.log(response.data.data.tablespaces)
				if (form.value.dbType == 'oracle') {
					tablespaces.value = response.data.data.tablespaces
					fieldTypeOptions.value = [{
						value: 'VARCHAR2',
						label: 'VARCHAR2'
					}, {
						value: 'NUMBER',
						label: 'NUMBER'
					}, {
						value: 'DATE',
						label: 'DATE'
					}]

					{
						tablespace: [{
							required: true,
							message: '请输入表空间',
							trigger: 'change' | 'blur',
						}]
					}


				} else if (form.value.dbType == 'mysql') {
					tablespaces.value = []
					fieldTypeOptions.value = [{
						value: 'varchar',
						label: 'varchar'
					}, {
						value: 'int',
						label: 'int'
					}, {
						value: 'float',
						label: 'float'
					}, {
						value: 'double',
						label: 'double'
					}, {
						value: 'date',
						label: 'date'
					}, {
						value: 'datetime',
						label: 'datetime'
					}]


				}
			} else {
				tablespaces.value = []
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}


	const handleReadDB = (ruleFormRef) => {
		ruleFormRef.validateField(['tableName', 'dbType'], valid => {
			if (valid) {
				var url = 'framework/Generate/query'
				var param = {
					tableName: props.tableName //form.value.tableName
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						form.value.tablespace = response.data.data.tablespace
						tableData.value = response.data.data.fields
					} else {
						ElMessage({
							message: '操作失败' + response.data.msg,
							type: 'error'
						})
						tableData.value = []
					}
				})
			} else {
				console.log('error submit!!');
				return false;
			}
		})
	}

	const handleSearch = () => {
		var url = 'framework/LowCode/query'
		var param = {
			tableName: props.tableName
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == 0) {
				form.value = response.data.data
				tableData.value = response.data.data.fields
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
				tableData.value = []
			}
		})
	}




	const tableField = ref({
		fieldName: '',
		fieldType: 'VARCHAR2',
		fieldComment: '',
		dataLength: 0,
		dataPrecision: 0,
		nullFlag: '0',
		pkFlag: '0',

		controllerType: '',
		inputFlag: false,
		requireFlag: false,

		queryFlag: false,
		fuzzyFlag: false,
		dateFlag: false,
	})


	const tableFieldRules = reactive({
		fieldName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur' | 'change'
		}],
		fieldComment: [{
			required: true,
			message: '不能为空',
			trigger: 'blur' | 'change'
		}],
	})





	const dialogVisible = ref(false)
	const handleAddField = () => {
		if (form.value.dbType == null || form.value.dbType == '') {
			ElMessage({
				message: '请先检测数据库',
				type: 'error'
			})
			return
		}
		tableField.value = {
			fieldName: '',
			fieldType: '',
			fieldComment: '',
			dataLength: 0,
			dataPrecision: 0,
			nullFlag: '0',
			pkFlag: '0',
			flag: 'add'
		}
		dialogVisible.value = true
	}
	const handleAddDefault = () => {
		if (form.value.dbType == null || form.value.dbType == '') {
			ElMessage({
				message: '请先检测数据库',
				type: 'error'
			})
			return
		}
		var url = 'framework/LowCode/queryDefault'
		var param = {
			dbType: form.value.dbType
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				tableData.value = tableData.value.concat(response.data.data)
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}

	const tableFieldRef = ref()
	const handleComfirm = (tableFieldRef) => {
		tableFieldRef.validate((valid, fields) => {
			if (valid) {
				if (tableField.value.flag == 'add') {
					tableData.value.splice(selectedRowIndex.value, 0, tableField.value)
				}
				dialogVisible.value = false
			} else {
				console.log('error submit!!');
				return false;
			}
		})
	}
	const handleComfirmCancel = () => {
		dialogVisible.value = false
	}


	const handleUp = (row, index) => {
		if (index == 0) {
			return
		}
		var temp = row
		tableData.value.splice(index, 1)
		tableData.value.splice(index - 1, 0, temp)
	}
	const handleDown = (row, index) => {
		if (index == tableData.value.length - 1) {
			return
		}
		var temp = row
		tableData.value.splice(index, 1)
		tableData.value.splice(index + 1, 0, temp)
	}
	const handleCurrentChange = (val) => {
		if (val) {
			selectedRowIndex.value = val.sort
		} else {
			selectedRowIndex.value = 0
		}
	}
	const handleEdit = (index, row) => {
		tableField.value = row
		tableField.value.flag = 'modify'
		dialogVisible.value = true
	}

	const handleDelete = (index, row) => {
		tableData.value.splice(index, 1)
		if (row.id && row.id != null && row.id != '') {
			var url = 'framework/LowCode/remove'
			var param = {
				id: row.id,
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == 0) {
					ElMessage({
						type: 'success',
						message: '已删除!'
					});
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败!' + response.data.msg
					});
				}
			})
		}

	}


	const handleSave = (callback) => {
		if (form.value.dbType == 'oracle') {
			if (form.value.tablespace == '') {
				ElMessage({
					type: 'error',
					message: 'oracle必须填写表空间'
				});
				return
			}
		}
		form.value.tableName = props.tableName
		// ruleFormRef.validateField(['tablespace', 'dbType'], valid => {
		// 	if (valid) {
			
			console.log(JSON.stringify(form.value))
		var url = 'framework/LowCode/save'
		var param = {
			form: JSON.stringify(form.value),
			json: JSON.stringify(tableData.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				ElMessage({
					type: 'success',
					message: '操作成功!'
				});
				handleSearch()
				callback()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		})
		// } else {
		// 	console.log('error submit!!')
		// 	return false
		// }
		//})
	}




	const handleCreate = (ruleFormRef) => {
		var v = []
		if (form.value.dbType == 'oracle') {
			v = ['tableName', 'dbType', 'tablespace']
		} else {
			v = ['tableName', 'dbType']
		}
		ruleFormRef.validateField(v, valid => {
			if (valid) {
				var url = 'framework/Generate/create'
				var param = {
					form: JSON.stringify(form.value),
					json: JSON.stringify(tableData.value)
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						ElMessage({
							type: 'success',
							message: response.data.data
						})
					} else {
						ElMessage({
							type: 'error',
							message: '操作失败!' + response.data.msg
						})
					}
				})
			} else {
				console.log('error submit!!')
				return false
			}
		})
	}


	const handleCreateSqlOracle = (ruleFormRef) => {
		ruleFormRef.validateField(['tableName', 'dbType', 'tablespace'], valid => {
			if (valid) {
				createSql('oracle')
			} else {
				console.log('error submit!!');
				return false;
			}
		})


	}
	const handleCreateSqlMysql = (ruleFormRef) => {
		ruleFormRef.validateField(['tableName', 'dbType'], valid => {
			if (valid) {
				createSql('mysql')
			} else {
				console.log('error submit!!');
				return false;
			}
		})

	}
	const createSql = (dbType) => {
		var url = 'framework/Generate/createSql'
		var param = {
			form: JSON.stringify(form.value),
			json: JSON.stringify(tableData.value),
			dbType: dbType
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				ElMessage({
					type: 'success',
					message: response.data.data
				});
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		})
	}

	import PopupMenuTree from '@/components/PopupMenuTree.vue'
	const refMenu = ref()
	const handlePopupMenuTree = () => {
		refMenu.value.open()
	}
	const receiveFromChild = (data) => {
		form.value.menu = data
	}

	defineExpose({
		ruleFormRef,
		handleSearch,
		handleSave,
		form
	})
</script>

<style>
</style>