<template>
	<div>
		<!-- 		<el-card :body-style="cardBodyStyle">
			<el-button type="success" @click="handleCreate()">建表</el-button>
			<el-button type="success" @click="handleCreateSqlOracle()">sql-oracle</el-button>
			<el-button type="success" @click="handleCreateSqlMysql()">sql-mysql</el-button>
			<el-button type="success" @click="handleCode()">生成代码</el-button>
			<el-button type="success" @click="handleGenerate()">一键生成</el-button>
		</el-card> -->


		<el-form label-width="80px" ref="ruleFormRef" :model="form" :rules="rules"> 
		<el-card :body-style="cardBodyStyle">
			<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-card>
			<el-row>
				<el-col :span="12">
					<el-card :body-style="cardBodyStyle">
						<el-form-item label="生成内容" prop="checkList">
							<el-transfer v-model="form.checkList" :data="checks" />
						</el-form-item>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card :body-style="cardBodyStyle">
						<el-form-item label="生成结果">
							<el-timeline style="max-width: 600px">
								<el-timeline-item v-for="(activity, index) in activities" :key="index"
									:icon="activity.icon" :type="activity.type" :color="activity.color"
									:size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
									{{ activity.content }}
								</el-timeline-item>
							</el-timeline>
						</el-form-item>
					</el-card>
				</el-col>
			</el-row>

		</el-form>

	</div>
</template>


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

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

	onMounted(() => {
 handleSearch()
	})
	const props = defineProps({
		tableName: String
	})


	const form = ref({
		checkList: []
	})
	const rules = reactive({
		checkList: [{
			required: true,
			message: '请选择列类型',
			trigger: 'change' | 'blur',
		}],
	})

	const tableData = ref([])
	const handleSearch = () => {
		var url = 'framework/LowCode/query'
		var param = {
			tableName: props.tableName
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				form.value = response.data.data
				tableData.value = response.data.data.fields
				if (!form.value.menu) {
					form.value.menu = {
						menuId: '',
						menuName: ''
					}
				}
			} 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: '操作成功!'
				})
				callback()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				})
			}
		})
	}

	const handleDrop = async () => {
		return new Promise((resolve) => {
			var url = form.value.serviceName+'/Generate/drop'
			var param = {
				form: JSON.stringify(form.value),
				json: JSON.stringify(tableData.value)
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == 0) {
					resolve('删表成功')
				} else {
					resolve('删表失败!' + response.data.msg)

				}
			})
		})
	}

	const handleCreate = async () => {
		return new Promise((resolve) => {
			var url = form.value.serviceName+'/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) {
					resolve('建表成功')
				} else {
					resolve('建表失败!' + response.data.msg)

				}
			})
		})
	}
	const handleCreateSqlOracle = async () => {
		data.value = await createSql('oracle')
		activities.value.push({
			content: data.value,
			timestamp: tools.tool.getCurrentDateTime(),
			size: 'large',
			type: 'primary',
		})
	}
	const handleCreateSqlMysql = async () => {
		data.value = await createSql('mysql')
		activities.value.push({
			content: data.value,
			timestamp: tools.tool.getCurrentDateTime(),
			size: 'large',
			type: 'primary',
		})
	}


	const createSql = async (dbType) => {
		return new Promise((resolve) => {
			var url = form.value.serviceName+'/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) {
					resolve(dbType + '建表sql成功')
				} else {
					resolve(dbType + '建表sql建表失败!' + response.data.msg)
				}
			})
		})
	}


	const handleDo = async (label, type) => {
		return new Promise((resolve) => {
			var url = form.value.serviceName+'/Generate/generate'
			var param = {
				jsonForm: JSON.stringify(form.value),
				jsonFields: JSON.stringify(tableData.value),
				type: type
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == 0) {
					resolve(label + '代码生成成功')
				} else {
					resolve(label + '代码生成失败!' + response.data.msg)
				}
			})
		})
	}
	
	
	const handleCustomer = async (label, type) => {
		return new Promise((resolve) => {
			var url = 'framework/LowCodePersonal/generate'
			var param = {
				tableName: props.tableName 
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == 0) {
					resolve(label + '代码生成成功')
				} else {
					resolve(label + '代码生成失败!' + response.data.msg)
				}
			})
		})
	}




	const activities = ref([])
	let data = ref(null);


	const checks = ref([
		// {
		// 	key: 0,
		// 	label: "删除",
		// }, 
		{
			key: 0,
			label: "oracle语句",
		}, {
			key: 1,
			label: "mysql语句",
		},
		{
			key: 2,
			label: "建表",
		},
		{
			key: 3,
			label: "后端",
		},
		{
			key: 4,
			label: "移动端",
		},
		{
			key: 5,
			label: "H5端",
		},
		{
			key: 6,
			label: "前端",
		},
		{
			key: 7,
			label: "个性化",
		}
	])


	const handleGenerate = async () => {
		activities.value = []
		for (const item of form.value.checkList) {
			console.log(item)
			switch (item) {
				// case 0:
				// 	data.value = await handleDrop()
				// 	activities.value.push({
				// 		content: data.value,
				// 		timestamp: tools.tool.getCurrentDateTime(),
				// 		size: 'large',
				// 		type: 'primary',
				// 	})
				// 	break
				case 0:
					data.value = await createSql('oracle')
					activities.value.push({
						content: data.value,
						timestamp: tools.tool.getCurrentDateTime(),
						size: 'large',
						type: 'primary',
					})
					break
				case 1:
					data.value = await createSql('mysql')
					activities.value.push({
						content: data.value,
						timestamp: tools.tool.getCurrentDateTime(),
						size: 'large',
						type: 'primary',
					})
					break
				case 2:
					data.value = await handleCreate()
					activities.value.push({
						content: data.value,
						timestamp: tools.tool.getCurrentDateTime(),
						size: 'large',
						type: 'primary',
					})
					break
				case 3:
					data.value = await handleDo(checks.value[3].label, 'code')
					activities.value.push({
						content: data.value,
						timestamp: tools.tool.getCurrentDateTime(),
						size: 'large',
						type: 'primary',
					})
					break
				case 4:
					data.value = await handleDo(checks.value[4].label, 'app')
					activities.value.push({
						content: data.value,
						timestamp: tools.tool.getCurrentDateTime(),
						size: 'large',
						type: 'primary',
					})
					break
				case 5:
					data.value = await handleDo(checks.value[5].label, 'h5')
					activities.value.push({
						content: data.value,
						timestamp: tools.tool.getCurrentDateTime(),
						size: 'large',
						type: 'primary',
					})
					break
				case 6:
					data.value = await handleDo(checks.value[6].label, 'column')
					activities.value.push({
						content: data.value,
						timestamp: tools.tool.getCurrentDateTime(),
						size: 'large',
						type: 'primary',
					})
					break
					case 7:
						data.value = await handleCustomer(checks.value[7].label, 'column')
						activities.value.push({
							content: data.value,
							timestamp: tools.tool.getCurrentDateTime(),
							size: 'large',
							type: 'primary',
						})
						break
			}

		}

	}




	// const activities = [{
	// 		content: 'Custom icon',
	// 		timestamp: '2018-04-12 20:46',
	// 		size: 'large',
	// 		type: 'primary',
	// 	},
	// 	{
	// 		content: 'Custom color',
	// 		timestamp: '2018-04-03 20:46',
	// 		color: '#0bbd87',
	// 	},
	// 	{
	// 		content: 'Custom size',
	// 		timestamp: '2018-04-03 20:46',
	// 		size: 'large',
	// 	},
	// 	{
	// 		content: 'Custom hollow',
	// 		timestamp: '2018-04-03 20:46',
	// 		type: 'primary',
	// 		hollow: true,
	// 	},
	// 	{
	// 		content: 'Default node',
	// 		timestamp: '2018-04-03 20:46',
	// 	},
	// ]



	const ruleFormRef = ref()
	defineExpose({
		handleSearch,
		handleSave,
		handleGenerate,
		ruleFormRef
	})
</script>

<style>
</style>