<!--
  @description: 角色管理--设置按钮操作权限弹框
  @Modifier: ysg/gmy
  @routerPath:
  @date: 2020-12-14-9:17
-->
<template>
  <el-dialog
    :visible.sync="dialog"
    :close-on-click-modal="false"
    title="设置按钮操作权限"
    width="800px"
  >
    <div v-loading="loading" class="btn-Access clearfix">
      <div class="fl btn-Access-text">
        <div class="page-title">
          按钮操作权限
        </div>
      </div>
      <div class="fl btn-Access-tree">
        <el-scrollbar class="scrollbar" style="height:500px;">
          <el-tree
            ref="buttonTree"
            :data="btnTreeData"
            :props="btnTreeProps"
            :default-checked-keys="selectBtnIds"
            :check-strictly="true"
            :expand-on-click-node="false"
            default-expand-all
            show-checkbox
            check-on-click-node
            node-key="id"
            @node-click="nodeClick"
            @check="checkChange"
          />
        </el-scrollbar>
      </div>
    </div>
    <div slot="footer" style="text-align:center;">
      <el-button type="primary" @click="setBtnPower">
        设置权限
      </el-button>
      <el-button @click="dialog = false">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* 接口*/
import {
  getRoleButtonList, // 获取按钮信息列表
  setRoleButtonList // 保存设置权限
} from '@/api/common/buttonMgmt'
export default {
  name: 'ButtonJurisdictionSelectDialog',
  data() {
    return {
      loading: true, // loading效果
      dialog: false, // 弹框打开状态 true 打开 false关闭 默认关闭
      btnTreeData: null, // 设置角色数据
      selectRoleId: '', // 角色id
      selectBtnIds: [], // 选择打勾
      // 设置权限参数
      btnTreeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    /*
    * 打开设置按钮权限弹框
    * @params roleId 角色id
    */
    open(roleId) {
      this.dialog = true // 打开弹框
      this.getBtnList(roleId)
    },
    /*
    * 获取按钮数据请求
    * @params roleId 角色id
    */
    getBtnList(roleId) {
      this.selectRoleId = roleId // 角色id
      const data = {
        roleId: this.selectRoleId
      }
      getRoleButtonList(data).then(response => {
        this.btnTreeData = response.data.buttonList // 获取按钮权限数据
        this.selectBtnIds = response.data.buttonIds // 获取已选中的按钮id集合
        this.loading = false // loading
      }).catch(() => {
        this.loading = false // loading
      })
    },
    /*
    * 设置权限确定事件
    * @params  buttonIds：getCheckedKeys方法获取选中的按钮id结合 类型数据 转换为字符串 roleId：角色id
    */
    setBtnPower() {
      const checkedKeys = this.$refs.buttonTree.getCheckedKeys()
      const buttonIds = checkedKeys.join(',')
      const data = {
        roleId: this.selectRoleId,
        buttonIds
      }
      setRoleButtonList(data).then(response => {
        this.dialog = false
        this.$message.success(response.header.msg)
      })
    },
    // 点击复选框触发
    checkChange(data) {
      const node = this.$refs.buttonTree.getNode(data)
      this.nodeClick(data, node)
    },
    // 点击文本触发-判断用户的权限情况及选中的效果和取消的效果
    nodeClick(data, node) {
      this.childNodesChange(node)
      this.parentNodesChange(node)
    },
    // 子节点改变
    childNodesChange(node) {
      const len = node.childNodes.length
      for (let i = 0; i < len; i++) {
        if (node.checked) {
          node.childNodes[i].checked = true
        } else {
          node.childNodes[i].checked = false
        }
        this.childNodesChange(node.childNodes[i])
      }
    },
    // 父节点改变
    parentNodesChange(node) {
      if (node.parent) {
        let isChecked = false
        node.parent.childNodes.map(item => {
          if (item.checked) {
            isChecked = true
          }
        })
        if (!isChecked) {
          node.parent.checked = isChecked
        } else {
          node.parent.checked = true
        }
        this.parentNodesChange(node.parent)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.btn-Access{
  .btn-Access-text{
    width: 200px;
    text-align: right;
  }
 .btn-Access-tree{
    width: calc(100% - 200px);

  }
}
</style>
