<template>
  <div>
    <el-table
      :show-summary="showSummary !== undefined?true:false"
      :data="getPage.records"
      ref="moveTable"
      :header-cell-style="{background:'#F8F8F9'}"
      :height="tableHeight"
      v-loading="loading"
      @select-all="_selectAll"
      @selection-change="_selectRowChange"
      @cell-click="_cellClick"
      @current-change="_currentChange"
      @row-dblclick="_dbClickRow"
      :row-class-name="_tableRowClassName"
      stripe
      border
      size="small"
      style="width: 100%;"
      element-loading-text="拼命加载中..."
    >
      <el-table-column
        v-if="hideCheckbox===undefined"
        type="selection"
        width="55"
        fixed="left"
        align="center">
      </el-table-column>
      <slot></slot>
      <el-table-column
        :width="$optColWidth(iconMsg)"
        v-if="$optColWidth(iconMsg)>0?true:false"
        label="操作"
        align="center" fixed="right">
        <template slot-scope="scope">
          <IconList :msg="iconMsg" @on-result-change="_iconClick" :rowData="scope.row"
                    :rowIndex="scope.$index"></IconList>
        </template>
      </el-table-column>
      <slot name="col"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'PageTable',
  props: {
    pageColumns: null,
    tableHeight: null,
    hideCheckbox: null,
    optColWidth: null,
    getPage: null,
    iconMsg: null,
    warnKey: null,
    selectData: null,
    clickValue: null,
    dbClickRow: null,
    editable: null,
    showSummary: null // 是否显示总计
  },
  data() {
    return {
      loading: true,
      rowData: {},
      extendsData: {}, // 扩展数据，数据传不过来使用
      checkData: []
    }
  },
  methods: {
    // 点击单元格触发
    _cellClick(row, event, column) {
      if (event.label === '操作') {
      } else {
        this._rowClickChange(row)
      }
    },
    // 获取当前行数据与上一行数据
    _currentChange(currentRow, oldCurrentRow) {
      if (this.editable !== undefined) {
        if (currentRow) {
          this.$set(currentRow, 'editable', true)
        }
        if (oldCurrentRow) {
          this.$set(oldCurrentRow, 'editable', false)
        }
      }
    },
    _rowClickChange(row) {
      this.checkData = [row]
      if (this.clickValue === undefined) {
        // 默认选中该行数据
        this.$refs.moveTable.toggleRowSelection(row)
      } else {
        // 有clickValue参数时执行
        this.$emit('on-result-change', 'select', row)
      }
    },
    // 整行变色
    _tableRowClassName({ row, rowIndex }) {
      if (this.checkData.length !== 0) {
        /* 选中的进行高亮显示 */
        const index = this.checkData.indexOf(row)
        if (index !== -1) {
          return 'high-light-row'
        } else {
          /* 没选中的根据页面逻辑变色 */
          return this._rowClassName(row, rowIndex)
        }
      } else {
        /* 没选中的根据页面逻辑变色 */
        return this._rowClassName(row, rowIndex)
      }
    },
    _rowClassName(row, rowIndex) {
      return ''
    },
    _checkAll() {
      this.$refs.moveTable.toggleAllCheckboxRow()
    },
    _page(formId, uri, extendsData) {
      this.loading = true
      this.formId = formId
      const data = this.$serialize(this.formId)
      if (extendsData) {
        this.extendsData = extendsData
        Object.assign(data, this.extendsData)
      }
      this.$store.dispatch(uri, data).then(() => {
        this.loading = false
        this.$emit('on-result-change', 'page', '')
      })
    },
    // 多选
    _selectRowChange(data) {
      if (this.hideCheckbox === undefined) {
        this.checkData = data
        if (this.selectData !== undefined) {
          this.$emit('on-result-change', 'selectData', data)
        } else {
          const idList = []
          for (let i = 0; i < data.length; i++) {
            idList.push(data[i].id)
          }
          // 有checkbox 则返回选中的id数组
          this.$emit('on-result-change', 'selectIds', idList)
        }
      }
    },
    _selectAll: function(data) {
      this._selectRowChange(data)
    },
    // 操作列回调
    _iconClick(name, rowData, componentName, rowIndex) {
      this.$emit('on-result-change', 'iconClick', {
        name: name,
        rowData: rowData,
        componentName: componentName,
        rowIndex: rowIndex
      })
    },
    // 关闭loading
    _hideLoading() {
      this.loading = false
    },
    // 打开loading
    _showLoading() {
      this.loading = true
    },
    // 双击行操作
    _dbClickRow(row, event) {
      if (this.dbClickRow === undefined) {
        // 默认是有双击操作的，若此参数有值，则不返回
        this.$emit('on-result-change', 'dbSelect', row)
      }
    }
  }
}
</script>
