<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="qxdialogVisible"
      :title="'权限分配_' + roleName"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <h4>菜单权限</h4>
          <el-tree
            :data="menuData"
            show-checkbox
            default-expand-all
            ref="menuTree"
            node-key="resourceId"
            :props="Props"
            :default-checked-keys="menuCheckedArr"
            @check-change="menucheckchange"
          ></el-tree>
        </el-col>
        <el-col :span="12">
          <h4>API权限</h4>
          <el-tree
            :data="apiData"
            show-checkbox
            default-expand-all
            ref="apiTree"
            :props="PropsB"
            node-key="resourceId"
            :default-checked-keys="apiCheckedArr"
            @check-change="apicheckchange"
          ></el-tree>
        </el-col>
      </el-row>
      <el-alert v-show="alertshow" title="请选择权限" show-icon type="warning" :closable="false"></el-alert>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun()">确定</el-button>
        <el-button @click="$emit('QXdialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";

@Component({
  components: {}
})
export default class quan extends Vue {
  @Prop(Boolean) qxdialogVisible!: Boolean;
  @Prop(String) roleID!: String;
  @Prop(String) roleName!: String;
  //tree
  @Provide() menuData: any = [];
  @Provide() Props: Object = {
    label: "menuName",
    children: "childList"
  };
  @Provide() PropsB: Object = {
    label: "resourceName",
    children: "childList"
  };
  @Provide() apiData: any = [];
  @Provide() menuCheckedArr: any = []; //默认选中节点
  @Provide() apiCheckedArr: any = []; //默认选中节点
  @Provide() menuTreeArr: any = []; //tree1选中节点
  @Provide() apiTreeArr: any = []; //tree2选中节点
  @Provide() allArr: any = [];//所有选中节点
  @Provide() alertshow: Boolean = false;
  @Watch("allArr") change(newVal: any) {
    if (newVal.length == 0) this.alertshow = true;
    else this.alertshow = false;
  }
  /*getMData(type: String) {
    let that = this;
    (this as any).$axios
      .get(`/resource/getResourcesList/${type}`)
      .then((res: any) => {
        if (type == "MENU") {
          that.menuData = res;
        } else if (type == "REST-API") {
          that.apiData = res;
        }
      });
  }*/
  getTreeData(type: String) {
    let that = this;
    (this as any).$axios
      .get(`/role/getRoleResourcesByRoleId/${that.roleID}?resourceType=${type}`)
      .then((res: any) => {
        if (type == "MENU") {
          that.menuData = res;
          that.menuCheckedArr = that.getCheckedArr(res);
          that.$nextTick(() => {
            that.menuTreeArr = (that as any).$refs.menuTree.getCheckedNodes();
          });
        } else if (type == "REST-API") {
          that.apiData = res;
          that.apiCheckedArr = that.getCheckedArr(res);
          that.$nextTick(() => {
            that.apiTreeArr = (that as any).$refs.apiTree.getCheckedNodes();
          });
        }
      });
  }
  getCheckedArr(list: any) {
    let arr: any = [];
    list.forEach((ele: any) => {
      if (ele.selected == "true") {
        arr.push(ele.resourceId);
      }
      if (ele.childList.length > 0) {
        ele.childList.forEach((sele: any) => {
          if (sele.selected == "true") {
            arr.push(sele.resourceId);
          }
        });
      }
    });
    return arr;
  }
  confirmFun() {
    let that = this,
      param: any = [];
      that.menucheckchange()
      that.apicheckchange()
    if (!that.alertshow) {
      that.allArr.forEach((ele: any) => {
        param.push({
          
          resourceId: ele.resourceId,
          roleId: that.roleID,
          rid: ele.rid
        });
      });
      that.$emit("confirm", param);
    }
  }
  menucheckchange() {
    let that = this;
    that.menuTreeArr = (that as any).$refs.menuTree.getCheckedNodes();
    that.allArr = [...that.menuTreeArr, ...that.apiTreeArr];
  }
  apicheckchange() {
    let that = this;
    that.apiTreeArr = (that as any).$refs.apiTree.getCheckedNodes();
    that.allArr = [...that.menuTreeArr, ...that.apiTreeArr];
  }
  created() {
    // this.getMData("REST-API");
    // this.getMData("MENU");
    let that = this;
    that.getTreeData("REST-API");
    that.getTreeData("MENU");
  }
}
</script>