<template>
  <div style="height: 88%; width: 99%">
    <el-table
      ref="multipleTable"
      v-loading="false"
      :data="tableData"
      tooltip-effect="dark"
      :style="{ width: '100%' }"
      height="100%"
      :border="true"
      :cell-style="cellStyle"
      :header-cell-style="headerStyle"
      :stripe="true"
      :row-style="rowStyle"
      :show-overflow-tooltip="true"
      @row-click="rowClick"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      element-loading-text="数据正在加载中"
      element-loading-spinner="el-icon-loading"
    >
      >
      <template slot="empty">
        <p class="empty-p">暂无数据</p>
      </template>
      <el-table-column label="序号" type="index" width="50">
        <template slot-scope="scope">
          {{ (currentpage - 1) * pagesize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, colIndex) of column.filter((ele) => ele.prop)"
        :key="colIndex"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :sortable="item.sortable"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{ row }">
          <template v-if="item.formatter">
            <span v-html="item.formatter(row, item.prop, row[item.prop], colIndex)" />
          </template>
          <template v-else>
            <span v-if="row[item.prop] || String(row[item.prop]) === '0' || String(row[item.prop]) === '00'">{{
              row[item.prop]
            }}</span>
            <span v-else>-</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="total" layout="total" />
  </div>
</template>

<script>
import Config from './config.json'
export default {
  name: 'datailsTable', //详细信息表格
  props: {
    detailsData: {}
  },
  data() {
    return {
      headerStyle: {
        background: '#0D4974',
        color: '#2ba7ff',
        height: '38px',
        textAlign: 'center',
        border: 'none'
      },
      currentpage: 0,
      pagesize: 0,
      total: this.detailsData.length,
      column: Config.columns,
      tableData: this.detailsData
    }
  },
  methods: {
    rowStyle({ row, rowIndex }) {
      // 给每一行添加不可枚举属性rowIndex来标识当前行
      Object.defineProperty(row, 'rowIndex', {
        value: rowIndex,
        writable: true,
        enumerable: false
      })
    },
    rowClick(row, column, event) {
      this.$emit('location', row.compareobjectid)
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 2) {
        if (row.isCross === '是') {
          return {
            textAlign: 'center',
            color: '#FF3333'
          }
        } else {
          return {
            textAlign: 'center'
          }
        }
      } else if (columnIndex == 3) {
        if (row.isKnock === '是') {
          return {
            textAlign: 'center',
            color: '#FF3333'
          }
        } else {
          return {
            textAlign: 'center'
          }
        }
      } else {
        return { textAlign: 'center' }
      }
    }
  },
  watch: {
    detailsData: {
      handler(n, o) {
        this.tableData = n
        this.total = n.length
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table {
  border: none;
  color: #eee;
  background: transparent;
  .el-table__row {
    background: transparent;
  }
  .el-table__cell {
    border: none;
  }
  .el-table__row--striped {
    background: #1d3e58;
    .el-table__cell {
      background: transparent !important;
    }
  }
  .el-table__body tr:hover > td {
    background-color: #3d5f89 !important;
  }
  //去掉白边
  .el-table__header,
  .el-table__body,
  .el-table__footer {
    width: 100% !important;
  }
  th.gutter {
    width: 0px !important;
    display: table-cell !important;
    background: transparent;
  }
  .el-table__header colgroup col[name='gutter'] {
    width: 0px !important;
  }
}
/deep/ .el-table--border::after {
  background-color: unset !important;
}
/deep/ .el-table::before {
  background-color: unset !important;
}
/deep/ .el-pagination__total {
  color: #eee;
}
</style>