<template>
	<div>
		<el-row>
			<el-col :span="6">
				<el-card :body-style="cardBodyStyle">
					<el-select v-model="application" clearable style="width:200px; " value-key="id"
						@change="changeApplication">
						<el-option v-for="option in options" :key="option.id" :value="option"
							:label="option.applicationName" />
					</el-select>
					<el-button type="primary" plain @click="handleAddTop">新增顶级</el-button>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-tree :data="dataTree" :props="defaultProps" node-key="id" @node-click="handleNodeClick"
						:expand-on-click-node="false" highlight-current :default-expanded-keys="expandedKeys">
						<template #default="{ node, data }">
							<span class="custom-tree-node">
								<span>{{ node.label }}</span>
								<span>
									<el-icon :size="16" v-if="data.children.length<1" @click="handleDelete(node, data)"
										color="#F56C6C">
										<Delete />
									</el-icon>
									<el-icon :size="16" @click="handleEdit(node, data)" color="#E6A23C">
										<Edit />
									</el-icon>
								</span>
							</span>
						</template>
					</el-tree>
				</el-card>
			</el-col>

			<el-col :span="18">
				<el-card :body-style="cardBodyStyle">
					<el-button type="primary" @click="handleAdd">新增</el-button>
					<el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
					<el-button type="primary" @click="handleAddNewForm">新增表单</el-button>
					<el-button type="primary" @click="handleAddNewTable">新增表</el-button>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-form :model="menu" label-width="70px" :inline="true" ref="ruleFormRef" :rules="rules">
						<el-form-item label="id" v-if="false">
							<el-input v-model="menu.id"></el-input>
						</el-form-item>
						<!-- <el-form-item label="所属应用">
							<el-input v-model="menu.applicationId" disabled style="width: 200px;"></el-input>
						</el-form-item> -->
						<el-form-item label="所属应用">
							<el-input v-model="application.applicationName" disabled style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="上级编码">
							<el-input v-model="menu.menuPid" disabled style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="界面编码">
							<el-input v-model="menu.menuCode" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="界面名称">
							<el-input v-model="menu.menuName" style="width: 200px;"></el-input>
						</el-form-item>

						<el-form-item label="bs路径" prop="menuOpenBs">
							<el-input v-model="menu.menuOpenBs" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="bs图标">
							<el-input v-model="menu.menuBsIcon" style="width: 200px;"></el-input>
						</el-form-item>

						<el-form-item label="ios路径">
							<el-input v-model="menu.menuOpenIos" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="安卓路径">
							<el-input v-model="menu.menuOpenAnd" style="width: 200px;"></el-input>
						</el-form-item>

						<el-form-item label="APP排序">
							<el-input v-model="menu.menuAppOrder" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="APP图片">
							<el-input v-model="menu.menuAppImg" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="APP图标">
							<el-input v-model="menu.menuAppIcon" style="width: 200px;"></el-input>
						</el-form-item>

						<el-form-item label="是否显示">
							<el-radio-group v-model="menu.menuShow" @change="handleRadioChangeShow"
								style="width: 200px;">
								<el-radio :label="0">是</el-radio>
								<el-radio :label="9">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
				</el-card>

				<el-tabs v-model="activeName" type="border-card" @tab-click="handleTabsClick">
					<el-tab-pane label="按钮" name="button">
						<el-card :body-style="cardBodyStyle">
							<el-button type="primary" plain @click="handleGenerate">生成</el-button>
							<el-button type="primary" plain @click="handleAddButton">自定义</el-button>
						</el-card>
						<el-card :body-style="cardBodyStyle">
							<el-table :data="tableDataButton" border>
								<el-table-column prop="buttonName" label="名称" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="area" label="位置" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="buttonSize" label="尺寸" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="buttonType" label="颜色" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="click" label="方法" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="icon" label="图表" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column label="操作" header-align="center" align="center" width="160"
									fixed="right">
									<template #default="scope">
										<el-button plain size="small" type="warning"
											@click="handleModifyButton(scope.row)">编辑</el-button>
										<el-button plain size="small" type="danger"
											@click="handleRemoveButton(scope.row )">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-tab-pane>


					<el-tab-pane v-for="(item,index) in formTabs" :key="index" :label="item.formType+'-'+item.formName"
						:name="'form-'+item.formType+'-'+item.formName">
						<el-card :body-style="cardBodyStyle">
							<el-button type="primary" plain
								@click="handleAddForm(item.formType,item.formName)">新增</el-button>
							<el-button type="primary" plain @click="handleGenerateObject">生成对象</el-button>
						</el-card>
						<el-card :body-style="cardBodyStyle">
							<el-table :data="tableDataForm" border>
								<el-table-column prop="label" label="标签" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="prop" label="属性" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="type" label="类型" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="dicType" label="字典" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="url" label="url" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column label="操作" header-align="center" align="center" width="160"
									fixed="right">
									<template #default="scope">
										<el-button plain size="small" type="warning"
											@click="handleModifyForm(scope.row)">编辑</el-button>
										<el-button plain size="small" type="danger"
											@click="handleRemoveForm(scope.row )">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-tab-pane>


					<el-tab-pane v-for="(item,index) in tableTabs" :key="index" :label="'表格-'+item.tName"
						:name="'table-'+item.tName">
						<el-card :body-style="cardBodyStyle">
							<el-button type="primary" plain @click="handleAddTable(item.tName)">新增</el-button>
						</el-card>
						<el-card :body-style="cardBodyStyle">
							<el-table :data="tableDataTable" border>
								<el-table-column prop="label" label="标签" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="prop" label="属性" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="showFlag" label="显示" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="headerAlign" label="表头对齐" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="align" label="内容对齐" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column label="操作" header-align="center" align="center" width="160"
									fixed="right">
									<template #default="scope">
										<el-button plain size="small" type="warning"
											@click="handleModifyTable(scope.row)">编辑</el-button>
										<el-button plain size="small" type="danger"
											@click="handleRemoveTable(scope.row )">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>

		<el-dialog :close-on-click-modal="false" draggable="" v-model="dialogVisibleButton" width="800px">
			<el-form :model="button" label-width="70px" :inline="true">
				<el-form-item label="id" v-if="false">
					<el-input v-model="button.id"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="button.buttonName" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="事件">
					<el-input v-model="button.click" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="图标">
					<el-input v-model="button.icon" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="位置">
					<el-input v-model="button.area" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="button.sort" style="width: 200px;"></el-input>
				</el-form-item>
				<div>
					<el-form-item label="尺寸">
						<el-radio-group v-model="button.buttonSize" style="width: 500px;">
							<el-radio-button label="mini">mini</el-radio-button>
							<el-radio-button label="small">small</el-radio-button>
							<el-radio-button label="medium ">medium </el-radio-button>
							<el-radio-button label="large">large</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="类型">
						<el-radio-group v-model="button.buttonType" style="width: 500px;">
							<el-radio-button label="primary">primary</el-radio-button>
							<el-radio-button label="danger">danger</el-radio-button>
							<el-radio-button label="info">info</el-radio-button>
							<el-radio-button label="success">success</el-radio-button>
							<el-radio-button label="warning">warning</el-radio-button>
							<el-radio-button label="text">text</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</div>
				<el-form-item label="朴素">
					<el-radio-group v-model="button.plain">
						<el-radio-button :label="1">是</el-radio-button>
						<el-radio-button :label="0">否</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="圆角">
					<el-radio-group v-model="button.round">
						<el-radio-button :label="1">是</el-radio-button>
						<el-radio-button :label="0">否</el-radio-button>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="圆形">
					<el-radio-group v-model="button.circle">
						<el-radio-button :label="1">是</el-radio-button>
						<el-radio-button :label="0">否</el-radio-button>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="禁用">
					<el-radio-group v-model="button.disabled">
						<el-radio-button :label="1">是</el-radio-button>
						<el-radio-button :label="0">否</el-radio-button>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSaveButton">保存</el-button>
					<el-button type="danger" @click="handleCancelSaveButton">取消</el-button>
				</div>
			</template>
		</el-dialog>


		<el-dialog :close-on-click-modal="false" draggable v-model="dialogVisibleForm" width="1200px">
			<el-form :model="form" label-width="100px" :inline="true">
				<el-form-item label="id" v-if="false">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="表单类型">
					<el-select v-model="form.formType" style="width: 200px;" clearable>
						<el-option label="查询" value="查询" />
						<el-option label="录入" value="录入" />
					</el-select>
				</el-form-item>
				<el-form-item label="表单名称">
					<el-input v-model="form.formName" style="width: 200px;"></el-input>
				</el-form-item>

				<el-form-item label="排序">
					<el-input-number v-model="form.sort" :min="1" :max="100" style="width: 200px;" />
				</el-form-item>
				<div>
					<el-form-item label="控件类型">
						<el-select v-model="form.type" style="width: 200px;" clearable>
							<el-option label="输入框" value="input" />
							<el-option label="下拉框" value="select" />
							<el-option label="单选框" value="radio" />
							<el-option label="日期" value="date" />
							<el-option label="日期范围" value="daterange" />
							<el-option label="时间范围" value="datetimerange" />
						</el-select>
					</el-form-item>
					<el-form-item label="控件属性">
						<el-input v-model="form.prop" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="控件标签">
						<el-input v-model="form.label" style="width: 200px;"></el-input>
					</el-form-item>


				</div>
				<div v-if="(form.type=='select'||form.type=='radio')  ">
					<el-form-item label="字典类型">
						<el-input v-model="form.dicType" style="width: 200px;"></el-input>
					</el-form-item>
				</div>

				<div v-if="form.type=='input'">
					<el-form-item label="包含按钮">
						<el-select v-model="form.searchButton" style="width: 200px;" clearable>
							<el-option label="是" value="1" />
							<el-option label="否" value="0" />
						</el-select>
					</el-form-item>
					<el-form-item label="按钮回调">
						<el-input v-model="form.searchCallback" style="width: 200px;"></el-input>
					</el-form-item>
				</div>

				<div v-if="(form.type=='select'||form.type=='radio')  ">
					<el-form-item label="自定义url">
						<el-input v-model="form.url" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="自定义参数">
						<el-input v-model="form.param" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="option标签">
						<el-input v-model="form.optionLabel" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="option值">
						<el-input v-model="form.optionValue" style="width: 200px;"></el-input>
					</el-form-item>
				</div>

			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSaveForm">保存</el-button>
					<el-button type="danger" @click="()=>dialogVisibleForm=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>


		<el-dialog :close-on-click-modal="false" draggable v-model="dialogVisibleObject" width="600px">
			<el-input v-model="objText" style="width: 500px" :rows="tableDataForm.length+2" type="textarea" />
		</el-dialog>
	</div>
</template>

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

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

	onMounted(() => {
		getApplications()
		// getDataTree()
	})


	const dataTree = ref([])
	const getDataTree = () => {
		// var url = 'framework/SysMenu/queryAllMenu'
		var url = 'framework/SysMenu/queryForApplication'
		var param = {
			applicationId: application.value.id
		}
		proxy.$axios.get(url, param).then(response => {
			dataTree.value = response.data.data
		});
	}



	const defaultProps = ref({
		children: 'children',
		label: 'menuName'
	})
	const expandedKeys = ref([])
	const selectedMenu = ref({})
	const dialogVisible = ref(false)
	const menu = ref({
		id: '',
		menuPid: '',
		menuCode: '',
		menuName: '',
		menuBsIcon: '',
		menuOpenBs: '',

		menuOpenIos: '',
		menuOpenAnd: '',
		menuAppOrder: '',
		menuAppImg: '',
		menuAppIcon: '',

		menuShow: '',
		menuQuery: '',
	})


	const rules = reactive({
		menuOpenBs: [{
			required: true,
			message: '请输入bs路径',
			trigger: 'change' | 'blur'
		}]
	})

	const handleAddTop = () => {
		dialogVisible.value = true
		menu.value = {
			id: '',
			menuPid: '0',
			menuCode: '',
			menuName: '',
			menuBsIcon: '',
			menuOpenBs: '',
			menuOpenIos: '',
			menuOpenAnd: '',
			menuAppOrder: '',
			menuAppImg: '',
			menuAppIcon: '',
			menuShow: 0,
			menuQuery: 0,
			applicationId: application.value.id
		}

		var url = 'framework/SysMenu/queryNewCode'
		var param = {
			fid: '0'
		}
		proxy.$axios.get(url, param).then(response => {
			menu.value.menuCode = response.data.data.code
		});
	}


	const handleAdd = () => {
		if (selectedMenu.value == null || selectedMenu.value.menuPid == null) {
			ElMessage({
				type: 'error',
				message: '请选择上级菜单'
			});
			return
		}
		// dialogVisible.value = true
		menu.value = {
			id: '',
			menuPid: selectedMenu.value.menuCode,
			menuCode: '',
			menuName: '',
			menuBsIcon: '',
			menuOpenBs: '',

			menuOpenIos: '',
			menuOpenAnd: '',
			menuAppOrder: '',
			menuAppImg: '',
			menuAppIcon: '',

			menuShow: 0,
			menuQuery: 0,
			applicationId: application.value.id
		}
		var url = 'framework/SysMenu/queryNewCode'
		var param = {
			fid: menu.value.menuPid
		}
		proxy.$axios.get(url, param).then(response => {
			menu.value.menuCode = response.data.data.code
			menu.value.menuOpenBs = '/'+response.data.data.code
		})
	}



	const handleEdit = (node, data) => {
		console.log('handleEdit')


		dialogVisible.value = true
		menu.value = data
		expandedKeys.value = []
		expandedKeys.value.push(data.id)
	}
	const ruleFormRef = ref()
	const handleSave = (ruleFormRef) => {
		ruleFormRef.validate((valid, fields) => {
			if (valid) {
				var url = 'framework/SysMenu/save'
				var param = {
					json: JSON.stringify(menu.value)
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == '0') {
						dialogVisible.value = false
						getTableData()
						getDataTree()

						ElMessage({
							message: '保存成功',
							type: 'success',
						})
					} else {
						ElMessage({
							message: '操作失败' + response.data.msg,
							type: 'error'
						})
					}
				});
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	//保存取消按钮事件   关闭编辑对话框
	const handleCancelSave = () => {
		dialogVisible.value = false
	}


	// 删除按钮事件
	const handleDelete = (node, data) => {
		ElMessageBox.confirm(
				'确定删除本条记录?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {

				var url = 'framework/SysMenu/remove'
				var param = {
					id: data.id
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						getTableData()
						getDataTree()
						ElMessage({
							message: '保存成功',
							type: 'success',
						})
					} else {
						ElMessage({
							message: '操作失败' + response.data.msg,
							type: 'error'
						})
					}
				})

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





	const handleNodeClick = (data) => {
		menu.value = data
		selectedMenu.value = data
		search()
		expandedKeys.value = []
		expandedKeys.value.push(data.id)
		queryMenuButton()
		// queryMenuForm() 
		queryFormTabs()
		queryTableTabs()
	}






	/**
	 *   查询 
	 */
	const tableData = ref([])

	const search = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		var url = 'framework/SysMenu/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			pid: selectedMenu.value.menuCode,
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				})
			}
		})
	}
	/**
	 *   查询 
	 */




	/**
	 * 分页 
	 */

	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(10)


	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页 
	 */

	const activeName = ref('button')

	const tableDataButton = ref([])

	const handleRowClick = (row, column, event) => {
		selectedMenu.value = row
		queryMenuButton()
	}
	const queryMenuButton = () => {
		var url = 'framework/SysMenu/queryMenuButton'
		var param = {
			menuId: selectedMenu.value.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				console.log(response.data.data)
				tableDataButton.value = response.data.data
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}
	const tableDataForm = ref([])
	const queryMenuForm = () => {
		var url = 'framework/MenuForm/queryMenuForm'
		var param = {
			menuId: selectedMenu.value.id,
			formType: selectFormType.value,
			formName: selectFormName.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableDataForm.value = response.data.data
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}




	const handleGenerate = () => {
		if (selectedMenu.value.id == '') {
			ElMessage({
				type: 'error',
				message: '请选择菜单',
			});
			return
		}
		var url = 'framework/SysMenu/generateButton'
		var param = {
			menuId: selectedMenu.value.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage({
					type: 'success',
					message: '保存成功!',
				});
				queryMenuButton()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}



	const button = ref()
	const dialogVisibleButton = ref(false)
	const handleAddButton = () => {
		if (!selectedMenu || selectedMenu == null || selectedMenu.value.id == '') {
			ElMessage({
				type: 'error',
				message: '请选择菜单',
			});
			return
		}

		dialogVisibleButton.value = true
		button.value = {
			id: '',
			menuId: selectedMenu.value.id,
			buttonName: '自定义',
			buttonSize: 'mini',
			buttonType: 'primary',
			area: '',
			plain: 0,
			round: 0,
			circle: 0,
			loading: 0,
			disabled: 0,
			icon: '',
			autofocus: 0,
			click: 'action',
			sort: tableDataButton.value.length + 1,
		}

	}

	const handleSaveButton = () => {
		var url = 'framework/SysMenu/saveMenuButton'
		var param = {
			json: JSON.stringify(button.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage({
					type: 'success',
					message: '保存成功!',
				});
				queryMenuButton()
				dialogVisibleButton.value = false
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});


	}
	const handleCancelSaveButton = () => {
		dialogVisibleButton.value = false
	}
	const handleModifyButton = (row) => {
		dialogVisibleButton.value = true
		button.value = row
	}
	const handleRemoveButton = (row) => {
		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
		}).then(() => {
			var url = 'framework/SysMenu/removeMenuButton'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code === 0) {
					ElMessage({
						type: 'success',
						message: '保存成功!',
					});
					queryMenuButton()
					dialogVisibleButton.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '保存失败' + response.data.msg,
					});
				}
			});
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}



	const handleModifyForm = (row) => {
		dialogVisibleForm.value = true
		form.value = row
	}
	const handleRemoveForm = (row) => {
		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
		}).then(() => {
			var url = 'framework/MenuForm/remove'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code === 0) {
					ElMessage({
						type: 'success',
						message: '保存成功!',
					});
					queryMenuForm()
					dialogVisibleForm.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '保存失败' + response.data.msg,
					});
				}
			});
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}



	const selectFormType = ref('')
	const selectFormName = ref('')
	const selectTName = ref('')
	const handleTabsClick = (tab, event, item) => {
		console.log(tab.props.name)
		var arr = tab.props.name.split('-')
		if (tab.props.name.indexOf('button') > -1) {
			queryMenuButton()
		} else if (tab.props.name.indexOf('form') > -1) {
			selectFormType.value = arr[1]
			selectFormName.value = arr[2]
			queryMenuForm()
		} else if (tab.props.name.indexOf('table') > -1) {
			selectTName.value = arr[1]
			queryMenuTable()
		}


	}

	const formatter = (row, column, cellValue, index) => {
		if (column.property == 'menuShow' || column.property == 'menuQuery') {
			return cellValue == '0' ? '否' : '是'
		}
		return cellValue
	}

	const form = ref({
		id: '',
		menuId: '',
		formType: '',
		prop: '',
		label: '',
		type: '',
		url: '',
		param: '',
		optionLabel: '',
		optionValue: '',
		searchButton: '',
		searchCallback: ''
	})
	const dialogVisibleForm = ref(false)
	const handleAddForm = (formType, formName) => {
		dialogVisibleForm.value = true
		form.value.id = ''
		form.value.formType = formType
		form.value.formName = formName
		form.value.menuId = selectedMenu.value.id
		form.value.sort = tableDataForm.value.length + 1
	}

	const handleAddNewForm = () => {
		dialogVisibleForm.value = true
		form.value.id = ''
		form.value.menuId = selectedMenu.value.id
	}

	const handleSaveForm = () => {
		var url = 'framework/MenuForm/save'
		var param = {
			json: JSON.stringify(form.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				dialogVisibleForm.value = false
				queryMenuForm()
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}

	const formTabs = ref([])
	const queryFormTabs = () => {
		var url = 'framework/MenuForm/queryTabsByMenuId'
		var param = {
			menuId: selectedMenu.value.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				formTabs.value = response.data.data
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}
	const tableTabs = ref([])
	const queryTableTabs = () => {
		var url = 'framework/MenuTable/queryTabsByMenuId'
		var param = {
			menuId: selectedMenu.value.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableTabs.value = response.data.data
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}



	const tableDataTable = ref([])
	const queryMenuTable = () => {
		var url = 'framework/MenuTable/queryMenuTable'
		var param = {
			menuId: selectedMenu.value.id,
			tName: selectTName.value,
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableDataTable.value = response.data.data
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}





	const dialogVisibleTable = ref(false)
	const table = ref({})
	const handleAddNewTable = () => {
		dialogVisibleTable.value = true
		table.value = {
			menuId: selectedMenu.value.id,
			userId: 'default',
			showFlag: '1',
			sortable: '1',
			exportFlag: '1',
			width: 200,
			sort: tableDataTable.value.length + 1,
			headerAlign: 'center',
			align: 'center',
			prop: '',
			label: ''
		}
	}

	const handleAddTable = (tName) => {
		dialogVisibleTable.value = true
		table.value = {
			menuId: selectedMenu.value.id,
			userId: 'default',
			tName: tName,
			showFlag: '1',
			sortable: '1',
			exportFlag: '1',
			width: 200,
			sort: tableDataTable.value.length + 1,
			headerAlign: 'center',
			align: 'center',
			prop: '',
			label: ''
		}
	}


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



	const handleModifyTable = (row) => {
		dialogVisibleTable.value = true
		table.value = row
	}
	const handleRemoveTable = (row) => {
		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
		}).then(() => {
			var url = 'framework/MenuTable/remove'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code === 0) {
					ElMessage({
						type: 'success',
						message: '保存成功!',
					});
					queryMenuTable()
					dialogVisibleTable.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '保存失败' + response.data.msg,
					});
				}
			});
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}

	const dialogVisibleObject = ref(false)
	const objText = ref('')

	const handleGenerateObject = () => {
		dialogVisibleObject.value = true
		var obj = {}
		objText.value = "{\n"
		for (var item of tableDataForm.value) {
			if (item.type == 'daterange' || item.type == 'datetimerange') {
				obj[item.prop] = ['', '']
				objText.value += '    ' + item.prop + ": ['', ''],\n"
			} else {
				obj[item.prop] = ''
				objText.value += '    ' + item.prop + ": '' ,\n"
			}
		}
		objText.value += "}"
		// console.log(JSON.stringify(obj))
		// objText.value = JSON.stringify(obj)
	}


	const application = ref({
		id: '',
		applicationName: ''
	})
	const options = ref([])
	const getApplications = () => {
		var url = 'framework/Application/query'
		var param = {
			params: JSON.stringify({})
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				options.value = response.data.data
				application.value = options.value[0]
				getDataTree()
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		});
	}


	const changeApplication = (value) => {
		application.value = value
		// console.log(value)
		getDataTree()
	}
</script>

<style>
</style>