<template>
  <div class="order-index" ref="container">
    <div class="header acea-row">
      <router-link class="item" :to="'/javaMobile/orderList/unPaid'">
        <div class="num">{{ census.unpaidCount }}</div>
        <div>待付款</div>
      </router-link>
      <router-link class="item" :to="'/javaMobile/orderList/notShipped'">
        <div class="num">{{ census.unshippedCount }}</div>
        <div>待发货</div>
      </router-link>
      <router-link class="item" :to="'/javaMobile/orderList/spike'">
        <div class="num">{{ census.receivedCount }}</div>
        <div>待收货</div>
      </router-link>
      <router-link class="item" :to="'/javaMobile/orderList/toBeWrittenOff'">
        <div class="num">{{ census.verificationCount }}</div>
        <div>待核销</div>
      </router-link>
      <router-link class="item" :to="'/javaMobile/orderList/refunding'">
        <div class="num">{{ census.refundCount }}</div>
        <div>退款</div>
      </router-link>
    </div>
    <div class="wrapper">
      <div class="title">
        <span class="iconfont icon-shujutongji"></span>数据统计
      </div>
      <div class="list acea-row">
        <router-link class="item" :to="'/javaMobile/orderStatisticsDetail/price/today'">
          <div class="num">{{ census.todayPrice }}</div>
          <div>今日成交额</div>
        </router-link>
        <router-link class="item" :to="'/javaMobile/orderStatisticsDetail/price/yesterday'">
          <div class="num">{{ census.proPrice }}</div>
          <div>昨日成交额</div>
        </router-link>
        <router-link class="item" :to="'/javaMobile/orderStatisticsDetail/price/month'">
          <div class="num">{{ census.monthPrice }}</div>
          <div>本月成交额</div>
        </router-link>
        <router-link class="item" :to="'/javaMobile/orderStatisticsDetail/order/today'">
          <div class="num">{{ census.todayCount }}</div>
          <div>今日订单数</div>
        </router-link>
        <router-link class="item" :to="'/javaMobile/orderStatisticsDetail/order/yesterday'">
          <div class="num">{{ census.proCount }}</div>
          <div>昨日订单数</div>
        </router-link>
        <router-link class="item" :to="'/javaMobile/orderStatisticsDetail/order/month'">
          <div class="num">{{ census.monthCount }}</div>
          <div>本月订单数</div>
        </router-link>
      </div>
    </div>
    <statistics-data :list="list"></statistics-data>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </div>
</template>

<script>
  import {orderStatisticsApi, statisticsDataApi } from '@/api/order';
  import statisticsData from "../components/statisticsData";
  import Loading from "../components/Loading";
  export default {
    name: "OrderIndex",
    components: {
      Loading,
      statisticsData
    },
    props: {},
    data: function() {
      return {
        census: [],
        list: [],
        where: {
          page: 1,
          limit: 10
        },
        loaded: false,
        loading: false
      };
    },
    created() {
      import('@/assets/js/media_750')
    },
    mounted: function() {
      this.getIndex();
      this.getList();
      this.$scroll(this.$refs.container, () => {
        !this.loading && this.getList();
      });
    },
    methods: {
      getIndex() {
        orderStatisticsApi().then(
          res => {
            this.census = res
          },
          err => {
            this.$dialog.message(err.message);
          }
        );
      },
      getList() {
        if (this.loading || this.loaded) return;
        this.loading = true;
        statisticsDataApi(this.where).then(
          res => {
            this.loading = false;
            this.loaded = res.length < this.where.limit;
            this.list.push.apply(this.list, res);
            this.where.page = this.where.page + 1;
          },
          error => {
            this.$dialog.message(error.message);
          },
          300
        );
      }
    }
  };
</script>
<style scoped lang="scss">
  .order-index{
    background: #f5f5f5;
  }
  .order-index .header{background:url("../../../assets/imgs/orderIndex.png") no-repeat;background-size:100% 100%;width:100%;height:3.02rem;padding:0.45rem 0.3rem 0 0.3rem;}
  .order-index .header .item{flex:1;-webkit-flex:1;-o-flex:1;-ms-flex:1;text-align:center;font-size:0.24rem;color:#fff;}
  .order-index .header .item .num{font-size:0.4rem;margin-bottom:0.07rem;}
  .order-index .wrapper{width:6.9rem;background-color:#fff;border-radius:0.1rem;margin:-1.15rem auto 0 auto;padding-top:0.25rem;}
  .order-index .wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.4rem;}
  .order-index .wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
  .order-index .wrapper .list .item{width:33.33%;text-align:center;font-size:0.24rem;color:#999;margin-bottom:0.45rem;}
  .order-index .wrapper .list .item .num{font-size:0.4rem;color:#333;}
  .public-wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.2rem;}
  .public-wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
  .public-wrapper{margin:0.18rem auto 0 auto;width:6.9rem;background-color:#fff;border-radius:0.1rem;padding-top:0.25rem;}
  .public-wrapper .nav{padding:0 0.3rem;height:0.7rem;line-height:0.7rem;font-size:0.24rem;color:#999;}
  .public-wrapper .data{width:2.1rem;text-align:left;}
  .public-wrapper .browse{width:1.92rem;text-align:right;}
  .public-wrapper .turnover{width:2.27rem;text-align:right;}
  .public-wrapper .conter{padding:0 0.3rem;}
  .public-wrapper .conter .item{border-bottom:1px solid #f7f7f7;height:0.7rem;font-size:0.24rem;}
  .public-wrapper .conter .item .turnover{color:#d84242;}
</style>
