<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="90px">
      <el-form-item label="选择角色" prop="code">
        <el-select v-model="queryParams.roleId" clearable placeholder="请选择角色" @change="roleChange">
          <el-option
            v-for="item in roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :span="2">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </el-col>
      <el-col :span="2">
        <el-button type="primary"  size="mini" @click="handleSubmit">确定</el-button>
      </el-col>
    </el-row>
    <el-row style="margin: 15px 0;">
      <el-checkbox-group v-model="checkedLimit" @change="handleCheckedLimitsChange">
        <el-col :span="4" v-for="limit in limits">
          <el-checkbox :label="limit.id" :key="limit.id">{{limit.importName}}</el-checkbox>
        </el-col>
      </el-checkbox-group>
    </el-row>

  </div>
</template>

<script>
import { listLimits,importRoleEdit } from "@/api/system/limits";
import { listRole } from "@/api/system/role";

export default {
  name: "Limits",
  data() {
    return {
      // 查询参数
      queryParams: {
          roleId:'',
      },
      userGroupOptions:[],
        checkAll: false,
        checkedLimit: [],
        limits: [],
        isIndeterminate: true,
        roleList:[],
        limitsAll:[],
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    /** 查询产品信息列表 */
    getRoleList() {
        listRole().then(response => {
                this.roleList = response.rows;
                this.queryParams.roleId = this.roleList[0].roleId;
                this.getList();
            }
        );
    },
      getList(){
          this.checkedLimit = [];
          this.limitsAll = [];
          listLimits(this.queryParams.roleId).then(response => {
                  this.limits = response.data;
                  this.limits.forEach((item,index)=>{
                    if(item.haveRole == true){
                        this.checkedLimit.push(item.id);
                    }
                      this.limitsAll.push(item.id);
                  })
                  if(this.checkedLimit.length > 0 && this.checkedLimit.length == this.limits.length){
                      this.isIndeterminate = false;
                      this.checkAll = true;
                  }
              }
          );
      },
      roleChange(){
          this.getList();
      },
      handleCheckAllChange(val) {
          this.checkedLimit = val ? this.limitsAll : [];
          this.isIndeterminate = false;
      },
      handleCheckedLimitsChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.limits.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.limits.length;
      },
      handleSubmit(){
          let obj = {
              roleId:this.queryParams.roleId,
              importIds:this.checkedLimit
          }
          importRoleEdit(obj).then(response => {
              this.$modal.msgSuccess("修改成功");
          });
      },
  }
};
</script>
