<template>
  <div>
    <!--表格-->
    <div style="position: relative">
      <div>
        <el-table
          ref="moveTable"
          v-loading="loading"
          stripe
          border
          size="small"
          highlight-current-row
          :data="getPage.records"
          style="width: 100%"
          :height="tableHeight"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          @select-all="_selectAll"
          @selection-change="_selectRowChange"
          @row-dblclick="_dbClickRow"
          @cell-click="_cellClick"
          @current-change="_currentChange"
        >
          <el-table-column
            v-if="showCheckBox!==undefined&&showCheckBox!==false"
            type="selection"
            width="55"
            fixed="left"
            align="center"
          />
          <el-table-column
            type="index"
            width="45"
            fixed="left"
          />
          <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>
      <!--自定义表格列-->
      <div style="position: absolute;right:0;top:0;z-index:2000">
        <slot name="setting" />
      </div>
    </div>
    <el-pagination
      v-if="hidePage===undefined"
      class="my-el-page"
      style="margin-top:10px"
      background
      :current-page="getPage.current"
      :page-sizes="pageSizeOpts"
      :page-size="getPage.size"
      :layout="layout?layout:pageLayout"
      :total="getPage.total"
      @size-change="_pageSizeChange"
      @current-change="_pageChange"
    />
  </div>
</template>

<script>
import Store from 'store2'
import { sysTableColumn, sysResource } from '../../api'
import global from '../../api/config'

export default {
  props: [
    'pageColumns',
    'tableHeight',
    'showCheckBox',
    'optColWidth',
    'getPage',
    'iconMsg',
    'warnKey',
    'selectData',
    'hidePage',
    'click',
    'tableName',
    'layout',
    'editable'
  ],
  data() {
    return {
      formId: '', // 表单id
      loading: true,
      pageParams: {
        page: 1,
        rows: this.$pageParams
      },
      rowData: {},
      pageSizeOpts: this.$pageSizeOpts,
      pageLayout: this.$pageLayout,
      iconMsgList: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      if (!Store.session('showBtnList') && global.getLn()) {
        this._getPermissionBtn()
      } else {
        this.iconMsgList = this.iconMsg ? this.$showBtnList(this.iconMsg) : []
      }
    })
  },
  methods: {
    // 获取按钮权限 ---- 临时做法，后期修改
    _getPermissionBtn: async function() {
      const result = await sysResource.getBtn({ theme: global.getCode() })
      Store.session('showBtnList', result.join(','))
      // console.log('showBtnList==', Store.session('showBtnList'))
      this.iconMsgList = this.iconMsg ? this.$showBtnList(this.iconMsg) : []
    },
    // 获取当前行数据与上一行数据
    _currentChange(currentRow, oldCurrentRow) {
      if (this.editable !== undefined) {
        if (currentRow) {
          this.$set(currentRow, 'editable', true)
        }
        if (oldCurrentRow) {
          this.$set(oldCurrentRow, 'editable', false)
        }
      }
    },
    // 点击单元格触发
    _cellClick(row, event, column) {
      if (event.label !== '操作') {
        this._rowClickChange(row)
      }
    },
    _rowClickChange(row) {
      if (this.click === undefined) {
        // 默认选中该行数据
        this.$refs.moveTable.toggleRowSelection(row)
      } else {
        // 有click参数时执行
        this.$emit('on-result-change', 'click', row)
      }
    },
    _clearSelection() {
      this.$refs.moveTable.clearSelection()
    },
    // 初始化加载
    _initTable() {
      this.loading = false
      if (this.tableName) {
        // tableName存在-----支持自定义表格
        this._getByUserTable()
      }
    },
    // 查询用户下的表格数据
    _getByUserTable: async function() {
      const userTableCode = await sysTableColumn.getByUserTable(this.tableName)
      this.$emit(
        'on-result-change',
        'table-col',
        this.$tableColumns(this.pageColumns, userTableCode)
      )
    },
    _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
      const data = {}
      if (this.hidePage !== undefined) {
        // 不分页
        return data
      } else {
        // 分页
        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
      })
    },
    // 双击行操作
    _dbClickRow(row, event) {
      this.$emit('on-result-change', 'dbSelect', row)
    },
    _hideLoading() {
      this.loading = false
    }
  }
}
</script>
