<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form label-width="80px" :inline="true" ref="ruleFormRef" :model="form" :rules="formRules">
				<el-form-item label="表名前缀" prop="tablePrefix">
					<el-input v-model="form.tablePrefix" @input="handleInputTablePrefix" placeholder="T_TEST"
						style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="模块名" prop="moduleName">
					<el-input v-model="form.moduleName" style="width: 200px;">
					</el-input>
				</el-form-item>
				<el-form-item label="包名" prop="parentPackageName">
					<el-input v-model="form.parentPackageName" style="width: 200px;" @change="changePackageName"></el-input>
				</el-form-item>
				<el-form-item label="java路径" prop="javaPath">
					<el-input v-model="form.javaPath" placeholder="C:\workspaces\sgiip\Proj_SgIIP_Src_vue"
						style="width: 600px;">
						<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>
				<el-form-item label="微服务名" prop="serviceName">
					<el-input v-model="form.serviceName" style="width: 400px;" @change="changeServiceName">
						<template #append>微服务架构填写,单体架构不需填写</template>
					</el-input>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border>
				<el-table-column label="数据库" header-align="center">
					<el-table-column prop="fieldName" label="字段名" width="140" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="fieldComment" label="注释" width="140" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="fieldType" label="字段类型" width="140" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
				</el-table-column>
				<el-table-column label="表单" header-align="center">
					<el-table-column prop="controllerType" label="控件" width="120" header-align="center" align="center"
						show-overflow-tooltip>
						<template #default="scope">
							<el-select v-model="scope.row.controllerType" size="small" style="width: 100px;">
								<el-option v-for="item in controllerTypeOptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="inputFlag" label="录入" width="80" header-align="center" align="center"
						show-overflow-tooltip :filters="[{text: '是', value: true}, {text: '否', value: false }]"
						:filter-method="filterHandler">
						<template #default="scope">
							<el-checkbox v-model="scope.row.inputFlag" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="requireFlag" label="必填" width="80" header-align="center" align="center"
						show-overflow-tooltip :filters="[{text: '是', value: true}, {text: '否', value: false }]"
						:filter-method="filterHandler">
						<template #default="scope">
							<el-checkbox v-model="scope.row.requireFlag" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="查询" header-align="center">
					<el-table-column prop="queryFlag" label="条件" width="80" header-align="center" align="center"
						show-overflow-tooltip :filters="[{text: '是', value: true}, {text: '否', value: false }]"
						:filter-method="filterHandler">
						<template #default="scope">
							<el-checkbox v-model="scope.row.queryFlag" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="fuzzyFlag" label="模糊" width="80" header-align="center" align="center"
						show-overflow-tooltip :filters="[{text: '是', value: true}, {text: '否', value: false }]"
						:filter-method="filterHandler">
						<template #default="scope">
							<el-checkbox v-model="scope.row.fuzzyFlag" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="dateFlag" label="范围" width="80" header-align="center" align="center"
						show-overflow-tooltip :filters="[{text: '是', value: true}, {text: '否', value: false }]"
						:filter-method="filterHandler">
						<template #default="scope">
							<el-checkbox v-model="scope.row.dateFlag" true-label="1" false-label="0"></el-checkbox>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" width="80px">
					<template #default="scope">
						<el-button plain @click="handleEdit(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

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

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

	onBeforeMount(() => {

	})
	const props = defineProps({
		// title: String, // 类型
		// likes: {
		//   type: Number,
		//   default: 0 // 默认值
		// },
		// isPublished: {
		//   type: Boolean,
		//   required: true // 必需的
		// },
		tableName: {
			type:String,
			 default: ''
		}
	})



	const controllerTypeOptions = ref([{
		value: '单行文本',
		label: '单行文本'
	}, {
		value: '多行文本',
		label: '多行文本'
	}, {
		value: '下拉',
		label: '下拉'
	}, {
		value: '日期',
		label: '日期'
	}, {
		value: '日期时间',
		label: '日期时间'
	}])
	const controllerAlignOptions = ref([{
		value: 'left',
		label: '左对齐'
	}, {
		value: 'center',
		label: '居中'
	}, {
		value: 'right',
		label: '右对齐'
	}])

	const filterHandler = (value, row, column) => {
		const property = column['property'];
		return row[property] === value;
	}

	const form = ref({
		tableName: '',
		tablePrefix: '',
		moduleName: '',
		serviceName: '',
		parentPackageName: 'com.shinsoft',
		parentPackagePath: '',
		processKey: '',
		processName: '',
		vuePath: '',
		javaPath: '',
		appPath: '',
		fixedFlag: '0'
	})
	const ruleFormRef = ref()
	const ruleFormRefSearch = ref()


	const formRules = 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',
		}],

	})


	const handleInputTableName = (value) => {
		form.value.tableName = value.toUpperCase()
	}
	const handleInputTablePrefix = (value) => {
		form.value.tablePrefix = value.toUpperCase()
	}
	// const handleInputServiceName = (value) => {
	// 	form.value.tablePrefix = value.toUpperCase()
	// }
	// const handleInputModuleName = (value) => {
	// 	form.value.tablePrefix = value.toUpperCase()
	// }




	const tableData = ref([])
	const handleSearch = () => {
		console.log(props.tableName)
		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 handleSave = (callback) => {
		form.value.tableName = props.tableName
		var url = 'framework/LowCode/update'
		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(ruleFormRef)
				callback()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		})
	}

const changePackageName = (val)=>{
	// form.value.parentPackagePath = val.replace(".","\\")
}

const changeServiceName = (val)=>{
	// form.value.parentPackagePath = val.replace(".","\\")
}
	// const handleGenerate = (ruleFormRef) => {
	// 	if (form.value.fixedFlag == '1' && (form.value.vuePath == '' || form.value.vuePath == null)) {
	// 		ElMessage({
	// 			type: 'error',
	// 			message: '生成vue代码，必须填写vue路径'
	// 		});
	// 		return
	// 	}
	// 	ElMessageBox.confirm(
	// 		'此操作将覆盖现有代码,请谨慎操作,是否继续?',
	// 		'提示', {
	// 			confirmButtonText: '确认',
	// 			cancelButtonText: '取消',
	// 			type: 'warning',
	// 			draggable: true,
	// 		}
	// 	).then(() => {
	// 		ruleFormRef.validateField(['tableName', 'tablePrefix', 'moduleName', 'parentPackageName'],
	// 			valid => {
	// 				if (valid) {
	// 					var url = 'Generate/generate'
	// 					var param = {
	// 						jsonForm: JSON.stringify(form.value),
	// 						jsonFileds: JSON.stringify(tableData.value)
	// 					}
	// 					proxy.$axios.post(url, param).then(response => {
	// 						if (response.data.code == 0) {
	// 							ElMessage({
	// 								type: 'success',
	// 								message: '操作成功!'
	// 							});
	// 							// handleSearch(ruleFormRef)
	// 						} else {
	// 							ElMessage({
	// 								type: 'error',
	// 								message: '操作失败!' + response.data.msg
	// 							});
	// 						}
	// 					})

	// 				} else {
	// 					console.log('error submit!!');
	// 					return false;
	// 				}
	// 			})

	// 	}).catch(() => {
	// 		ElMessage({
	// 			type: 'info',
	// 			message: '已取消！！'
	// 		});
	// 	});
	// }




	// const handleGenerate = (ruleFormRef) => {
	// 	if (form.value.fixedFlag == '1' && (form.value.vuePath == '' || form.value.vuePath == null)) {
	// 		ElMessage({
	// 			type: 'error',
	// 			message: '生成vue代码，必须填写vue路径'
	// 		});
	// 		return
	// 	}
	// 	ElMessageBox.confirm(
	// 		'此操作将覆盖现有代码,请谨慎操作,是否继续?',
	// 		'提示', {
	// 			confirmButtonText: '确认',
	// 			cancelButtonText: '取消',
	// 			type: 'warning',
	// 			draggable: true,
	// 		}
	// 	).then(() => {
	// 		ruleFormRef.validateField(['tableName', 'tablePrefix', 'moduleName', 'parentPackageName'],
	// 			valid => {
	// 				if (valid) {
	// 					var url = 'Generate/generate'
	// 					var param = {
	// 						jsonForm: JSON.stringify(this.form),
	// 						jsonFileds: JSON.stringify(this.tableData)
	// 					}
	// 					axios.post(url, param).then(response => {
	// 						if (response.data.code == 0) {
	// 							ElMessage({
	// 								type: 'success',
	// 								message: '操作成功!'
	// 							});
	// 							this.handleSearch(form)
	// 						} else {
	// 							ElMessage({
	// 								type: 'error',
	// 								message: '操作失败!' + response.data.msg
	// 							});
	// 						}
	// 					})

	// 				} else {
	// 					console.log('error submit!!');
	// 					return false;
	// 				}
	// 			})

	// 	}).catch(() => {
	// 		ElMessage({
	// 			type: 'info',
	// 			message: '已取消！！'
	// 		});
	// 	});
	// }


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

<style>
</style>