<template>
  <div class="menu_permission">
    <el-table border :data="data">
      <el-table-column label="名称" width="214">
        <template slot-scope="scope">
          <div class="permission_list">
            <el-checkbox
              :value="selectAllInfo[scope.row.prop]"
              @change="selectAll(scope.row.prop)"
            >
              {{ scope.row.name }}
            </el-checkbox>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="选项">
        <template slot-scope="scope">
          <el-checkbox-group
            v-model="permissions[scope.row.prop]"
            class="permission_list"
            @change="selectPermission"
          >
            <el-checkbox
              v-for="(item, index) in scope.row.children"
              :label="item.value"
              :key="'permission_' + index"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  model: {
    prop: "permissions",
    event: "change-permissions",
  },
  props: {
    permissions: {
      type: Object,
      default: {},
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data: () => ({
    selectAllInfo: {},
  }),
  watch: {
    permissions: {
      handler() {
        this.upSelectAllInfo();
      },
      deep: true,
    },
  },
  methods: {
    selectPermission(values) {
      this.$emit("change-permissions", this.permissions);
    },
    upSelectAllInfo() {
      this.data.forEach((item) => {
        let values = this.permissions[item.prop];
        let datas = this.data.find((v) => v.prop === item.prop).children;
        let selectAllFlag = true;

        datas.forEach((v) => {
          selectAllFlag = selectAllFlag && values.indexOf(v.value) > -1;
        });

        this.selectAllInfo[item.prop] = selectAllFlag;
      });
    },
    selectAll(prop) {
      let newValues = { ...this.permissions };

      this.selectAllInfo[prop] = !this.selectAllInfo[prop];

      if (this.selectAllInfo[prop]) {
        newValues[prop] = this.data
          .find((item) => item.prop === prop)
          .children.map((item) => item.value);
      } else {
        newValues[prop] = [];
      }
      this.$emit("change-permissions", newValues);
    },
  },
  mounted() {
    this.upSelectAllInfo();
  },
};
</script>


<style>
.menu_permission .el-table__header-wrapper {
  display: none;
}
.permission_list .el-checkbox {
  color: #58617a;
  line-height: 40px;
}
.permission_list .el-checkbox__input.is-checked .el-checkbox__inner,
.permission_list .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #626de9;
  border-color: #515fe7;
}
.permission_list .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #58617a;
}
.menu_permission .el-table .cell {
  padding: 0 50px !important;
}
.menu_permission .el-table--border {
  border: 1px solid #f4f7fc;
  border-radius: 6px;
}
</style>
