<template>
  <div v-loading="loading">
    <div class="white-box admin-role-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="模块" width="180">
          <template slot-scope="scope">
            <el-checkbox :indeterminate="isIndeterminate[scope.row.id]" v-model="mainCheck[scope.row.id]"
                         @change="handleCheckAllChange(scope.row.id, scope.row.childPermission)">
              {{scope.row.mainPermission.name}}
            </el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="权限">
          <template slot-scope="scope">
            <el-checkbox-group v-model="checkedValue" class="checkgroup"
                               @change="handlePermissionChange(scope.row.id, scope.row.childPermission)">
              <el-checkbox v-for="item in scope.row.childPermission" :label="item.path" :key="item.name">
                {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" :loading="submitButtonStat" @click="onSubmit" style="float: right;">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'

export default {
  name: 'role-permission',
  created () {

  },
  mounted () {
    network.getData('admin/role-permission/' + this.$route.params.id).then(response => {
      //console.log(response);
      this.tableData = response
      this.checkedValue = []
      for (let i of response) {
        this.mainCheck[i] = false
        for (let j of i.childPermission) {
          if (j.isChecked) {
            this.checkedValue.push(j.path)
          }
        }
        this.initCheckValue(i.id, i.childPermission)
      }
      this.loading = false
    })
  },
  data () {
    return {
      tableData: null,
      checkedValue: [],
      mainCheck: {},
      isIndeterminate: {},
      loading: true,
      submitButtonStat: false,
    }
  },
  methods: {
    handleCheckAllChange (id, child) {
      //this.mainCheck[id] = !this.mainCheck[id];
      if (this.mainCheck[id]) {
        this.$set(this.isIndeterminate, id, false)
        for (let i in child) {
          tool.removeFromArr(this.checkedValue, child[i].path)
          this.checkedValue.push(child[i].path)
        }
      } else {
        this.$set(this.isIndeterminate, id, false)
        for (let i in child) {
          tool.removeFromArr(this.checkedValue, child[i].path)
        }
      }

    },
    handlePermissionChange (id, child) {
      this.initCheckValue(id, child)
    },
    onSubmit () {
      this.submitButtonStat = true
      network.postData('admin/role-permission/' + this.$route.params.id, {
        permission: this.checkedValue
      }).then(response => {
        this.submitButtonStat = false
        this.$message({message: response, type: 'success'})
      }).catch(() => {
        this.submitButtonStat = false
      })
    },
    initCheckValue (id, child) {
      let flag = true
      for (let i in child) {
        if (this.checkedValue.find(item => child[i].path === item) === undefined) {
          flag = false
        }
      }
      if (flag) {
        this.$set(this.isIndeterminate, id, false)
        this.$set(this.mainCheck, id, true)
      } else {
        this.$set(this.isIndeterminate, id, true)
        this.$set(this.mainCheck, id, false)
        let mainFlag = false
        for (let i in this.checkedValue) {
          if (child.find(item => this.checkedValue[i] === item.path) !== undefined) {
            mainFlag = true
          }
        }
        if (!mainFlag) {
          this.$set(this.isIndeterminate, id, false)
          this.$set(this.mainCheck, id, false)
        }
      }
    }
  }
}
</script>

<style scoped>

</style>