<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;
            this.total = res.data.data.count;
          }
        }, err => {})
      },
      getChildMenu() {
        this.addMsg.ParentId = '';
        if (this.addMsg.Tier == 1) {
          this.layerGetParentNodeData = null;
        } 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
          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();
        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>