<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="WEB表单策略" />
				<el-step title="WEB表格策略" />
				<el-step title="移动端策略" /> 
				<el-step title="一键生成" />
			</el-steps>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-form label-width="auto" ref="refFormTop" :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 v-if="active <5 " label=" ">
					<el-button type="primary" @click="handleSearch(refFormTop)">查询</el-button>
					<el-button type="success" @click="handleSave(refFormTop)">保存</el-button>
				</el-form-item>
				<el-form-item v-else label=" ">
					<el-button type="primary" @click="handleSearch(refFormTop)">查询</el-button>
					<el-button type="success" @click="handleGenerate(refFormTop)">一键生成</el-button>
				</el-form-item>
				<el-form-item label=" ">
					<el-button @click="last(refFormTop)">上一步</el-button>
					<el-button @click="next(refFormTop)">下一步</el-button>
					<el-button @click="go(refFormTop)">直接去生成</el-button>
				</el-form-item> 
			</el-form>
		</el-card>

		<div v-if="active==0">
			<Db :tableName="form.tableName" ref="refDb"></Db>
		</div>
		<div v-else-if="active==1">
			<Info :tableName="form.tableName" ref="refInfo"></Info>
		</div>
		<div v-else-if="active==2">
			<Form :tableName="form.tableName" ref="refForm"></Form>
		</div>
		<div v-else-if="active==3">
			<Table :tableName="form.tableName" ref="refTable"></Table>
		</div>
		<div v-else-if="active==4">
			<App :tableName="form.tableName" ref="refApp"></App>
		</div>
		<div v-else-if="active==5">
			<Generate :tableName="form.tableName" ref="refGenerate"></Generate>
		</div>

	</div>
</template>

<script setup>
	import Db from './db.vue'
	import Info from './info.vue'
	import Form from './form.vue'
	import Table from './table.vue'
	import App from './app.vue'
	import Generate from './generate.vue'


	import Code from './code.vue'
	import Column from './column.vue'
	import Other from './other.vue'

	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 refInfo = ref()
	const refDb = ref()
	const refForm = ref()
	const refTable = ref()
	const refCode = ref()
	const refColumn = ref()
	const refOther = ref()
	const refGenerate = ref()
	const refApp = ref()


	const refFormTop = ref()
	const active = ref(0)



	const getRefRule = () => {
		switch (active.value) {
			case 0:
				if (refDb.value.form.dbType == 'oracle') {
					refPage.value = refDb.value
					rulesPage.value = ['tablespace']
				} else {
					refPage.value = refDb.value
					rulesPage.value = []
				}
				break
			case 1:
				refPage.value = refInfo.value
				rulesPage.value = ['javaPath', 'tablePrefix', 'moduleName', 'parentPackageName','vuePath','appPath', 'h5Path','fixedFlag', 'processFlag', 'attachmentFlag','menu.menuName']
				break
			case 2:
				refPage.value = refForm.value
				rulesPage.value = []
				break
			case 3:
				refPage.value = refTable.value
				rulesPage.value = []
				break
			case 4:
				refPage.value = reApp.value
				rulesPage.value = [] 
				break
			case 5:
				refPage.value = refGenerate.value
				rulesPage.value.push('checkList')
				break
		}
	}

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



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

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

	const handleSearch = (refFormTop) => {
		refFormTop.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 = (refFormTop) => {
		if (active.value == 5) {
			return
		}
			saveAndSearch()
			
			
		// refFormTop.validate((valid, fields) => {
		// 	if (valid) {
		// 		 getRefRule()
		// 		 if(rulesPage.value.length>0){
		// 			 ruleFormRef = refPage.value.ruleFormRef
		// 			 ruleFormRef.validateField(rulesPage.value, valid => {
		// 			 	if (valid) {
		// 			 		refPage.value.handleSave(() => {
		// 			 			saveAndSearch()
		// 			 		})
		// 			 	} else {
		// 			 		console.log('error submit!!')
		// 			 		return false
		// 			 	}
		// 			 })
		// 		 }else {
		// 			 refPage.value.handleSave(() => {
		// 			 	saveAndSearch()
		// 			 })
		// 		 }
				
		// 	} else {
		// 		console.log('error submit!!')
		// 		return false
		// 	}
		// })
	}

	const last = (refFormTop) => {
		if (active.value == 0) {
			return
		}
		saveAndBack()
		// refFormTop.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 = (refFormTop) => {
		active.value = 5
		handleSearch(refFormTop)
	}


	const handleSave = (refFormTop) => {
		refFormTop.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 = (refFormTop) => {
		refFormTop.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>