<style>
</style>
<template>
	<div class="flexOne">
		<div class="query-box">
			<ul>
				<li>
					<span><em>名称</em><el-input  v-model='msg.MenuName' class="permiss-input" placeholder="请输入内容"></el-input></span>
				</li>
				<li>
					<span><em>权限层级</em><el-select v-model='msg.Tier' placeholder="请选择">
						        <el-option label="不限" value="0" ></el-option>
								<el-option label="一级" value="1" ></el-option>
								<el-option label="二级" value="2" ></el-option>
								<el-option label="三级" value="3" ></el-option>
							</el-select>
				      </span>
				</li>				
				<li>
					<span><em>上级权限</em><el-select filterable v-model='msg.ParentId' filterable  placeholder="请选择">
								<el-option label="不限" value="0"></el-option>
							    <el-option 
							    	v-for="item in getParentNodeData" 
							    	:key="item.MenuId" 
							    	:label="item.MenuName" 
							    	:value="item.MenuId">
							    </el-option>
							  </el-select>
				      </span>
				</li>
				<li>
					<span><em>状态</em><el-select v-model="msg.MenuStatus"  placeholder="请选择">
							    <el-option label="不限" value="-1"></el-option>
							    <el-option label="开启" value="0"></el-option>
							    <el-option label="关闭" value="1"></el-option>
							  </el-select>
				      </span>
				</li>
				<li>
					<input type="button" class="hollowFixedBtn" name="" id="" value="查询" @click="resetPageIndex(),getList()" />
					<input type="button" @click="outerVisible = true,dialogTitle='新增权限菜单',clearMessage();" class="normalBtn" value="新增" /> 
				</li>
			</ul>
		</div>
		<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<th width="300">名称</th>
				<th width="500">菜单地址</th>
				<th>层级</th>
				<th>状态</th>
				<th width="200">分组名称</th>
				<th width="100">排序</th>
				<th width="100">操作</th>
			</tr>
			<tr v-for="(item,index) in DataList">
				<td>{{item.MenuName}}</td>
				<td>{{item.MenuUrl}}</td>
				<td>{{item.Tier | tierFormat(item.Tier)}}</td>
				<td>{{item.MenuStatus==0?'开启':'关闭'}}</td>
				<td>
					{{item.GroupingCode}}
				</td>
				<td>
					{{item.Sort}}
				</td>
				<td>
					<el-row>
					    <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
						    <el-button  @click="outerVisible = true,dialogTitle='修改权限菜单',updateData(index,item.MenuId)"  type="primary"  icon="el-icon-edit" circle></el-button>
						 </el-tooltip> 
					</el-row>
				</td>
			</tr>
		</table>
		<el-pagination 
			background 
			@current-change="handleCurrentChange"
			 :current-page.sync="currentPage" 
			 layout="total,prev, pager, next, jumper" 
			 :page-size=msg.pageSize
			 :total='total'>
		</el-pagination>

		<el-dialog custom-class='w750' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
			<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px" >
				<table class="layerNoIcon">
					<tr>
						<td>
							 <el-form-item  label="名称" prop="MenuName"><el-input maxlength='50' class='w200' type="text" v-model="addMsg.MenuName" :placeholder="$t('pub.pleaseImport')"></el-input>
			                </el-form-item>
						</td>
						<td>
							 <el-form-item  label="菜单URL" prop="MenuUrl">
			                 <el-input maxlength='50' class='w200' type="text" v-model="addMsg.MenuUrl" :placeholder="$t('pub.pleaseImport')"></el-input>
			                </el-form-item>
						</td>							
					</tr>
					<tr>
						<td>
							<el-form-item  label="权限层级" prop="Tier">
			                 <el-select  class='w200' v-model="addMsg.Tier" @change='getChildMenu' placeholder="请选择">
								<el-option label="一级" value="1"  ></el-option>
								<el-option label="二级" value="2" ></el-option>
								<el-option label="三级" value="3"  ></el-option>
							</el-select>
			                </el-form-item>
						</td>
						<td>
							<el-form-item  label="上级权限" prop="ParentId">
			                 <el-select filterable  class='w200'  v-model='addMsg.ParentId' :placeholder="$t('pub.pleaseSel')">
								<el-option v-for="item in layerGetParentNodeData" :key="item.MenuId" :label="item.MenuName" :value="item.MenuId">
								</el-option>
							  </el-select>
			                </el-form-item>	
						</td>
					</tr>
					<tr>
						<td>
						    <el-form-item  label="分组名称">
			                    <el-input maxlength='50' class='w200' type="text" v-model="addMsg.GroupingCode" :placeholder="$t('pub.pleaseImport')"></el-input>
			                </el-form-item>
						</td>
						<td>
						    <el-form-item  label="排序" prop='Sort'>
			                    <el-input maxlength='50' class='w200' @keyup.native="checkInteger(addMsg,'Sort')" type="text" v-model="addMsg.Sort" :placeholder="$t('pub.pleaseImport')"></el-input>
			                </el-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<el-form-item  label="菜单图标" >
			                 <el-input class='w200' type="text" maxlength='50' v-model="addMsg.MenuStyleIcon" :placeholder="$t('pub.pleaseImport')"></el-input>
			                </el-form-item>
						</td>
						<td>
							<el-form-item  label="菜单背景配置">
			                 <el-color-picker style='vertical-align: middle;' :predefine="predefineColors"  v-model="addMsg.MenuStyleColor"></el-color-picker>
			                </el-form-item>
						</td>						
					</tr>
					<tr>
						<td>
						    <el-form-item  label="状态">
			                    <el-switch v-model="addMsg.MenuStatus" active-value="0" inactive-value="1"></el-switch>
			                </el-form-item>
						</td>
					</tr>
				</table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg'),getList()">{{$t('pub.cancelBtn')}}</button> &nbsp;
				<button class="normalBtn" type="primary" @click="submitForm('addMsg'),getList()">{{$t('pub.saveBtn')}}</button>				
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			let validateParent=(rule, value, callback)=>{
				if(this.addMsg.Tier!='1'&&this.addMsg.Tier!=''&&value==''){
					 return callback(new Error('请选择上级层级'));
				}else{
					 callback();
				}
			}
			let validateUrl=(rule, value, callback)=>{
				if(this.addMsg.Tier=='3'&&this.addMsg.Tier!=''&&value==''){
					 return callback(new Error('请输入菜单URL'));
				}else{
					 callback();
				}
			}
			
			return {
				dialogTitle: '',
				DataList: '',
				total: 0,
				pageSize: '',
				currentPage: 1,
				thisColor: '#E95252',
				predefineColors: [
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
				],
				outerVisible: false,
				addStatus: [{
					value: '0',
					label: '开启'
				}, {
					value: '1',
					label: '关闭'
				}],
				msg: { //列表查询请求数据
					"pageIndex": 1,
					'pageSize': 15,
					'MenuName': '',
					'ParentId': '',
					'MenuStatus': '0',
					'Tier':''
				},
				addMsg: {
					'MenuId':'0',
					'Tier':'',
					'MenuName': '',
					'MenuUrl': '',
					'ParentId': '0',
					'MenuStyle': '',
					'MenuStatus': '0',
					MenuStyleIcon:'',
					MenuStyleColor:'',
					Sort:0
				},
				rules:{
					Sort:[
					  { required: true, message: '请输入排序', trigger: 'blur' }
					],
					MenuName:[
					  { required: true, message: '请输入菜单名称', trigger: 'blur' }
					],
					Tier:[
					  { required: true, message: '请选择菜单层级', trigger: 'change' }  
					],
					ParentId:[
					  {validator: validateParent, trigger: 'change' }
					],
					MenuUrl:[
					  {validator: validateUrl, trigger: 'blur' }
					],
				},
				getParentNodeMsg: {
					'Tier':'0',
					"ParentId": '0',
					"MenuStatus": '0',
					"MenuName": '',
				},
				layerGetParentNodeData:[],
				getParentNodeData: [],
				currentUpdateIndex:-1
			}
		},
		mounted() {
			this.getList();
			this.getParentNode()
			
		},
		filters:{
			tierFormat(value){
				if(value=='1')
				return '一级'
				if(value=='2')
				return '二级'
				if(value=='3')
				return '三级'
			}
		},
		methods: {
			getParentNode() { //上级权限
				this.apipost('admin_get_SysMenuGetList', this.getParentNodeMsg, res => {
					if(this.outerVisible){
						 this.layerGetParentNodeData = res.data.data;
					}else{
						this.getParentNodeData = res.data.data;
					}
				}, err => {})
			},
			
			getList() { //列表查询
				this.apipost('admin_get_SysMenuGetPageList', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.DataList = res.data.data.pageData;
						console.log(this.DataList)
						this.total = res.data.data.count;						
					}
				}, err => {})
			},
			getChildMenu(){
				this.addMsg.ParentId='';
				if(this.addMsg.Tier==1){
					this.layerGetParentNodeData=null;
					//this.addMsg.ParentId=0
				}else{
					this.getParentNodeMsg.Tier=this.addMsg.Tier-1;
					this.getParentNode();			
				}
				
			
			},
			addData() { //新增数据
				if(this.addMsg.MenuName==''){
					this.$message.error('菜单名不能为空');
					return
				}
				
				
				let mStyle={"icon":"","color":""};
				mStyle.icon=this.addMsg.MenuStyleIcon;
				mStyle.color=this.addMsg.MenuStyleColor;
				this.addMsg.MenuStyle=JSON.stringify(mStyle);
				if(this.addMsg.Tier==1)
					this.addMsg.ParentId=0
				this.apipost('admin_post_SysMenuSet', this.addMsg, res => {
					if(res.data.resultCode == 1){
						this.outerVisible=false;
						this.$message.success(res.data.message)
						if(this.currentUpdateIndex>-1){
							this.DataList[this.currentUpdateIndex]=this.addMsg
						}			
					}else{
						this.$message.error(res.data.message);
					}
				}, err => {})

			},
			updateData(index,id) { //修改
				this.apipost('admin_get_SysMenuGet',{MenuId:id},res=>{
					let updateList=res.data.data
					console.log(updateList)
					this.addMsg.MenuId=id
					this.addMsg.MenuName=updateList.MenuName
					this.addMsg.Tier=updateList.Tier.toString()
					this.addMsg.ParentId=updateList.ParentId
					this.addMsg.Sort=updateList.Sort
					this.addMsg.GroupingCode=updateList.GroupingCode
					this.addMsg.MenuUrl=updateList.MenuUrl
					this.addMsg.MenuStatus=updateList.MenuStatus.toString()
					let style=JSON.parse(updateList.MenuStyle)
					this.addMsg.MenuStyleIcon=style.icon
					this.addMsg.MenuStyleColor=style.color
					this.currentUpdateIndex=index
				},err=>{})
				
				this.getChildMenu();
//				this.addMsg = this.DataList[index]
//				this.addMsg.ParentId=this.addMsg.ParentId.toString();
//				this.addMsg.Tier=this.DataList[index].Tier.toString();
//				this.addMsg.MenuStatus=this.addMsg.MenuStatus.toString();
//				//console.log(this.DataList[index])
				if(this.addMsg.MenuStyle && this.addMsg.MenuStyle!=""){
					let style=JSON.parse(this.DataList[index].MenuStyle)
					this.addMsg.MenuStyleIcon=style.icon
					this.addMsg.MenuStyleColor=style.color
				}
				this.currentUpdateIndex=index
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			clearMessage() {
				this.addMsg = {
					'Tier':'',
					'MenuName': '',
					'MenuUrl': '',
					'ParentId': '',
					'MenuStyle': '',
					'MenuStatus': '0',
					MenuStyleIcon:'',
					MenuStyleColor:''					
				}
			},
			resetPageIndex() {
				this.msg.pageIndex = 1
				this.currentPage = 1
			},
			submitForm(addMsg) {//提交创建、修改表单
	            this.$refs[addMsg].validate((valid) => {
	                if (valid) {
	                    this.addData()
	                } else {
	                    return false;
	                }
	            });
	        },
		    closeChangeMachie(done){//弹出框关闭初始化弹框内表单
		         done();
		         this.resetForm('addMsg');
		    },
	        resetForm(formName) {//弹出框取消 初始化谈框内表单
	         this.$refs[formName].resetFields();
	        }
		}

	}
</script>