<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.$index]" v-model="mainCheck[scope.$index]"
                         @change="handleCheckAllChange(scope.$index, mainCheck[scope.$index])">
              {{scope.row.listName}}
            </el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="权限">
          <template slot-scope="scope">
            <el-checkbox-group v-model="checkedValue[scope.$index]" class="checkgroup"
                               @change="handlePermissionChange(scope.$index)">
              <el-checkbox v-for="item in scope.row.columns" :label="item.index" :key="item.index">
                {{item.header}}
              </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-column',
  created () {

  },
  mounted () {
    network.getData('admin/role-column/' + this.$route.params.id).then(response => {
      this.tableData = response
      for(let i in this.tableData){
        this.checkedValue.push([])
        this.mainCheck.push(false)
        this.isIndeterminate.push(false)
      }
      for (let i in response) {
        this.mainCheck[i] = false
        for (let j of response[i].columns) {
          if (j.isChecked) {
            this.checkedValue[i].push(j.index)
          }
        }
        this.checkedStatus(i)
      }
      this.loading = false
    })
  },
  data () {
    return {
      tableData: null,
      checkedValue: [],
      mainCheck: [],
      isIndeterminate: [],
      loading: true,
      submitButtonStat: false,
    }
  },
  methods: {
    handleCheckAllChange (index, isAllChecked) {
      if(isAllChecked){
        this.$set(this.checkedValue, index, [])
        this.$set(this.isIndeterminate, index, false)
        for(let i in this.tableData[index].columns){
          this.checkedValue[index].push(this.tableData[index].columns[i].index)
        }
      } else {
        this.$set(this.checkedValue, index, [])
        this.$set(this.isIndeterminate, index, false)
      }
    },
    handlePermissionChange (index) {
      this.checkedStatus(index)
    },
    onSubmit () {
      let submitData = {}
      for(let i in this.tableData){
        submitData[this.tableData[i].listClass] = this.checkedValue[i]
      }
      this.submitButtonStat = true
      network.postData('admin/role-column/' + this.$route.params.id, {
        columnPermission: submitData
      }).then(response => {
        this.submitButtonStat = false
        this.$message({message: response, type: 'success'})
      }).catch(() => {
        this.submitButtonStat = false
      })
    },
    checkedStatus(index){
      this.$set(this.mainCheck, index, this.checkedValue[index].length === this.tableData[index].columns.length)
      this.$set(this.isIndeterminate, index, this.checkedValue[index].length > 0 && this.checkedValue[index].length < this.tableData[index].columns.length)
    },
  }
}
</script>

<style scoped>

</style>
