<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-button type="warning" @click="handleSearch">重置</el-button>
			<el-button type="primary" @click="handleAddTable">新增</el-button>
			<el-button type="primary" @click="handleAddColumn">新增列</el-button>
			<el-button type="success" @click="handleSave">保存</el-button>
			<el-button type="danger" @click="handleRemoveTable">删除</el-button>
		</el-card>


		<el-card :body-style="cardBodyStyle">
			<el-tabs v-model="activeName" type="border-card" @tab-click="handleTabsClick">
				<el-tab-pane v-for="(item,index) in tableTabs" :key="index" :label="item.tName" :name="item.tName">
					<el-table :data="tableDataColumn" border>
						<el-table-column prop="prop" label="字段名" width="140" header-align="center" align="center"
							show-overflow-tooltip>
						</el-table-column>
						<el-table-column label="列表" header-align="center">
							<el-table-column prop="label" label="表头" width="120" header-align="center" align="center"
								show-overflow-tooltip> </el-table-column>
							<el-table-column prop="headerAlign" label="表头对齐" width="120" header-align="center"
								align="center" show-overflow-tooltip>
								<template #default="scope">
									<el-select v-model="scope.row.headerAlign" size="small" style="width: 100px;">
										<el-option label="居中" value="center"> </el-option>
										<el-option label="左对齐" value="left"> </el-option>
										<el-option label="右对齐" value="right"> </el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column prop="showFlag" label="显示" width="80" header-align="center" align="center"
								show-overflow-tooltip>
								<template #default="scope">
									<el-checkbox v-model="scope.row.showFlag" true-label="1"
										false-label="0"></el-checkbox>
								</template>
							</el-table-column>

							<el-table-column prop="width" label="列宽" width="80" header-align="center" align="center"
								show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="align" label="对齐" width="120" header-align="center" align="center"
								show-overflow-tooltip>
								<template #default="scope">
									<el-select v-model="scope.row.align" size="small" style="width: 100px;">
										<el-option label="居中" value="center"> </el-option>
										<el-option label="左对齐" value="left"> </el-option>
										<el-option label="右对齐" value="right"> </el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column prop="sortable" label="排序" width="80" header-align="center" align="center"
								show-overflow-tooltip>
								<template #default="scope">
									<el-checkbox v-model="scope.row.sortable" true-label="1"
										false-label="0"></el-checkbox>
								</template>
							</el-table-column>
							<el-table-column prop="colType" label="类型" width="80" header-align="center" align="center"
								show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="formatter" label="格式化" width="80" header-align="center"
								align="center" show-overflow-tooltip>
							</el-table-column>
						</el-table-column>
						<el-table-column label="操作" header-align="center" align="center" width="160px">
							<template #default="scope">
								<el-button size="small" plain type="warning"
									@click="handleEdit(scope.row)">编辑</el-button>
								<el-button size="small" plain type="danger"
									@click="handleRemove(scope.row,scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

				</el-tab-pane>
			</el-tabs>
		</el-card>


		<el-dialog :close-on-click-modal="false" draggable v-model="dialogVisibleTName" width="400px">
			<el-form :model="tableTemp" label-width="100px" :inline="true">
				<el-form-item label="表格名称">
					<el-input v-model="tableTemp.tName" style="width: 200px;"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSaveTName">保存</el-button>
					<el-button type="danger" @click="()=>dialogVisibleTName=false">取消</el-button>
				</div>
			</template>
		</el-dialog>


		<el-dialog :close-on-click-modal="false" draggable v-model="dialogVisibleTable" width="1200px">
			<el-form :model="table" label-width="100px" :inline="true">
				<el-form-item label="表格名称">
					<el-input v-model="table.tName" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input-number v-model="table.sort" :min="1" :max="100" style="width: 200px;" />
				</el-form-item>
				<el-form-item label="显示">
					<el-switch v-model="table.showFlag" style="width: 200px;" active-value="1" inactive-value="0" />
				</el-form-item>
				<el-form-item label="列属性">
					<el-input v-model="table.prop" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="列标签">
					<el-input v-model="table.label" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="列宽">
					<el-input v-model="table.width" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="表头对齐">
					<el-select v-model="table.headerAlign" style="width: 200px;" clearable>
						<el-option label="居中" value="center" />
						<el-option label="左对齐" value="left" />
						<el-option label="右对齐" value="right" />
					</el-select>
				</el-form-item>
				<el-form-item label="内容对齐">
					<el-select v-model="table.align" style="width: 200px;" clearable>
						<el-option label="居中" value="center" />
						<el-option label="左对齐" value="left" />
						<el-option label="右对齐" value="right" />
					</el-select>
				</el-form-item>
				<el-form-item label="可排序">
					<el-switch v-model="table.sortable" style="width: 200px;" active-value="1" inactive-value="0" />
				</el-form-item>
				<el-form-item label="导出标记">
					<el-switch v-model="table.exportFlag" style="width: 200px;" active-value="1" inactive-value="0" />
				</el-form-item>

			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSaveTable">保存</el-button>
					<el-button type="danger" @click="()=>dialogVisibleTable=false">取消</el-button>
				</div>
			</template>
		</el-dialog>



	</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({
		tableName: String,
		default:''
	})


	const form = ref({
		vuePath: '',
		appPath: ''
	})
	const ruleFormRef = ref()
	const rules = reactive()


	const tableTabs = ref([])
	const queryTableTabs = () => {
		var url = 'framework/LowCodePersonal/queryTabsByMenuId'
		var param = {
			menuId: form.value.menu.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableTabs.value = response.data.data
				if (tableTabs.value.length > 0) {
					activeName.value = tableTabs.value[0].tName
					queryTable()
				}
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}

	const tableDataColumn = ref([])
	const tableDataTable = ref([])
	const queryTable = () => {
		console.log(form.value.menu.id)
		console.log(activeName.value)
		var url = 'framework/LowCodePersonal/queryByMenuIdTName'
		var param = {
			menuId: form.value.menu.id,
			tName: activeName.value,
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableDataColumn.value = response.data.data
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}





	const handleTabsClick = (tab, event, item) => {
		activeName.value = tab.props.name
		queryTable()
	}



	const handleSaveTName = () => {
		tableTabs.value.push({
			tName: tableTemp.value.tName
		})
		activeName.value = tableTemp.value.tName
		dialogVisibleTName.value = false
		tableDataColumn.value = tableData.value
	}





	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
				queryTableTabs()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
				tableData.value = []
			}
		})
	}

	const handleSave = () => {
		for (var item of tableData.value) {
			item.menuId = form.value.menu.id
			item.tName = activeName.value
			item.userId = 'default'
		}
		var url = 'framework/LowCodePersonal/saveDefault'
		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({
					message: '保存成功',
					type: 'success',
				})
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}

	const handleSaveTable = () => {
		var url = 'framework/LowCodePersonal/saveColumn'
		var param = {
			json: JSON.stringify(table.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				queryTable()
				dialogVisibleTable.value = false
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}


	const handleRemoveTable = () => {
		var url = 'framework/LowCodePersonal/removeDefault'
		var param = {
			menuId: form.value.menu.id,
			tName: activeName.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				queryTableTabs()
				dialogVisibleTable.value = false
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}




	const dialogVisibleTable = ref(false)
	const dialogVisibleTName = ref(false)

	const activeName = ref('')

	const tableTemp = ref({
		tName: ''
	})
	const handleAddTable = () => {
		dialogVisibleTName.value = true
		tableTemp.value.tName = ''

	}
	const handleAddColumn = () => {
		table.value = {
			menuId: form.value.menu.id,
			tName: activeName.value,
			sort: tableDataColumn.value.length,
			userId:'default'
		}

		dialogVisibleTable.value = true
	}



	const table = ref({})
	const handleEdit = (row) => {
		table.value = row
		dialogVisibleTable.value = true
	}


	const handleRemove = (row, index) => {
		console.log(index)

		ElMessageBox.confirm('此操作将删除该数据,非逻辑删除,是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {

			var url = 'framework/LowCodePersonal/removeColumn'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					queryTable()
					ElMessage({
						type: 'success',
						message: '操作成功'
					});
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败' + response.data.msg,
					});
				}
			});

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






		// tableData.value.splice(index, 1)
	}



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

<style>
</style>