<template>
  <div class="config-wrapper">
    <el-button class="new-config" type="primary" size="small" @click="showConfigDialog">New Config</el-button>
    <el-table :data="tableData">
      <el-table-column prop="roleName" label="Role Name"></el-table-column>
      <el-table-column prop="resName" label="Resources"> </el-table-column>
      <template slot="empty" v-if="tableData.length == 0">
        <span>No data available</span>
      </template>
    </el-table>
    <el-dialog title="New Config" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" ref="ruleForm" label-width="100px" :rules="rules">
        <el-form-item prop="roleId" label="Role Name">
          <el-select v-model="form.roleId" placeholder=" " @change="cRole()">
            <el-option v-for="item in roleNames" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="resourceIds" label="Resources">
          <el-select v-model="form.resourceIds" placeholder=" " multiple :disabled="false" @change="changeChild">
            <el-option v-for="item in resourcesList"  :disabled="item.disabled" :key="item.resId" :label="item.resName" :value="item.resId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" size="small" @click="addConfig">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetResourceView,
  GetRoleItems,
  GetResourceItems,
  GetRoleTree,
  AddResource
} from "@/api/permission";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      roleNames: [],
      resourcesList: [],
      form: {
        roleId: '',
        resourceIds: []
      },
      rules: {
        roleId: [
          { required: true, message: "Please select role", trigger: "blur" },
        ],
        resourceIds: [
          { required: true, message: "Please select resources", trigger: "change" },
        ],
      },
      checkTwoDisableds:[],
      currentRole: '',
    };
  },
  created() {
    this.getTableData();
    //this.getResources();
  },
  methods: {
    getTableData() {
      GetResourceView({}).then((res) => {
        this.tableData = res;
      });
    },
    // getResources() {
    //   GetRoleItems({}).then((res) => {
    //     this.roleNames = res;
    //   });
    //   GetResourceItems({}).then((res) => {
    //     this.resourcesList = res;
    //   });
    // },
    cRole() {
      console.log(this.form.roleId);
      this.roleNames.map(item=>{
        if (item.roleId == this.form.roleId) {
          this.resourcesList = item.resources;
          this.form.resourceIds = []
          this.checkTwoDisableds = []
          this.currentRole = item.roleName;
          this.resourcesList.map(resItem=>{
            if (item.roleName == 'CLOUDIDP_EHR_ADMIN') {
              resItem.disabled = true;
            }else{
              resItem.disabled = false
            }
            if (resItem.checked) {
              this.form.resourceIds.push(resItem.resId);
              this.checkTwoDisableds.push(resItem.resId);   
            } 
          })


        }
      })
    },
    showConfigDialog() {
      GetRoleTree({}).then((res) => {
        this.roleNames = res
      });
      this.dialogVisible = true;
      setTimeout(() => {
        this.$refs.ruleForm.resetFields();
      }, 100)
    },
    addConfig() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.form.roleId);
          let data = {
            id: this.form.roleId,
            roleName: this.roleNames.filter(item => item.roleId === this.form.roleId)[0]['roleName'],
            resource: this.resourcesList.filter(resItem => this.form.resourceIds.includes(resItem.resId)),
          }
          if(data.roleName === 'CLOUDIDP_EHR_ADMIN') {
            this.$message("The basic role cannot be changed");
          } else {
            AddResource(data).then(() => {
              this.dialogVisible = false;
              this.getTableData();
            });
          }
        }
      });
    },

    changeChild(item){
      if(this.currentRole == 'CLOUDIDP_EHR_ADMIN') {
        this.checkTwoDisableds.map((disabledID)=>{
          if (this.form.resourceIds.indexOf(disabledID) == -1) {
            this.form.resourceIds.push(disabledID);
          }
        })
        console.log(' this.form.resourceIds', this.form.resourceIds);
      }
      
    }
  },
};
</script>
<style scoped>
.config-wrapper {
  position: relative;
}
.new-config {
  position: absolute;
  right: 0;
  top: -56px
}
</style>
