<template>
  <el-dialog
    class="blindMenuDialog"
    title="菜单功能绑定"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="470px"
    @close="hide"
  >
    <div class="treeBoxList" v-loading="treeLoading">
      <div class="menuBox">
        <h3>菜单选项</h3>
        <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 class="btnBox">
        <h3>功能选项</h3>
        <el-checkbox-group v-model="checkedBtn">
          <el-checkbox
            v-for="item in btnCheckOption"
            :label="item.id"
            :key="item.id"
            >{{ item.desc }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </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: "",
      allCheckList: [], //全部的内容
      menuList: [],
      checkedMenu: [], //选中的菜单checkbox
      menuCheckOption: [], //checkbox列表
      checkedIds: [], //权限返回的内容id
      checkedBtn: [], //选中的按钮
      btnCheckOption: [],
    };
  },
  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.allCheckList = res.data;
            const menuItems = res.data.filter((item) => item.key.includes("/"));
            this.menuCheckOption = menuItems.filter((item) => {
              return (
                item.key !== "/userManagement" &&
                item.key !== "/menuManagement" &&
                item.key !== "/roleManagement"
              );
            });
            this.btnCheckOption = res.data.filter((item) =>
              item.key.includes("Btn")
            );
            console.log(this.menuCheckOption, this.btnCheckOption);
            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);

            // 创建一个Set，以便快速检查id是否存在
            const menuOptionIds = new Set(
              this.menuCheckOption.map((option) => option.id)
            );

            // 过滤资源数组，只保留那些其resourceId存在于menuOptionIds中的项
            const filteredResources = this.checkedIds.filter((resource) =>
              menuOptionIds.has(resource.resourceId)
            );
            // 创建一个Set，以便快速检查id是否存在
            const btnOptionIds = new Set(
              this.btnCheckOption.map((option) => option.id)
            );

            // 过滤资源数组，只保留那些其resourceId存在于menuOptionIds中的项
            const filteredBtnResources = this.checkedIds.filter((resource) =>
              btnOptionIds.has(resource.resourceId)
            );
            console.log(filteredResources, filteredBtnResources);
            this.checkedMenu = filteredResources.map((obj) => obj.resourceId);
            this.checkedBtn = filteredBtnResources.map((obj) => obj.resourceId);
            // console.log("我时查询到的选中的值", this.checkedIds);

            this.treeLoading = false;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },
    // 保存确定操作
    submitForm() {
      console.log(this.checkedMenu);
      console.log(this.checkedBtn);
      let paramsList = [];
      this.checkedMenu.map((id) => {
        paramsList.push({ resourceId: id });
      });
      this.checkedBtn.map((id) => {
        paramsList.push({ resourceId: id });
      });
      paramsList = paramsList.filter((item, index, self) => {
        return (
          self.findIndex((t) => t.resourceId === item.resourceId) === index
        );
      });
      console.log(paramsList);
      //设置权限
      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.allCheckList = [];
      this.checkedMenu = [];
      this.checkedBtn = [];
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.blindMenuDialog {
  .treeBoxList {
    height: 550px;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    .menuBox,
    .btnBox {
      h3 {
        font-size: 14px;
        margin-bottom: 12px;
        font-weight: normal;
      }
    }
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      .el-checkbox {
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
