<template>
	<div class="menu-container">
		<el-row>
			<el-col :span="4">
				<div class="btn">
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</div>
			</el-col>
		</el-row>
		<!-- 
		<el-row :gutter="5">
			<el-col :span="4">
				<div class="menu-tree-container">
				<el-tree v-loading="loadingTree" :data="dataTree" :props="defaultProps" node-key="id" @node-click="handleNodeClick"
				 :expand-on-click-node="false" default-expand-all highlight-current>
				</el-tree>
				</div>
			</el-col>
			<el-col :span="20">
				<div style="padding-right: 30px;" class="menu-table-container">
					<el-table v-loading="loading" :data="tableData" border>
						<el-table-column prop="id" label="编号" width="50" v-if="isShow">
						</el-table-column>
						<el-table-column prop="menuPid" label="上级编码" width="90" align="center">
						</el-table-column>
						<el-table-column prop="menuCode" label="界面编码" width="90" align="center">
						</el-table-column>
						<el-table-column prop="menuName" label="界面名称" width="120" align="center">
						</el-table-column>
						<el-table-column prop="menuOpenBs" label="bs路径" width="120" align="center">
						</el-table-column>
						<el-table-column prop="menuBsIcon" label="图标" width="120" align="center">
						</el-table-column>
						<el-table-column prop="menuShow" label="是否显示" width="120" align="center">
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
 -->

		<el-dialog title="编辑信息" :visible.sync="dialogVisible" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="id">
					<el-input v-model="form.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="上级编码">
					<el-input v-model="form.menuPid" disabled></el-input>
				</el-form-item>
				<el-form-item label="界面编码">
					<el-input v-model="form.menuCode"></el-input>
				</el-form-item>
				<el-form-item label="界面名称">
					<el-input v-model="form.menuName"></el-input>
				</el-form-item>
				<el-form-item label="图标">
					<el-input v-model="form.menuBsIcon"></el-input>
				</el-form-item>
				<el-form-item label="bs路径">
					<el-input v-model="form.menuOpenBs"></el-input>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-radio-group v-model="form.menuShow" @change="handleRadioChange">
						<el-radio :label="0">是</el-radio>
						<el-radio :label="9">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button @click="handleCancelSave">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>


		<div class="menu-tree-container">
			<el-tree v-loading="loadingTree" :data="dataTree" :props="defaultProps" node-key="id" @node-click="handleNodeClick"
			 :expand-on-click-node="false"   highlight-current>
			</el-tree>
		</div>

		<div class="menu-table-container">
			<el-table v-loading="loading" :data="tableData" border>
				<el-table-column prop="id" label="编号" width="50" v-if="isShow">
				</el-table-column>
				<el-table-column prop="menuPid" label="上级编码" width="100" align="center">
				</el-table-column>
				<el-table-column prop="menuCode" label="界面编码" width="100" align="center">
				</el-table-column>
				<el-table-column prop="menuName" label="界面名称" width="120" align="center">
				</el-table-column>
				<el-table-column prop="menuOpenBs" label="bs路径" width="250" align="left">
				</el-table-column>
				<el-table-column prop="menuShow" label="是否显示" width="100" align="center" :formatter="typeFormatter">
				</el-table-column>
				<el-table-column label="操作" align="center"  width="200" >
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				dataTree: [],
				defaultProps: {
					children: 'children',
					label: 'text'
				},
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,

				//录入框
				dialogVisible: false,

				form: {
					id: '',
					menuPid: '',
					menuCode: '',
					menuName: '',
					menuBsIcon: '',
					menuOpenBs: '',
					menuShow: ''
				},
				isShow: false,
				loading: true,
				loadingTree: true,
			}
		},
		mounted() {
			this.getDataTree()
			this.getTableData()
		},
		methods: {
			typeFormatter: function(row, column) {
				switch (row.menuShow) {
					case 0:
						return "是";
						break;
					case 9:
						return "否";
						break;
				}
			},

			// 获取table数据
			getDataTree() {
				//console.log("获取table数据getDataTree")
				var url = 'SysMenu/queryMainMenu.do?param1=1'
				var param = {}
				axios.get(url, param).then(response => {
					this.dataTree = response.data
					if (response) {
						this.loadingTree = false
					} else {
						this.loadingTree = true
					}
				});
			},
			handleRadioChange(data) {
				console.log(data)
				this.form.menuShow = data
			},
			handleNodeClick(data) {
				console.log(data.code)
				this.form.menuPid = data.code
				this.getTableData()
			},
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'SysMenu/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					pid: this.form.menuPid,
					userId: sessionStorage.getItem('userId'),
				}
				axios.post(url, param).then(response => {
					this.tableData = response.data.list
					this.totalRows = response.data.total

					if (response) {
						this.loading = false
					} else {
						this.loading = true
					}
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},

			handleAdd() {
				this.dialogVisible = true
				this.form = {
					id: '',
					menuPid: this.form.menuPid,
					menuCode: '',
					menuName: '',
					menuBsIcon: '',
					menuOpenBs: '',
					menuShow: ''
				}
			},
			// 编辑按钮事件
			handleEdit(row) {
				this.dialogVisible = true
				console.log(row.menuShow)
				this.form = {
					id: row.id,
					menuPid: row.menuPid,
					menuCode: row.menuCode,
					menuName: row.menuName,
					menuBsIcon: row.menuBsIcon,
					menuOpenBs: row.menuOpenBs,
					menuShow: row.menuShow,
				}
			},
			//添加保存按钮事件
			handleSave(row) {
				var url = 'SysMenu/save.do'
				var param = {
					id: this.form.id,
					menuPid: this.form.menuPid,
					menuCode: this.form.menuCode,
					menuName: this.form.menuName,
					menuBsIcon: this.form.menuBsIcon,
					menuOpenBs: this.form.menuOpenBs,
					menuShow: this.form.menuShow,
					userId: sessionStorage.getItem('userId'),
				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getTableData()
						this.getDataTree()
						this.dialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data
						});
					}
				});
			},

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


			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var url = 'SysMenu/remove.do'
					var param = {
						id: id,
						userId: sessionStorage.getItem('userId')
					}
					axios.post(url, param).then(response => {
						if (response.data === 'success') {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
							this.getDataTree()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败' + response.data
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		}
	};
</script>
<style>
	.btn {
		padding-left: 15px;
	}

	.menu-container {
		height: 100%;
	}

	.menu-tree-container {
		margin: 10px;
		width: 20%;
		height: 100%;
		float: left;
		/* background: #e5e9f2; */
	}

	.menu-table-container {
		/* position: relative; */
		width: 75%;
		float: right;
		/* margin-right: 10px; */
		/* margin-top: -530px; */
		/* border: black 1px solid; */
	}
</style>
