<template>
  <div class="rolling-loading">
    <div class="common-modal-loading" v-show="loading">
      <loading-animation></loading-animation>
    </div>
    <Table ref="table" v-show="!loading" class="table" :columns="columns1" :data="detailTabData" @on-sort-change="changeSort" :row-class-name="rowClassName">
      <!-- <template  v-for="column in columns1"  :slot="column.slot?column.slot:''" slot-scope="params" >
        <slot :name="column.slot?column.slot:''" v-bind="params" ></slot>
      </template> -->
    </Table>
    <!-- <Table ref="table" v-show="!loading" class="table" :columns="columns1" :data="detailTabData" @on-sort-change="changeSort" :row-class-name="rowClassName"></Table> -->
  </div>
</template>
<script>
import _ from 'lodash' //Lodash之throttle（节流）与debounce（防抖）
export default {
  props: {
    columns1: { // 表格表头
      type: Array,
      default: () => []
    },
    apiUrl: { // 请求地址 
      type: String,
      default: ""
    },
    requestMode: { // 请求方法 默认get请求
      type: String,
      default: "get"
    },
    detailDataCount: { //表格的总条数 为了防止后端不返回总数目
      type:[String, Number],
    },
    dataIndex: { // 请求地址 
      type:[String, Number],
      default: 1
    },
  },
  data() {
    return {
      loading: false,
      detailTabData: [],
      detailParams: {},
      curPage: 1,
      pageTotal: 0,
      detailTotal: 0,
      showLoading: false,
      currentUrl:'',
    };
  },
  methods: {
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 排序
    changeSort (params) {
      document.querySelector(".common-modal-detail .ivu-table-body").scrollTo(0, 0);
      this.detailParams.pageNum = 1
       if (params.order == 'normal') { // iview封装的排序有三种状态 normal desc asc 现在处理成两种状态降序 正序
         this.detailParams.order = !this.detailParams.order
         if (this.detailParams.order) {
          this.columns1[params.column.index].sortType = 'desc' //降序
         } else {
          this.columns1[params.column.index].sortType = 'asc' // 正序
         }
        this.getChartsDetail(this.detailParams)
        return;
      }
      this.detailParams.order = params.order == 'asc' ? false : true
      this.columns1[params.column.index].sortType = params.order
      this.getChartsDetail(this.detailParams)
    },
    // handleFilterChange (params) {
    //   document.querySelector(".common-modal-detail .ivu-table-body").scrollTo(0, 0);
    //   this.detailParams.page = 1
    //   console.log(params)
    //   this.getChartsDetail(this.detailParams)
    // },
    // 获取数据详情
    getChartsDetail(params,url) {
      this.currentUrl = url
      this.detailParams = {}
      this.detailParams = params;
      this.curPage = 1;
      this.loading = true
      this.getDetailData().then(res => {
        this.loading = false
        if (res.httpCode == 1) {
          if (res.data.data && res.data.data.length==0 || (res.data[this.dataIndex] && res.data[this.dataIndex].value.data.length==0)) {
            this.detailTotal = 0
            this.detailTabData = []
          } else {
            if (res.data[this.dataIndex] && res.data[this.dataIndex].value.data) {
              this.detailTabData = res.data[this.dataIndex].value.data
              this.detailTotal = res.data[this.dataIndex].value.count
            } else {
              this.detailTabData = res.data.data
              this.detailTotal = Number(res.data.count)
            }
          }
          if (res.data.offset) {
            this.detailParams.index = res.data.offset
          }
          this.pageDataHandle();
        } else {
          this.detailTabData = [];
          this.detailTotal = 0;
        }
      });
    },
    async getDetailData() {
      let params = this.detailParams;
      if (params.pageNum) {
        params.pageNum= this.curPage;
        params.pageSize = this.detailParams.pageSize;
      }
      let url = '' // 防止一个页面引用多个相同的子组件，apiUrl很相似无法更新的问题
      if (this.currentUrl) {
        url = this.currentUrl
      } else {
        url = this.apiUrl
      }
      if (this.requestMode == "get") {
        return await this.$get(url,
          params
        );
      } else if (this.requestMode == "post") {
        return await this.$post(url, params);
      }
    },
    scrollPannel: _.throttle(function(event) {
      let nScrollTop = event.target.scrollTop; // 滚动条到顶部的距离
      let nDivHight = event.target.offsetHeight; //滚动条可见元素的高度
      let nScrollHight = event.target.scrollHeight; //包括当前不可见部分的元素的高度
      if (nScrollTop + nDivHight >= nScrollHight - 5) {
        if (this.curPage >= this.pageTotal || event.target.scrollTop == 0) { // event.target.scrollTop 防止表头做切换选择时，重新请求当前页为1
          return;
        }
        event.target.onmousewheel = function(e){   
          e = e || window.event;   
          event.target.scrollTop += e.wheelDelta > 0 ? -60 : 60; 
          return false;
        };
        this.curPage++;
        this.getDetailData().then(res => {
          if (res.httpCode == 1) {
            if (res.data.data && res.data.data.length==0 || (res.data[this.dataIndex] && res.data[this.dataIndex].value.data.length==0)) {
              this.detailTotal = 0
            } else {
              if (res.data[this.dataIndex] && res.data[this.dataIndex].value.data) {
                this.detailTabData = this.detailTabData.concat(res.data[this.dataIndex].value.data)
                this.detailTotal = res.data[this.dataIndex].value.count
              } else {
                this.detailTabData = this.detailTabData.concat(res.data.data)
                this.detailTotal = Number(res.data.count)
              }
            }
            this.pageDataHandle();
          }
        });
      }
    }, 500),
    pageDataHandle() {
      if (this.detailTotal >= this.detailParams.pageSize) {
        if (this.detailTotal % this.detailParams.pageSize == 0) {
          this.pageTotal = parseInt(this.detailTotal / this.detailParams.pageSize);
        } else {
          this.pageTotal = parseInt(this.detailTotal / this.detailParams.pageSize) + 1;
        }
      } else {
        this.pageTotal = 1;
      }
    }
  },
  mounted() {
    let dom = document.querySelector(".rolling-detail-table .ivu-table-body");
    dom.addEventListener("scroll", this.scrollPannel);
  }
};
</script>
<style lang="stylus" scoped>
>>> .common-modal-loading {
 position: relative;
}
>>> .common-modal-loading .ivu-spin-fix { 
  height: 100%;
  background: none!important;
}
.rolling-loading {
    height: 100%;
    margin-top: 10px;
}
  /*对话框表格样式*/
  >>> .table {
      height: 100%;
  }
  >>> .ivu-table {
      color: #fff;
      background-color:transparent;
      height: 100%;
  }
   >>> .ivu-table .ivu-table-cell {
      padding: 0px 4PX;
  }
  >>> .ivu-table-header .ivu-table-cell {
      font-weight: bold;
  }
  >>> .ivu-table th {
   background-color: #0E2D6B;
  }
  >>> .ivu-table td{
      border-bottom: none;
      height: 48PX;
      background-color: transparent;
  }
  >>> .ivu-table th {
       border-bottom: none;
       height: 48PX;
  }
  >>> .ivu-table:before{
    background-color:transparent;
  }
  >>> .ivu-table:after{
    background-color:transparent;
  }
  >>> .ivu-table-body td:last-child {
      padding-right: 6PX;
  }
 >>> .ivu-table-body {
   max-height: 479PX;
   overflow: hidden;
   overflow-y: auto;
 }
 >>> .ivu-table-tbody {
     height: 100%;
 }
/*偶数行*/
 >>> .ivu-table-stripe-even td{
   background-color: #081C43 !important;
 }
 /*奇数行*/
 >>> .ivu-table-stripe-odd td{
   background-color: #072453 !important;
 } 
 /*暂无数据*/
 >>> .ivu-table-tip {
    // max-height: 435px;
    display: flex;
    align-items: center;
    // background: url('../../assets/images/noData.png') no-repeat center;
 }
 >>> .ivu-table-tip table {
  //  display: none;
 }

</style>
