<template>
  <div class="app-container">
    <!-- 数据 -->
    <div class="flex flex-wrap flex-justify-spacearound">
      <div class="box bgo flex flex-direction-column">
        <div class="flex flex-justify-spacebetween">
          <span class="wh font-20">当月订单总数(配送明细)</span>
          <span class="wh poi" @click="getData">详情</span>
        </div>
        <div class="mt-40 tac">
          <span class="wh font-36 fb">{{order_sum}}</span><span class="wh">单</span>
        </div>
      </div>
      <div class="box bgg">
        <div class="flex flex-justify-spacebetween">
          <span class="wh font-20">配送列表待完善</span>
          <span class="wh poi" @click="getState">详情</span>
        </div>
        <div class="mt-40 tac">
          <span class="wh font-36 fb">{{status_sum}}</span><span class="wh">单</span>
        </div>
      </div>
      <!-- <div class="box bgb">
        <div class="flex flex-justify-spacebetween">
          <span class="wh font-20">应付订单待入账数量</span>
          <span class="wh poi" @click="getAccept">详情</span>
        </div>
        <div class="mt-40 tac">
          <span class="wh font-36 fb">{{pay_sum}}</span><span class="wh">单</span>
        </div>
      </div> -->
      <!-- <div class="box bgy">
        <div class="flex flex-justify-spacebetween">
          <span class="wh font-20">应收订单待入账数量</span>
          <span class="wh poi" @click="getPay">详情</span>
        </div>
        <div class="mt-40 tac">
          <span class="wh font-36 fb">{{accept_sum}}</span><span class="wh">单</span>
        </div>
      </div> -->
    </div>
    <!-- 列表 -->
    <div class="listBox mt-30 flex flex-justify-spacebetween">
      <div class="fb">客户欠款总额预警</div>
      <div class="poi fb" @click="getMore">查看更多>></div>
    </div>
    <el-table v-loading="listLoading" :data="firmList" border fit highlight-current-row
    :height="clientHeight-60" style="width: 100%;">
      <el-table-column label="ID" prop="client_id" align="center" width="80"></el-table-column>
      <el-table-column label="客户名称" prop="client_company" align="center"></el-table-column>
      <!-- <el-table-column label="联系电话" prop="client_phone" align="center"></el-table-column> -->
      <el-table-column label="当月欠款" prop="owe_month_fee" align="center"></el-table-column>
      <el-table-column label="上月欠款" prop="last_month_owe" align="center"></el-table-column>
      <el-table-column label="总欠款" prop="owe_sum" align="center"></el-table-column>
      <el-table-column label="对接负责人" prop="accept_man" align="center"></el-table-column>
      <el-table-column label="对接财务人" prop="accept_finance" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import store from '@/store'
import { getToken } from '@/utils/auth'
import { getIndex, listDue } from '@/api/order/index'
import { checkRqInput, checkRqSelect } from '@/utils/validate'

export default {
  data() {
    return {
      token: store.getters.token,
      getToken: getToken(),
      order_sum: '', // 当月订单总数
      status_sum: '', // 待完善总数
      accept_sum: '', // 应收订单总数
      pay_sum: '', // 应付订单总数
      firmList: [],  // 列表
      total: 0,
      listLoading: true,
      searchForm: {
        page: 1,
        page_len: 10
      },
      clientHeight: 0, // 屏幕的高度
    }
  },
  created() {
    this.clientHeight = `${document.documentElement.clientHeight}`;
    this.fetchData()
    this.fetchDue()
  },
  methods: {
    fetchData() {
      this.$http(getIndex(1,1), (res) => {
        this.order_sum = res.data.order_sum
        this.status_sum = res.data.status_sum
        this.accept_sum = res.data.accept_sum
        this.pay_sum = res.data.pay_sum
      })
    },
    // 当月订单总数
    getData() {
      let myDate = new Date();
      let start_time = myDate.getFullYear() + '-' + (myDate.getMonth()+1) + '-' + '01'
      this.$router.push({ path: '/distributionManagement/deliveryDetail',query:{start_time}})
    },
    // 待完善总数
    getState() {
      this.$router.push({ path: '/distributionManagement/distributionList',query:{order_status:'status-00'}})
    },
    // 应付订单
    getAccept() {
      this.$router.push({ path: '/financialManagement/supplier/supplierOrder',query:{flag:'no'}})
    },
    // 应收订单
    getPay() {
      this.$router.push({ path: '/financialManagement/client/reOrder',query:{flag:'no'}})
    },
    // 获取列表
    fetchDue() {
      this.listLoading = true
      this.$http(listDue(this.searchForm), (res) => {
        this.firmList = res.data.result
        this.total = res.data.data_sum
        this.listLoading = false
      })
    },
    // 查看更多
    getMore() {
      if(this.searchForm.page_len>=this.total) {
        this.$message('已经没有更多数据')
        return ''
      }
      if((this.searchForm.page_len+10)>this.total) {
        this.searchForm.page_len = this.total
        this.fetchDue()
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .box {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 40%;
    height: 210px;
    border-radius: 8px;
    padding: 30px 20px;
  }
  .bgo {
    background: #ff6600;
  }
  .bgg {
    background: #009900;
  }
  .bgb {
    background: #3366ff;
  }
  .bgy {
    background: #ff9900;
  }
  .listBox {
    padding: 10px 20px;
    background: #ccc;
  }
</style>
