<template>
  <el-dialog
    class="blindMenuDialog"
    title="菜单功能绑定"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="470px"
    @close="hide"
  >
    <div class="treeBoxList" v-loading="treeLoading">
      <el-checkbox-group v-model="checkedMenu">
        <el-checkbox
          v-for="item in menuCheckOption"
          :label="item.id"
          :key="item.id"
          >{{ item.desc }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getMenuListApi,
  getRolePermissionApi,
  getRolechangePermissionApi,
} from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      roleUser: "",
      isShow: false,
      treeLoading: false,
      rowData: "",
      menuList: [],
      checkedMenu: [], //选中的checkbox
      menuCheckOption: [], //checkbox列表
      checkedIds: [], //权限返回的内容id
    };
  },
  methods: {
    //判断
    getdataform(val) {
      this.rowData = JSON.parse(JSON.stringify(val));
    },
    //获取所有的菜单列表
    getMenuList() {
      this.treeLoading = true;
      getMenuListApi()
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.menuCheckOption = res.data;
            this.getRolePermission();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },
    //获取角色的菜单权限
    getRolePermission() {
      console.log(this.rowData);
      getRolePermissionApi({ id: this.rowData.id })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.checkedIds = res.data;
            console.log(this.checkedIds);
            this.checkedMenu = this.checkedIds.map((obj) => obj.resourceId);
            console.log("我时查询到的选中的值", this.checkedMenu);
            this.treeLoading = false;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },
    // 保存确定操作
    submitForm() {
      console.log(this.checkedMenu);
      let paramsList = [];
      this.checkedMenu.map((id) => {
        paramsList.push({ resourceId: id });
      });
      //设置权限
      getRolechangePermissionApi({
        list: paramsList,
        roleId: this.rowData.id,
      })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.isShow = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "权限绑定成功",
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },

    display() {
      this.isShow = true;
      this.getMenuList();
    },
    hide() {
      this.isShow = false;
      this.checkedMenu = [];
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.blindMenuDialog {
  .treeBoxList {
    height: 600px;
    overflow: auto;
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      .el-checkbox {
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
