<template>
  <div class="Tables">
    <div class="table-item">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        :default-sort = "defaultSort?defaultSort:{}"
        @sort-change="sortChange"
      >
        <el-table-column
          v-if="isIndex"
          label="序号"
          :width="flexWidth(tableData)"
          align="left"
          :fixed="indexFixed"
          :resizable="false">
          <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <template v-for="item in forData">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            :min-width="item.minWidth"
            :align="item.align?item.align:'left'"
            :fixed="item.fixed"
            :sortable="item.sortable ? 'custom' : false"
            :resizable="false">
            <template v-if="item.children&&item.children.length">
              <el-table-column
                v-for="(cld, i) in item.children"
                :key="i"
                :prop="cld.prop"
                :label="cld.label"
                :width="cld.width"
                :resizable="false">
                <template slot-scope="cldscope">
                  <template v-if="cld.slot">
                    <slot :name="cld.prop" :row="cldscope.row" :data="cld"></slot>
                  </template>
                  <template v-else>
                    <span>{{cldscope.row[cld.prop] || '--'}}</span>
                  </template>
                </template>
              </el-table-column>
            </template>
            <template v-else-if="item.slotHeader" slot="header">
              <slot :name="item.slotName"></slot>
            </template>
            <template slot-scope="scope">
              <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
              <span v-else>
                  {{ scope.row[item.prop] || '--' }}
                </span>
            </template>
          </el-table-column>

        </template>
      </el-table>
    </div>
    <div class="pagination-box" v-if="paging && tableDataTotal>queryParams.pageSize">
      <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
  </div>
</template>

<script>
import { tabFixed } from '@/utils'
export default {
  name: "Tables",
  props: {
    isIndex: {
      type: Boolean,
      default: true
    },
    indexFixed: {
      type: Boolean,
      default: false
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    defaultSort: {
      type: Object,
      default: null
    },
    tableData: {
      type: Array,
      default: []
    },
    forData: {
      type: Array,
      default: []
    },
    tableDataTotal: {
      type: Number,
      default: 0
    },
    queryParams: {
      type: Object,
      default: {}
    },
    paging: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
    }
  },
  methods:{
    handleCurrentChange(e){
      this.$emit('handle-current-change',e)
    },
    handleSizeChange(e){
      this.$emit('handle-current-change',e)
    },
    sortChange(e){
      this.$emit('sort-change',e)
    },
    flexWidth(tableData) {
      let currentMax = this.queryParams.pageNum*this.queryParams.pageSize - this.queryParams.pageSize + tableData.length, wdth = 55
      // return currentMax.toString().length*25 + 'px'
      if(currentMax.toString().length>3){
        wdth = wdth + (currentMax.toString().length-3)*10
      }
      return wdth+'px'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__body tr.current-row > td.el-table__cell{
  background-color: #ffffff;
}
/*::v-deep .el-table__fixed{
  height: calc(100% - 16px) !important;
}*/

::v-deep .el-table__row{
  &:nth-child(even){
    background-color: #F9FCFF;
    .more{
      background: #F8FBFF;
      span{
        color: #0081FF;
      }
    }
  }
  &:nth-child(odd){
    .more{
      span{
        color: #0081FF;
      }
    }
  }
}
::v-deep .el-table th.el-table__cell.is-leaf,::v-deep .el-table td.el-table__cell {
  border-bottom: 1px solid #E6EAF1;
}
::v-deep .el-table--border .el-table__cell {
   border-right: 1px solid #E6EAF1;
}
::v-deep .el-table__body tr.hover-row.current-row>td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped>td,
::v-deep .el-table__body tr.hover-row>td{
  background-color:#DCEBFF !important;
  .more{
    background: #DCEBFF;
  }
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #DCEBFF;
}

</style>
