<template>
    <div class="chart-box">
        <div class="total">
            <div class="item">累计订单总数:{{ totalData.totalOrderNumber }}</div>
            <div class="item">累计发货总数:{{ totalData.totalSendNumber }}</div>
            <div class="item">累计未发货总数:{{ totalData.totalUnshippedNumber }}</div>
            <div class="item">累计异常订单数量:{{ totalData.totalErrorOrderNumber }}</div>
            <div class="item">累计已取消订单总数:{{ totalData.totalCancelOrderNumber }}</div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
@Component({ components: {} })
export default class TotalView extends Vue {
    totalData: any = {
        totalOrderNumber: 0,
        totalSendNumber: 0,
        totalUnshippedNumber: 0,
        totalErrorOrderNumber: 0,
        totalCancelOrderNumber: 0
    };
    mounted() {
        this.getData();
    }
    getData() {
        (this as any).$request({
            url: '/omsOrder/orderReport/countTotal',
            method: 'GET'
        }).then((res: any) => {
            if (res.data) {
                this.totalData = res.data;
                console.info(this.totalData)
            }
        }).catch(() => { })
    }
}
</script>
<style lang="scss" scoped>
.chart-box {
    width: 100%;

    .total {
        background-color: #eee;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
        text-align: center;

        .item {
            display: inline-block;
            width: 20%;
        }
    }
}
</style>
