<template>
  <div>
    <div style="position: relative">
      <div>
        <el-table
          ref="moveTable"
          :data="getPage.records"
          :height="tableHeight"
          v-loading="loading"
          @select-all="_selectAll"
          @selection-change="_selectRowChange"
          @cell-click="_cellClick"
          @row-dblclick="_dbClickRow"
          :cell-class-name="_tableCellClassName"
          :row-class-name="_tableRowClassName"
          @current-change="_currentChange"
          stripe
          border
          size="small"
          style="width: 100%"
          element-loading-text="拼命加载中...">
          <el-table-column
            v-if="hideCheckbox===undefined || hideCheckbox === false"
            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>
      <!--自定义表格列-->
      <div style="position: absolute;right:0;top:0;z-index:2000">
        <slot name="setting"></slot>
      </div>
    </div>
    <Page v-if="hidePage===undefined" :total="getPage.total" :page-size="getPage.size" :current="getPage.current"
          @on-change="_pageChange"
          @on-page-size-change='_pageSizeChange' :page-size-opts="pageSizeOpts"
          :show-elevator="hideElevator===undefined" :show-total="hideTotal===undefined"
          :show-sizer="hideSizer===undefined" placement="top"
          style="margin: 10px 0 0"></Page>
  </div>
</template>
<script>
// import { sys-table-column } from '../../../'
export default {
  name: 'PageTable',
  props: {
    noHighlight: null, // 不高亮显示
    pageColumns: null,
    hideCheckbox: null,
    optColWidth: null,
    tableHeight: null,
    getPage: null,
    iconMsg: null,
    selectData: null,
    hidePage: null,
    hideElevator: null,
    hideTotal: null,
    hideSizer: null,
    clickValue: null, // 单击返回值
    noWarning: null, // 不显示警告提示

    isReport: null, // 判断是否是报告
    isDataInput: null, // 判断数据录入
    isTask: null, // 判断是否是检测管理
    isView: null, // 预览报告
    isHandle: null, // 样品
    tableName: null, // 该值存在，则支持自定义表格
    editable: null,
    isGC: null // 国抽（抽样单管理）
  },
  data() {
    return {
      formId: '', // 表单id
      loading: false,
      isRowClick: false,
      pageParams: {
        rows: this.$defRow
      },
      extendsData: {}, // 扩展数据，数据传不过来使用
      rowData: {},
      pageSizeOpts: this.$pageSizeOpt,
      sampleHandleValue: '',
      checkData: []
    }
  },
  mounted() {
    // 样品存储期限预警
    this.sampleHandleValue = Number(localStorage.getItem('sampleHandleValue'))
  },
  methods: {
    // _initTable() {
    //   this.loading = false
    //   if (this.tableName) {
    //     // tableName存在-----支持自定义表格
    //     this._getByUserTable()
    //   }
    // },
    // 点击单元格触发
    _cellClick(row, event, column) {
      if (event.label === '操作') {
      } else {
        this._rowClickChange(row)
      }
    },
    _rowClickChange(row) {
      this.checkData = [row]
      if (this.clickValue === undefined) {
        // 默认选中该行数据
        this.$refs.moveTable.toggleRowSelection(row)
      } else {
        // 有clickValue参数时执行
        this.$emit('on-result-change', 'select', row)
      }
    },
    _checkAll() {
      this.$refs.moveTable.toggleAllCheckboxRow()
    },
    _clearSelection() {
      this.$refs.moveTable.clearSelection()
    },
    // 获取当前行数据与上一行数据
    _currentChange(currentRow, oldCurrentRow) {
      if (this.editable !== undefined) {
        if (currentRow) {
          this.$set(currentRow, 'editable', true)
        }
        if (oldCurrentRow) {
          this.$set(oldCurrentRow, 'editable', false)
        }
      }
    },
    // 整行变色
    _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) {
      if (this.isHandle !== undefined && row.endDate) {
        // 样品待处理界面
        if (this.$warningValue(row.endDate) <= 0) {
          return 'warning-row' // 红色
        } else if (
          this.$warningValue(row.endDate) > 0 &&
          this.$warningValue(row.endDate) <= this.sampleHandleValue
        ) {
          return 'warn-row' // 橙色
        }
      } else {
        return ''
      }
    },
    // 单元格变色
    _tableCellClassName({ row, column, rowIndex, columnIndex }) {
      if (this.isReport !== undefined) {
        // 报告管理
        if (
          column.property === 'sampleProgress' &&
          row.sampleProgress &&
          row.sampleProgress.indexOf('退回') !== -1
        ) {
          // 含有退回就变红
          return 'cell-red'
        }
        if (
          column.property === 'progress' &&
          row.progress &&
          row.progress.indexOf('退回') !== -1
        ) {
          // 含有退回就变红
          return 'cell-red'
        }
        // 是否合格字体变色
        if (
          column.property === 'isEligible' &&
          row.isEligible &&
          row.isEligible === '合格'
        ) {
          return 'cell-blue-color'
        } else if (
          column.property === 'isEligible' &&
          row.isEligible &&
          row.isEligible === '不合格'
        ) {
          return 'cell-red-color'
        }
      } else if (this.isDataInput !== undefined) {
        if (
          column.property === 'name' &&
          row.progress &&
          row.progress.display.indexOf('退回') !== -1
        ) {
          // 含有退回就变红
          return 'cell-red'
        }
      } else if (this.isTask !== undefined) {
        if (
          column.property === 'serviceType' &&
          row.serviceType &&
          row.serviceType.indexOf('加急') !== -1
        ) {
          return 'cell-red'
        }
        if (
          column.property === 'name' &&
          row.name &&
          row.name.indexOf('复测') !== -1
        ) {
          // 含有复测就变红
          return 'cell-red'
        }
      } else if (this.isGC !== undefined) {
        // 国抽的抽样单管理
        if (
          column.property === 'samplingNum' &&
          row.unsuccessfulCount &&
          row.unsuccessfulCount > 0
        ) {
          // 国抽对接未成功项目数量(抽样单编号变红)
          return 'cell-red'
        }
      } else {
        // 其他列表状态
        // eslint-disable-next-line no-lonely-if
        if (column.property === 'progress') {
          if (undefined === row.progress) {
            return 'cell-blue-color'
          } else if (
            undefined !== row.progress &&
            undefined !== row.progress.display
          ) {
            if (row.progress.display.indexOf('退回') !== -1) {
              return 'cell-red-color'
            } else {
              return 'cell-blue-color'
            }
          } else if (undefined !== row.progress) {
            if (row.progress.indexOf('退回') !== -1) {
              return 'cell-red-color'
            } else {
              return 'cell-blue-color'
            }
          } else {
            return 'cell-blue-color'
          }
        } else if (column.property === 'status') {
          if (
            row.status &&
            row.status.display !== undefined &&
            row.status.display.indexOf('退回') !== -1
          ) {
            return 'cell-red-color'
          } else {
            return 'cell-blue-color'
          }
        }
      }
    },
    _searchParams() {
      const data = {}
      const serData = this.$serialize(this.formId)
      Object.assign(data, serData, this.extendsData)
      if (this.hidePage === undefined) {
        return this.$extend(data, this.pageParams)
      } else {
        return this.$extend(data)
      }
    },
    _page(formId, uri, extendsData) {
      this.loading = true
      if (this.tableName) {
        // tableName存在-----支持自定义表格
        this._settingCol(formId, uri, extendsData)
      } else {
        this._pageTemp(formId, uri, extendsData)
      }
    },
    _settingCol(formId, uri, extendsData) {
      if (uri) {
        // 为了避免uri为undefined
        this.$store
          .dispatch('SysTableColumn/getByTableName', this.tableName)
          .then(() => {
            // 查询用户下的表格数据
            const userTableCode = this.$store.state.SysTableColumn.model
            this.$emit(
              'on-result-change',
              'table-col',
              this.$tableColumns(this.pageColumns, userTableCode)
            )
            this._pageTemp(formId, uri, extendsData)
          })
      }
    },
    // 临时
    _pageTemp(formId, uri, extendsData) {
      this.formId = formId
      if (extendsData) {
        this.extendsData = extendsData
      }
      this.$store.dispatch(uri, this._searchParams()).then(() => {
        this.loading = false
        this.$emit('on-result-change', 'page', '')
      })
    },
    _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')
    },
    // 多选
    _selectRowChange(data) {
      if (this.hideCheckbox === undefined || this.hideCheckbox === false) {
        this.checkData = data
        // 默认返回的是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, obj) {
      this.$emit('on-result-change', 'iconClick', {
        name: name,
        rowData: rowData,
        componentName: componentName,
        rowIndex: rowIndex,
        obj: obj
      })
      // 点击操作列中的某个操作选中当前行数据
      if (this.isView !== undefined) {
        if (name === '预览/编辑报告' || name === '预览') {
          this._rowClickChange(rowData)
        }
      }
    },
    // 双击行操作
    _dbClickRow(row, event) {
      this.$emit('on-result-change', 'dbSelect', row)
    },
    // 关闭loading
    _hideLoading() {
      this.loading = false
    },
    // 打开loading
    _showLoading() {
      this.loading = true
    }
  }
}
</script>
