<template>
  <div class="app-container withdrawalApp-table" :style="{'--q-height':qHeight}">
    
    <div class="app-container-table-box">
      <div class="textInfo">截止目前，您有{{ total }}条待办未处理：</div>
      
      <div class="app-container-table-info">
        <el-table ref="tables" v-loading="loading" height="100%" :data="dataList" border>
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column label="订单号" align="center" prop="orderId"  width="170" />
          <el-table-column label="团队名称" align="center" prop="teamName" />
          <el-table-column label="支付方式" align="center" prop="payWay" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay"/>
            </template>
          </el-table-column>
          <el-table-column label="销售员" align="center" prop="salerPerson" />
          <el-table-column label="预警还款时间" align="center" prop="repaymentTime" width="150" />
          <el-table-column label="交易金额" align="center" prop="orderPrice" />
          <el-table-column label="预警通知时间" align="center" prop="warnTime" width="160" />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>

import { 
  waitRepaymentList
} from '@/api/team/teamMr'

export default {
  name: "EarlyWarning",
  dicts: ['pay_way_type'],
  components: {  },
  data() {
    return {
      qHeight: '0px',
      resizeObserver: null,
      loading: true,
      total: 0,
      dataList: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        this.qHeight = height + 'px'
      }
    });
    this.resizeObserver.observe(this.$refs.queryFormBox);
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.dataList = [];
      this.loading = true;
      waitRepaymentList(this.queryParams).then(response => {
          let list = response.data.rows
          this.dataList = list
          this.total = response.data.total;
          this.loading = false;
        }
      ).catch(()=>{
        this.dataList = []
        this.loading = false;
      })
    },
    
  },
  beforeDestroy() {
    this.resizeObserver.unobserve(this.$refs.queryFormBox);
    this.resizeObserver.disconnect();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  height: calc( 100vh - 110px );
  box-sizing: border-box;
}
.app-container-table-box {
  height: calc( 100% - var(--q-height) );
  .app-container-table-info {
    height: calc( 100% - 100px );
  }
}
.textInfo {
  font-size: 16px;
  color: red;
  margin: 10px 0;
}
</style>