<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-steps :active="active" finish-status="success" align-center>
				<el-step title="数据库策略" />
				<el-step title="后端策略" />
				<el-step title="前端策略" />
				<el-step title="移动端策略" />
				<el-step title="其他策略" />
				<el-step title="一键生成" />
			</el-steps>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-form label-width="auto" ref="refForm" :model="form" :rules="rules" :inline="true">
				<el-form-item label="表名" prop="tableName">
					<el-input v-model="form.tableName" style="width: 200px;" clearable @input="handleInputTableName">
					</el-input>
				</el-form-item>
				<!-- <el-form-item label="服务名" prop="serviceName">
					<el-input v-model="form.serviceName" style="width: 400px;" clearable >
						<template #append>微服务架构填写,单体架构不需填写</template>
					</el-input>
				</el-form-item> -->
				<el-form-item v-if="active <5 " label=" ">
					<el-button type="primary" @click="handleSearch(refForm)">查询</el-button>
					<el-button type="success" @click="handleSave(refForm)">保存</el-button>
				</el-form-item>
				<el-form-item v-else label=" ">
					<el-button type="primary" @click="handleSearch(refForm)">查询</el-button>
					<el-button type="success" @click="handleGenerate(refForm)">一键生成</el-button>
				</el-form-item>


				<el-form-item label=" ">
					<el-button @click="last(refForm)">上一步</el-button>
					<el-button @click="next(refForm)">下一步</el-button>
					<el-button @click="go(refForm)">直接去生成</el-button>
				</el-form-item>

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

		<div v-if="active==0">
			<Table :tableName="form.tableName" ref="refTable"></Table>
		</div>
		<div v-else-if="active==1">
			<Code :tableName="form.tableName" ref="refCode"></Code>
		</div>
		<div v-else-if="active==2">
			<Column :tableName="form.tableName" ref="refColumn"></Column>
		</div>
		<div v-else-if="active==3">
			<App :tableName="form.tableName" ref="refApp"></App>
		</div>
		<div v-else-if="active==4">
			<Other :tableName="form.tableName" ref="refOther"></Other>
		</div>
		<div v-else-if="active==5">
			<Generate :tableName="form.tableName" ref="refGenerate"></Generate>
		</div>

	</div>
</template>

<script setup>
	import Table from './table.vue'
	import Code from './code.vue'
	import Column from './column.vue'
	import App from './app.vue'
	import Other from './other.vue'
	import Generate from './generate.vue'
	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 refTable = ref()
	const refCode = ref()
	const refColumn = ref()
	const refOther = ref()
	const refGenerate = ref()
	const refApp = ref()


	const refForm = ref()
	const active = ref(0)



	const getRefRule = () => {
		switch (active.value) {
			case 0:
				if (refTable.value.form.dbType == 'oracle') {
					refPage.value = refTable.value
					rulesPage.value = ['tablespace']
				} else {
					refPage.value = refTable.value
					rulesPage.value = []
				}
				break
			case 1:
				refPage.value = refCode.value
				rulesPage.value = ['javaPath', 'tablePrefix', 'moduleName', 'parentPackageName']
				break
			case 2:
				refPage.value = refColumn.value
				rulesPage.value = ['vuePath']
				break
			case 3:
				refPage.value = refApp.value
				rulesPage.value = ['appPath', 'h5Path']
				break
			case 4:
				refPage.value = refOther.value
				rulesPage.value = ['fixedFlag', 'processFlag', 'attachmentFlag']
				console.log(refOther.value.form.fixedFlag)
				if (refOther.value.form.fixedFlag == '1') {
					rulesPage.value.push('tName')
					rulesPage.value.push('menu.menuName')
				}
				if (refOther.value.form.processFlag == '1') {
					rulesPage.value.push('processKey')
					rulesPage.value.push('processName')
				}
				if (refOther.value.form.attachmentFlag == '1') {
					rulesPage.value.push('attachmentType')
				}
				break
			case 5:
				refPage.value = refGenerate.value
				rulesPage.value.push('checkList')
				break
		}
	}

	const saveAndSearch = () => {
		if (active.value++ > 5) {
			active.value = 5
		}
		handleSearch(refForm.value)
	}
	const saveAndBack = () => {
		if (active.value-- == 0) {
			active.value = 0
		}
		handleSearch(refForm.value)
	}



	const rules = reactive({
		tableName: [{
			required: true,
			message: '请输入表名',
			trigger: 'change' | 'blur',
		}]
	})

	const form = ref({
		tableName: 'T_TEST'
	})
	const tableName = ref('')
	const handleInputTableName = (value) => {
		form.value.tableName = value.toUpperCase()
	}

	const handleSearch = (refForm) => {
		refForm.validate((valid, fields) => {
			if (valid) {
				getRefRule()
				refPage.value.handleSearch()
			} else {
				console.log('error submit!!')
				return false
			}
		})
	}

	let refPage = ref()
	let rulesPage = ref([])
	let ruleFormRef = ref()
	const next = (refForm) => {
		if (active.value == 5) {
			return
		}
		refForm.validate((valid, fields) => {
			if (valid) {
				getRefRule()
				ruleFormRef = refPage.value.ruleFormRef
				ruleFormRef.validateField(rulesPage.value, valid => {
					if (valid) {
						refPage.value.handleSave(() => {
							saveAndSearch()
						})
					} else {
						console.log('error submit!!')
						return false
					}
				})
			} else {
				console.log('error submit!!')
				return false
			}
		})
	}

	const last = (refForm) => {
		if (active.value == 0) {
			return
		}
		refForm.validate((valid, fields) => {
			if (valid) {
				getRefRule()
				ruleFormRef = refPage.value.ruleFormRef
				ruleFormRef.validateField(rulesPage.value, valid => {
					if (valid) {
						refPage.value.handleSave(() => {
							saveAndBack()
						})
					} else {
						console.log('error submit!!')
						return false
					}
				})
			} else {
				console.log('error submit!!')
				return false
			}
		})
	}
	const go = (refForm) => {
		active.value = 5
		handleSearch(refForm )
	}


	const handleSave = (refForm) => {
		refForm.validate((valid, fields) => {
			if (valid) {
				getRefRule()
				ruleFormRef = refPage.value.ruleFormRef
				ruleFormRef.validateField(rulesPage.value, valid => {
					if (valid) {
						refPage.value.handleSave(() => {
							console.log('success submit!!')
						})
					} else {
						console.log('error submit!!')
						return false
					}
				})
			} else {
				console.log('error submit!!')
				return false
			}
		})
	}


	const handleGenerate = (refForm) => {
		refForm.validate((valid, fields) => {
			if (valid) {
				getRefRule()
				ruleFormRef = refPage.value.ruleFormRef
				ruleFormRef.validateField(rulesPage.value, valid => {
					if (valid) {
						refGenerate.value.handleGenerate()
					} else {
						console.log('error submit!!')
						return false
					}
				})

			} else {
				console.log('error submit!!')
				return false
			}
		})
	}
</script>

<style>
</style>