<template>
  <div>
    <el-dialog
      title="分配角色资源"
      :destroy-on-close="true"
      :visible.sync="Visible"
      width="50%"
      @close="handleClose"
      :close-on-click-modal="false"
      top="10vh"
    >
      <div class="mb-5" v-for="(v, key) in resourceList" :key="key">
        <div class="title-box mb-5">
          <span class="mr-5 text-[16px] font-bold">{{ key }}</span>
          <el-checkbox
            :indeterminate="v.isIndeterminate"
            v-model="v.checkAll"
            @change="handleCheckAllChange($event, v)"
            >全选</el-checkbox
          >
        </div>
        <el-checkbox-group
          v-model="form.resourceIdList"
          @change="onChange($event, v)"
        >
          <el-row>
            <el-col :span="6" v-for="item in v.list" :key="item.id">
              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleRest">重 置</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          @click="handleOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleResourceList,
  addRoleResource,
  getResourceGroup,
} from "@/api/system";
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      resourceList: {},
      userResourceList: [], // 用户资源列表
      form: {
        resourceIdList: [],
        roleId: "",
      },
    };
  },
  computed: {
    Visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  methods: {
    // 获取资源分组
    async getResourceGroup() {
      let res = await getResourceGroup({
        page: 1,
        size: -1,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        let group = this.formatGroup(data);
        this.resourceList = group;
      }
    },

    // 获取角色资源权限列表
    async getRoleResourceList(roleId) {
      let res = await getRoleResourceList({
        size: -1,
        page: 1,
        roleId,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        let arr = data.filter((v) => v.resourceId);
        this.form.resourceIdList = arr.map((v) => v.resourceId);
      }
    },
    // 权限分组
    // groupByAuth(list) {
    //   let group = {};
    //   list.forEach((item) => {
    //     let name = item.name.split("-")[0];
    //     if (!group[name]) {
    //       group[name] = {
    //         isIndeterminate: false,
    //         checkAll: false,
    //         list: [],
    //       };
    //     }
    //     group[name].list.push(item);
    //   });
    //   return group;
    // },

    // 格式化分组
    formatGroup(data) {
      let group = {};
      Object.keys(data).forEach((key) => {
        group[key] = {
          isIndeterminate: false,
          checkAll: false,
          list: [],
        };
        group[key].list.push(...data[key]);
      });
      return group;
    },

    // 确定
    async handleOk() {
      this.loading = true;
      let res = await addRoleResource(this.form);
      let { code } = res.data;
      if (code === 1) {
        this.$message.success("添加成功");
        this.$emit("success");
        this.handleClose();
      }
      this.loading = false;
    },
    // 新增
    async onAdd(roleId) {
      Object.assign(this.form, this.$options.data().form);
      this.form.roleId = roleId;
      await this.getResourceGroup();
      this.getRoleResourceList(roleId);
    },

    // 重置
    handleRest() {
      this.form.resourceIdList = [];
      Object.keys(this.resourceList).forEach((key) => {
        this.resourceList[key].checkAll = false;
        this.resourceList[key].indeterminate = false;
      });
    },
    // 关闭
    handleClose() {
      this.handleRest();
      this.Visible = false;
    },
    handleCheckAllChange(checked, row) {
      let rowIds = row.list.map((v) => v.id);
      row.isIndeterminate = false;
      if (checked) {
        this.form.resourceIdList = [
          ...new Set([...this.form.resourceIdList, ...rowIds]),
        ];
      } else {
        this.form.resourceIdList = this.form.resourceIdList.filter((v) => {
          return !rowIds.includes(v);
        });
      }
    },
    onChange(checkedList, row) {
      let rowIds = row.list.map((v) => v.id);
      let list = checkedList.filter((v) => {
        return rowIds.includes(v);
      });
      row.isIndeterminate = !!list.length && list.length < rowIds.length;
      row.checkAll = list.length === rowIds.length;
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-dialog__body) {
  max-height: 620px;
  overflow: auto;
}
.title-box {
  border-bottom: 1px solid #e9e9e9;
}
.el-col {
  margin-bottom: 10px;
}
</style>