<template>
<!--  v-get-height-->
<!--  :height="57 * (pageSize + 1) - 9"-->
  <el-table
      @row-click="clickTableTr"
      ref="table"
      @selection-change="selectChange"
      @sort-change="sortChange"
      :size="size"
      :data="tableData"
      :list ="tableList"
      :height="tableHeight"
      style="width: 100%">
      <slot name="selectionBefore" />
      <el-table-column
          :key="index"
          :width="header.width"
          sort-method=""
          v-for="(header,index) in headers"
          :prop="header.prop"
          :sortable ="header.sortable"
          :label="header.label"
          :show-overflow-tooltip ="header.overflow"
      >
      <template #default="scope">
        <slot :name="header.prop" :data="scope.row">
          {{scope.row[header.prop]}}
        </slot>
      </template>
    </el-table-column>

    <el-table-column
        @click.stop=""
        v-if="hasOperation"
        :width="operationWidth"
        label="操作">
      <template #default="scope">
        <slot name="operation" :data="scope.row" :index="scope.$index"/>
        <!--        <span>{{scope.$index}}</span>-->
      </template>
    </el-table-column>

    <el-table-column
        @click.stop=""
        v-if="hasCommit"
        :width="commitWidth"
        label="评价情况">
      <template #default="scope">
        <slot name="commit" :data="scope.row" :index="scope.$index"/>
        <!--        <span>{{scope.$index}}</span>-->
      </template>
    </el-table-column>

    <el-table-column
        @click.stop=""
        v-if="hasFill"
        :width="fillWidth"
        label="整改填报">
      <template #default="scope">
        <slot name="fill" :data="scope.row" :index="scope.$index"/>
        <!--        <span>{{scope.$index}}</span>-->
      </template>
    </el-table-column>

    <slot name="selectionAfter"/>
  </el-table>
</template>

<script>
export default {
  name: "MyTable",
  data() {
    return {
      list:[],
      checkedTable:[],
      tableHeight:''
    }
  },

  props:{
    pageSize:{},
    currentPage:{},
    tableData:{
    },
    tableList:{

    },
    headers:{

    },
    sortable:{
      default:false,
      type:Boolean
    },
    overflow:{
      default:false,
      type:Boolean
    },

    hasOperation:{
      default:false,
      type:Boolean
    },
    operationWidth:{
      default:180
    },
    hasCommit:{
      default:false,
      type:Boolean
    },
    commitWidth:{
      default:180
    },
    hasFill:{
      default:false,
      type:Boolean
    },
    fillWidth:{
      default:180
    },
    size:{
      default() {
        return 'medium'
      }
    }

  },
  methods:{
    sortChange(column) {
      if (column.order !== null && column.prop) {
        let data1 = [];
        let data2 = [];
        for (let i = 0; i < this.tableData.length; i++) {
          let temp = null;
          temp = this.tableData[i][column.prop];
          if (temp === null || typeof temp == "undefined") {
            data2.push(this.tableData[i]);
          } else {
            data1.push(this.tableData[i]);
          }
        }
        if (column.order === "ascending") {
          if(this.isString(this.tableData[0][column.prop])&&this.tableData[0][column.prop].indexOf('%') >-1){
            data1 = data1.sort(this.comparePercent(column.prop, "ascending"));
          }else{
            data1 = data1.sort(this.compare(column.prop, "ascending"));
          }
        } else {
          if(this.isString(this.tableData[0][column.prop])&&this.tableData[0][column.prop].indexOf('%') >-1){
            data1 = data1.sort(this.comparePercent(column.prop, "descending"));
          }else{
            data1 = data1.sort(this.compare(column.prop, "descending"));
          }
        }
        this.$nextTick(() => {
          this.tableData = data1.concat(data2);
        });
      }
      if (column.order === null) {
        this.tableData = this.tableList; // tabData存放的是list副本，不排序时恢复到初始状态
      }
    },
    isString(obj){

      return obj===obj+'';

    },
    compare(property, type, prop) {
      console.log(prop);
      return function(obj1, obj2) {
        if (type === "ascending") {
          return obj1[property] - obj2[property];
        } else {
          return obj2[property] - obj1[property];
        }
      };
    },
    comparePercent(property, type, prop) {
      console.log(prop);
      return function(obj1, obj2) {
        if (type === "ascending") {
          return parseFloat(obj1[property]) -parseFloat(obj2[property]);
        } else {
          return parseFloat(obj2[property]) - parseFloat(obj1[property]);
        }
      };
    },
    selectChange(select){
      this.checkedTable = select
      this.$emit('getCheckedTable',select)
    },
    clickTableTr(row, column, event){
      console.log('点击了表格',row,column,event)
      this.$emit('clickTableTr',row, column, event)
    }
  },
  directives:{
    // getHeight(el,binding,ele) {
    //
    //   // ele.context.$nextTick(() => {
    //   //   if (el.clientHeight > el.parentElement.clientHeight) {
    //   //     el.style.height = el.parentElement.clientHeight + 'px'
    //   //   }
    //   //   el.setAttribute('max-height',el.clientHeight -  48)
    //   // })
    // },

  },
  mounted() {
    // window.addEventListener('resize',() => {
    //   let el = this.$refs.table.$el
    //   console.log(el,el.parentElement)
    //   if (el.clientHeight > el.parentElement.clientHeight) {
    //     el.style.height = el.parentElement.clientHeight + 'px'
    //   }
    //   el.style.height = el.parentElement.clientHeight + 'px'
    // })

      this.$nextTick(function () {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 100;
        // 监听窗口大小变化
        let self = this;
        window.onresize = function() {
          self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 100;
        }
      });

  }
}
</script>

<style scoped lang="scss">

.el-table{
  //border:none;
  font-size:18px;
  //::v-deep{
  //
  //  .el-table__body tr.el-table__row--striped{
  //    background: rgba(0, 77, 153, 0.1) !important;
  //    //background: url("../../assets/imgs/间隔.png") no-repeat !important;
  //    //background-size:100% 100% !important;
  //  }
  //  .el-table__body td.el-table__cell{
  //    background: transparent !important;
  //  }
  //
  //  td.el-table__cell, th.el-table__cell.is-leaf{
  //    border: none;
  //  }
  //  .el-table__row.el-table__row--striped .td.el-table__cel{
  //    background: red;
  //  }
  //}
  height: 100% !important;

}
.el-table:before{
  height: 0;
}
</style>
