<template>
  <div>
    <el-toolbar>
      <el-button :loading="submitLoading" @click="saveClickHandler" >
        <i class="fa fa-floppy-o"></i>保存
      </el-button>
      <el-button @click="selectAllClickHandler">
        <i class="fa fa-check-circle-o"></i>全选
      </el-button>
    </el-toolbar>
    <el-table
      :data="ownerList"
      v-loading="dataLoading"
      style="width: 100%"
      :cell-style="{padding:'5px 0'}">
      <el-table-column label="角色" width="150" fixed>
        <template slot-scope="scope">
          <span>{{scope.row.indent}}</span>
          <el-checkbox
            v-model="scope.row.checked"
            :name="scope.row.owner"
            @change="val=>onBranchClick(scope.$index,val,scope.row)"
            :disabled="scope.row.disabled===true">
            {{scope.row.name}}
          </el-checkbox>
        </template>
      </el-table-column>
      <template v-for="(o, index) in columnList" v-if="headerColumnIsChecked">
        <el-table-column :key="index" :render-header="renderHeaderFunc" align="left" :width="o.width">
          <template slot-scope="scope">
            <template v-for="(item, index2) in scope.row.privItem">
              <template v-if="item.name===o.name">
                <el-checkbox :key="index2"
                  v-model="item.checked"
                  @change="val=>onPrivItemClick(scope.$index,val,item)"
                  :name="scope.row.owner"
                  :disabled="item.disabled">
                  {{''}}</el-checkbox>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tabName: String,
    ID: [Number, String],
    privType: String,
    ownerType: String
  },
  data() {
    return {
      submitLoading: false,
      dataLoading: false,
      ownerList: [], //  机构列表
      columnList: [], //  操作列表
      headerColumnIsChecked: true,
      isCheckedAll: false //  是否全选
    }
  },
  methods: {
    onPrivItemClick($index, isCheck, event) {
      let isChecked = isCheck
      let value = event.owner
      let element = this.ownerList[$index]
      if (value === element.owner && isChecked) {
        element.checked = isChecked
      }
    },
    async saveClickHandler() {
      let data = {}
      this.ownerList.forEach((element, index) => {
        let owner = {}
        if (!element.disabled) {
          owner[element.ownerItem] = element.checked === true ? 1 : 0
        }
        element.privItem.forEach((row, index2) => {
          if (!row.disabled) {
            owner[row.item + '.' + this.ID] = row.checked === true ? 1 : 0
          }
        })
        if (JSON.stringify(owner) !== '{}') {
          data[element.owner] = owner
        }
      })
      data = JSON.stringify(data)
      let opts = { ID: this.ID, data: {} }
      opts.data = data
      this.submitLoading = true
      let res = await axios.put(
        `/ui/contentcore/assignpriv/${this.ownerType}`,
        opts
      )
      this.submitLoading = false
      if (res.data.status === 1) {
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.loadOwnerList()
      } else {
        this.$message({
          message: res.data.message,
          type: 'error'
        })
      }
    },
    selectAllClickHandler() {
      this.isCheckedAll = !this.isCheckedAll
      this.ownerList.forEach((element, index) => {
        element.privItem.forEach((row, index2) => {
          if (!row.disabled) {
            row.checked = this.isCheckedAll
          }
        })
        if (!element.disabled) {
          element.checked = this.isCheckedAll
        }
      })
    },
    onBranchClick($index, isCheck, event) {
      let isChecked = isCheck
      let value = event.owner
      let element = this.ownerList[$index]
      element.privItem.forEach((row, index2) => {
        if (row.owner === value) {
          row.checked = isChecked
        }
      })
    },
    onColumnClick(isCheck, event) {
      let isChecked = isCheck
      let value = event.item
      this.ownerList.forEach((element, index) => {
        let count = 0
        element.privItem.forEach((row, index2) => {
          if (row.item === value && !row.disabled) {
            row.checked = isChecked
          }
          if (row.checked) {
            count++
          }
        })
        element.checked = count > 0
      })
    },
    renderHeaderFunc(h, { column, $index }) {
      return h(
        'el-checkbox',
        {
          props: {
            label: this.columnList[$index - 1].item,
            type: 'checkbox'
          },
          on: {
            change: val => this.onColumnClick(val, this.columnList[$index - 1])
          }
        },
        this.columnList[$index - 1].name
      )
    },
    async loadOwnerList() {
      this.ownerList = []
      let opts = {
        ID: this.ID,
        ownerType: this.ownerType,
        privType: this.privType
      }
      this.dataLoading = true
      let res = await axios.get('/ui/contentcore/assignpriv/bindownerlist', {
        params: opts
      })
      if (res.data.status === 1) {
        if (res.data.data && res.data.data.length) {
          this.initPriv(res.data.data)
        }
      } else {
        this.dataLoading = false
      }
    },
    async loadColumnList() {
      let res = await axios.get(
        '/ui/contentcore/assignpriv/bindprivcolumnlist',
        { params: { privType: this.privType } }
      )
      if (res.data.status === 1) {
        if (res.data.data && res.data.data.length) {
          this.columnList = res.data.data
          let columnsWidth = [95, 95, 95, 95, 95, 110, 95, 95]
          if (this.privType === 'site') {
            columnsWidth.push(170)
          }
          columnsWidth.forEach((val, index) => {
            this.columnList[index].width = val
          })
        }
      }
    },
    async initPriv(data) {
      let opts = {
        ID: this.ID,
        ownerType: this.ownerType,
        privType: this.privType
      }
      let res = await axios.get('/ui/contentcore/assignpriv/init', {
        params: opts
      })
      if (res.data.status === 1) {
        let mapx = res.data.data.privsMapx
        let uncheckableMapx = res.data.data.uncheckableMapx
        if (mapx) {
          data.forEach((element, index) => {
            let ownerPriv = mapx[element.owner]
            if (ownerPriv) {
              if (String(ownerPriv[element.ownerItem]) === '1') {
                element.checked = true
              }
              element.privItem.forEach((row, index2) => {
                if (String(ownerPriv[row.item + '.' + this.ID]) === '1') {
                  row.checked = true
                }
              })
            }
          })
        }
        if (uncheckableMapx) {
          data.forEach((element, index) => {
            let uncheckablePriv = uncheckableMapx[element.owner]
            if (uncheckablePriv) {
              if (String(uncheckablePriv[element.ownerItem]) === '1') {
                element.disabled = true
              }
              element.privItem.forEach((row, index2) => {
                if (row.owner === element.owner) {
                  if (String(uncheckablePriv[row.item + '.' + this.ID]) === '1') {
                    row.disabled = true
                  }
                }
              })
            }
          })
        }
        this.dataLoading = false
        this.ownerList = data
      }
    }
  },
  components: {},
  watch: {
    tabName(val) {
      if (val === 'role') {
        this.loadColumnList()
        this.loadOwnerList()
        this.headerColumnIsChecked = true
      } else {
        this.headerColumnIsChecked = false
      }
    },
    ID(val) {
      if (this.tabName === 'role') {
        this.loadColumnList()
        this.loadOwnerList()
        this.headerColumnIsChecked = true
      } else {
        this.headerColumnIsChecked = false
      }
    }
  },
  created() {
    this.loadColumnList()
    this.loadOwnerList()
  }
}
</script>
<style scoped>

</style>
