<style lang="less" scoped>
.table-view-div {
  width: 100%;
  height: 100%;
  position: relative;
}
.dept-personnel-header-div {
  height: 35px;
  margin-top: 0 !important;
  .header-title-span {
    margin: 0 10px 0 10px;
    float: left;
    width: 60px;
  }
  .just-selected {
    float: left;
    margin-left: 10px;
  }
  .fuzzy-search {
    float: right;
    min-width: 250px;
    height: 30px;
  }
  .search-icon {
    cursor: pointer;
    font-size: 20px;
    opacity: 0.5;
    height: 28px;
  }
  .search-icon:hover {
    color: #409c9c !important;
  }
}
.dept-personnel-table-div {
  height: calc(~'100% - 80px');
  width: 100%;
}

.dept-personnel-table-class {
  height: 100%;
  width: 100%;
}

.dept-personnel-pager {
  position: absolute;
  bottom: 1px;
  padding: 0 10px 0 10px;
  height: 53px;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
}
.dept-personnel-single-select .ivu-table-header .ivu-checkbox-wrapper {
  display: none;
}
</style>
<template>
  <div
    class="table-view-div"
    ref="_tableView"
  >
    <div class="dept-personnel-header-div">
      <div class="fuzzy-search">
        <Input
          v-model="searchInfo"
          search
          :placeholder="searchPlaceholder"
          @on-search="onSearchEnter"
          @on-clear="onSearchClear"
        />
      </div>
    </div>
    <div
      ref="_tableDiv"
      class="dept-personnel-table-div"
    >
      <Table
        ref="_table"
        :class="tableClass"
        :columns="columns"
        :data="tableData"
        :height="tableHeight"
        border
        stripe
        :loading="loading"
        @on-select="onSelect"
        @on-select-cancel="onSelectCancel"
        @on-select-all="onSelectAll"
        @on-select-all-cancel="onSelectAllCancel"
      >
      </Table>
    </div>
    <div class="dept-personnel-pager">
      <new-page
        size="small"
        :total="pageTotal"
        :page-size="pageSize"
        @on-change="onPageChange"
        show-total
        show-elevator
      ></new-page>
    </div>
  </div>
</template>
<script>
import NewPage from './new-page'

export default {
  components: {
    NewPage,
  },

  data() {
    return {
      tableData: [],
      searchInfo: '',
      tableHeight: 431,
    }
  },
  props: {
    treeDataMap: {
      type: Object
    },
    structtype: {
      type: Number
    },
    isLeaf: {
      type: Boolean,
      default: false
    },
    primaryKey: {
      type: String,
      require: true,
    },
    columns: {
      type: Array,
      require: true,
    },
    data: {
      type: Array,
      require: true,
    },
    pageTotal: {
      type: Number,
      default: () => 0,
    },
    pageSize: {
      type: Number,
      default: () => 20,
    },
    selection: {
      type: Array,
      default: () => [],
    },
    multiple: {
      type: Boolean,
      default: () => false,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    searchPlaceholder: {
      type: String,
      default: '',
    },
    canSwitchMode: {
      type: Boolean,
      default: function () {
        return true
      },
    },
  },
  watch: {
    data: {
      handler: function (newVal) {
        this.tableData = JSON.parse(JSON.stringify(newVal))
        if (this.isLeaf && this.structtype !== 1) {
          // 后端不给返回是否是叶子节点的判断
          this.tableData = this.tableData.map(item => {
            if (this.treeDataMap[item.code] && this.treeDataMap[item.code].length === 0) {
              item._disabled = false
            } else {
              item._disabled = true
            }
            return item
          })
        }

      },
    },
    selection: {
      handler: function (newVal) {
        this.refreshTableSelected(newVal)
      },
    },
  },
  computed: {
    tableClass: {
      get: function () {
        let _class = ['dept-personnel-table-class']
        if (!this.multiple) {
          _class.push('dept-personnel-single-select')
        }
        return _class.join(' ')
      },
    },
  },
  mounted() {
    if (this.data) {
      this.tableData = JSON.parse(JSON.stringify(this.data))
    } else {
      this.tableData = []
    }
    this.$nextTick(() => this.resizeTableHeight())
  },
  methods: {
    resizeTableHeight() {
      this.tableHeight = this.$refs['_tableView']
        ? this.$refs['_tableView'].offsetHeight - 84
        : 431
    },
    resize() {},
    onPageChange(pageNo) {
      this.$emit('on-page-change', pageNo)
    },
    onSelect(selection, row) {
      let _selection = []
      if (this.multiple) {
        _selection = JSON.parse(JSON.stringify(this.selection))
        if (!this.isSelected(row)) {
          _selection.push(JSON.parse(JSON.stringify(row)))
        }
      } else {
        _selection.push(JSON.parse(JSON.stringify(row)))
      }
      this.updateCheckedStatus(_selection, true)
      this.$emit('on-select', _selection, row)
    },
    isSelected(row, selection) {
      let value = selection ? selection : this.selection
      let obj = {}
      obj[this.primaryKey] = row[this.primaryKey]
      let selected = _.find(value, obj)
      return selected ? true : false
    },
    onSelectCancel(selection, row) {
      if (this.multiple) {
        let _selection = JSON.parse(JSON.stringify(this.selection))
        for (let i = _selection.length - 1; i >= 0; i--) {
          if (row[this.primaryKey] == _selection[i][this.primaryKey]) {
            _selection.splice(i, 1)
          }
        }
        this.updateCheckedStatus(_selection, true)
        this.$emit('on-select-cancel', _selection, row)
      } else {
        this.tableData.map((value) => (value._checked = false))
        this.$emit('on-select-cancel', [], row)
      }
    },
    onSelectAll(selection) {
      this.multiple
        ? this.multipleSelectAll(selection)
        : this.radioSelectAll(selection)
    },
    multipleSelectAll(selection) {
      let _selection = JSON.parse(JSON.stringify(this.selection))
      selection.map((value) => {
        if (!this.isSelected(value)) {
          _selection.push(value)
        }
      })
      this.updateCheckedStatus(_selection, true)
      this.$emit('on-select-all', _selection, selection)
    },
    radioSelectAll(selection) {
      this.radioSelectAllCancel(selection)
    },
    onSelectAllCancel(selection) {
      this.multiple
        ? this.multipleSelectAllCancel(selection)
        : this.radioSelectAllCancel(selection)
    },
    radioSelectAllCancel(selection) {
      this.tableData.map((row) => {
        row._checked = false
        this.selection.map((value) => {
          if (value[this.primaryKey] == row[this.primaryKey]) {
            row._checked = true
            return
          }
        })
      })
    },
    multipleSelectAllCancel(selection) {
      let _selection = JSON.parse(JSON.stringify(this.selection))
      let predicate = {}
      for (let i = _selection.length - 1; i >= 0; i--) {
        predicate[this.primaryKey] = _selection[i][this.primaryKey]
        let obj = _.find(this.tableData, predicate)
        if (obj) {
          _selection.splice(i, 1)
        }
      }
      this.updateCheckedStatus(_selection, true)
      this.$emit('on-select-all-cancel', _selection)
    },
    updateCheckedStatus(array, status) {
      array.map((value) => (value._checked = status))
    },
    onSearchEnter(val) {
      this.searchInfo = val
      this.$emit('on-search-enter', this.searchInfo)
    },
    onSearchClear(val) {
      this.searchInfo = ''
      this.$emit('on-search-enter', this.searchInfo)
    },
    refreshTableSelected(selection) {
      this.tableData.map((item) => {
        item._checked = this.isSelected(item, selection)
      })
    },
  },
}
</script>