<template>
  <div>
    <el-table
      ref="moveTable"
      v-loading="loading"
      stripe
      border
      size="small"
      highlight-current-row
      :data="getPage.records"
      style="width: 100%;"
      :height="tableHeight"
      @select-all="_selectAll"
      @selection-change="_selectRowChange"
      @cell-click="_cellClick"
      @row-dblclick="_dbClickRow"
    >
      <el-table-column
        v-if="showCheckBox!==undefined&&showCheckBox!==false"
        type="selection"
        width="55"
        fixed="left"
        align="center"
      />
      <slot />
      <el-table-column
        v-if="iconMsgList.length>0?true:false"
        label="操作"
        align="center"
        :width="$optColWidth(iconMsgList)"
        fixed="right"
      >
        <template slot-scope="scope">
          <icon-list :msg="iconMsgList" :row-data="scope.row" @on-result-change="_iconClick" />
        </template>
      </el-table-column>
      <slot name="col" />
    </el-table>
  </div>
</template>

<script>
export default {
  props: [
    'pageColumns',
    'tableHeight',
    'showCheckBox',
    'optColWidth',
    'getPage',
    'iconMsg',
    'warnKey',
    'selectData',
    'click',
    'tableName'
  ],
  data() {
    return {
      formId: '', // 表单id
      loading: true,
      pageParams: {
        page: 1,
        rows: this.$pageParams
      },
      rowData: {},
      pageSizeOpts: this.$pageSizeOpts,
      iconMsgList: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.iconMsgList = this.iconMsg ? this.$showBtnList(this.iconMsg) : []
    })
  },
  methods: {
    // 点击单元格触发
    _cellClick(row, event, column) {
      if (event.label === '操作') {
      } else {
        this._rowClickChange(row)
      }
    },
    _rowClickChange(row) {
      if (this.click === undefined) {
        // 默认选中该行数据
        this.$refs.moveTable.toggleRowSelection(row)
      } else {
        // 有click参数时执行
        this.$emit('on-result-change', 'click', row)
      }
    },
    // 初始化加载
    _initTable() {
      this.loading = false
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._pageParamsChange()
    },
    _pageSizeChange(rows) {
      if (rows !== this.pageParams.rows) {
        this.pageParams.rows = rows
        this._pageParamsChange()
      }
    },
    _pageParamsChange() {
      this.$emit('on-result-change', 'page', '')
    },
    _searchParams() {
      this.loading = true
      return this.pageParams
    },
    // 多选
    _selectRowChange(data) {
      // 默认返回的是id数组
      if (this.showCheckBox !== undefined) {
        // 有checkbox 默认返回选中的id数组
        if (this.selectData === undefined) {
          const idList = []
          for (let i = 0; i < data.length; i++) {
            idList.push(data[i].id)
          }
          this.$emit('on-result-change', 'selectIds', idList)
        } else {
          // 有selectData参数时执行
          this.$emit('on-result-change', 'selectData', data)
        }
      }
    },
    _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) {
      this.$emit('on-result-change', 'dbSelect', row)
    }
  }
}
</script>
