<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>
    <div class="search-bar" align="right">
      用户名：
      <el-input v-model="search.userName" @keyup.enter.native="searchClickHandler" :style="{'width':'20%'}"></el-input>
      真实姓名：
      <el-input v-model="search.realName" @keyup.enter.native="searchClickHandler" :style="{'width':'20%'}"></el-input>
      <el-button type="primary" @click="searchClickHandler">搜 索</el-button>
    </div>
    <el-table
      :data="ownerList"
      v-loading="dataLoading"
      style="width: 100%">
      <el-table-column label="用户" width="100" fixed >
        <template slot-scope="scope">
          <span>{{scope.row.indent}}</span>
          <el-checkbox
            :title="scope.row.owner"
            v-model="scope.row.checked"
            @change="val=>onBranchClick(scope.$index,val,scope.row)"
            :disabled="scope.row.disabled">
            {{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.items">
              <template v-if="item.name===o.name">
                <el-checkbox :key="index2"
                  v-model="item.checked"
                  @change="val=>onPrivItemClick(scope.$index,val,item)"
                  :disabled="scope.row.fullPrivFlag?true:((scope.row.checked===false)?(scope.row.disabled===false?item.disabled:scope.row.disabled):item.disabled)">
                  {{''}}</el-checkbox>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="page-wrap">
      <el-pagination class="page" @current-change="currentChangeHandler" @size-change="chooseSizeChangeHandler" :page-sizes="[5,10, 15, 20, 30, 50]" :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </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, //  是否全选
      total: 0, //  总数
      pageSize: 10, //  分页数目
      currentPage: 1, //  当前分页
      search: { userName: '', realName: '' } //  搜索条件
    }
  },
  watch: {
    tabName(val) {
      if (val === 'user') {
        this.loadColumnList()
        this.loadOwnerList()
        this.headerColumnIsChecked = true
      } else {
        this.headerColumnIsChecked = false
      }
    },
    ID(val) {
      if (this.tabName === 'user') {
        this.loadColumnList()
        this.loadOwnerList()
        this.headerColumnIsChecked = true
      } else {
        this.headerColumnIsChecked = false
      }
    }
  },
  created() {
    this.loadColumnList()
    this.loadOwnerList()
  },
  methods: {
    searchClickHandler() {
      this.loadOwnerList()
    },
    chooseSizeChangeHandler(val) {
      this.pageSize = val || this.pageSize
      this.loadOwnerList()
    },
    currentChangeHandler(val) {
      this.currentPage = val || this.currentPage
      this.loadOwnerList()
    },
    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.items.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.items.forEach((row, index2) => {
          let disabled = false
          if (element.fullPrivFlag) {
            disabled = true
          } else {
            disabled =
              element.checked === false
                ? element.disabled === false
                  ? row.disabled
                  : element.disabled
                : row.disabled
          }
          if (!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.items.forEach((row, index2) => {
        let disabled = false
        if (element.fullPrivFlag) {
          disabled = true
        } else {
          disabled =
            element.checked === false
              ? element.disabled === false
                ? row.disabled
                : element.disabled
              : row.disabled
        }
        if (row.owner === value) {
          if (!disabled) {
            row.checked = isChecked
          }
        }
      })
    },
    onColumnClick(isCheck, event) {
      let isChecked = isCheck
      let value = event.item
      this.ownerList.forEach((element, index) => {
        let count = 0
        element.items.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,
        userName: this.search.userName,
        realName: this.search.realName,
        pageSize: this.pageSize,
        pageIndex: this.currentPage - 1
      }
      this.dataLoading = true
      let res = await axios.get(
        '/ui/contentcore/assignpriv/bindownerdatalist',
        { params: opts }
      )
      this.dataLoading = false
      if (res.data.status === 1) {
        if (res.data.data.data && res.data.data.data.length) {
          this.ownerList = res.data.data.data
          this.total = res.data.data.total
        }
      }
    },
    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) {
          let columnsWidth = [95, 95, 95, 95, 95, 110, 95, 95]
          if (this.privType === 'site') {
            columnsWidth.push(170)
          }
          this.columnList = res.data.data
        }
      }
    }
  }
}
</script>
<style scoped>
.search-bar {
  position: absolute;
  top: 0px;
  right: 1%;
  z-index: 999;
  padding: 10px 10px 0 10px;
  min-height: 50px
}
</style>
