<template>
    <div class="page">
            <div class="filter">
                <!-- <div >时间选择</div> -->
                <ul class="date-list">
                    <li
                        v-for="(item, index) of filterDateList"
                        :key="index"
                        @click="dateClick(item)"
                        :class="{ on: activeDate.name === item.name }"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>
        <ul class="brief-data">
            <li class="item">
                <div class="name">成交人数</div>
                <div class="value">{{ briefData.dealCount || "0" }}</div>
            </li>
            <li class="item">
                <div class="name">订单量</div>
                <div class="value">{{ briefData.orderCount || "0" }}</div>
            </li>
            <li class="item">
                <div class="name">下单件数</div>
                <div class="value">{{ briefData.orderItemCount || "0" }}</div>
            </li>
            <li class="item">
                <div class="name">总金额(元)</div>
                <div class="value">
                    {{
                        briefData.saleAmount
                            ? briefData.saleAmount / 100
                            : "0"
                    }}
                </div>
            </li>
        </ul>
        <!-- data-list -->
        <div class="data-list">
            <ul class="data-table">
                <li class="row row-head">
                    <div class="cell">日期</div>
                    <div class="cell">成交人数</div>
                    <div class="cell">订单量</div>
                    <!-- <div class="cell">退款</div> -->
                    <div class="cell">销售额</div>
                </li>
                <li class="row" v-for="(item, index) of dataList" :key="index">
                    <div class="cell">
                        {{ item.date | dateFormat("MM-dd") }}
                    </div>
                    <div class="cell">{{ item.dealCount | maxNum }}</div>
                    <div class="cell">{{ item.orderCount | maxNum }}</div>
                    <!-- <div class="cell">{{ item.refundAmount | maxNum }}</div> -->
                    <div class="cell">{{ item.saleAmount | maxNum(100000) }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
import uCharts from "../../../components/u-charts/u-charts.js";

export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            storeId: "",
            filterDateList: [], // 快捷日期 [{name,startTime,endTime}]
            activeDate: {},
            briefData: {}, // 简略信息
            dataList: [], // 数据列表
        };
    },

    onLoad() {
        if (this.user.storeId) {
            this.storeId = this.user.storeId;
        }
        this.initFilterDateList();
        this.getOrderBriefData();
        this.getOrderDataList();
    },
    async onShow() {},
    // 函数
    methods: {
        // 生成日期过滤
        initFilterDateList() {
            let arr = [];
            // 今天
            let date = new Date();
            let year = date.getFullYear();
            let month =
                date.getMonth() + 1 > 9
                    ? "" + (date.getMonth() + 1)
                    : "0" + (date.getMonth() + 1);
            let day =
                date.getDate() > 9 ? "" + date.getDate() : "0" + date.getDate();
            arr.push({
                name: "今天",
                startTime: `${year}-${month}-${day} 00:00:00`,
                endTime: `${year}-${month}-${day} 23:59:59`,
            });
            let date2 = new Date(date);
            date2.setDate(date.getDate() - 1);
            arr.push({
                name: "昨天",
                startTime: `${date2.getFullYear()}-${
                    date2.getMonth() + 1
                }-${date2.getDate()} 00:00:00`,
                endTime: `${year}-${month}-${day - 1} 23:59:59`,
            });
            let date3 = new Date(date);
            date3.setDate(date.getDate() - 7);
            arr.push({
                name: "近7天",
                startTime: `${date3.getFullYear()}-${
                    date3.getMonth() + 1
                }-${date3.getDate()} 00:00:00`,
                endTime: `${year}-${month}-${day} 23:59:59`,
            });
            let date4 = new Date(date);
            date4.setDate(date.getDate() - 30);
            arr.push({
                name: "近30天",
                startTime: `${date4.getFullYear()}-${
                    date4.getMonth() + 1
                }-${date4.getDate()} 00:00:00`,
                endTime: `${year}-${month}-${day} 23:59:59`,
            });
            this.filterDateList = arr;
            this.activeDate = arr[3];
        },

        dateClick(val) {
            this.activeDate = val;
            this.getOrderDataList();
            this.getOrderBriefData();
        },

        // 订单概况
        getOrderBriefData() {
            this.api
                .get("/Data/GetOrderBriefData", {
                    storeId: this.storeId,
                    startTime: this.activeDate.startTime,
                    endTime: this.activeDate.endTime,
                })
                .then((res) => {
                    this.briefData = res.data;
                });
        },
        // 获取订单交易数据
        getOrderDataList() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api
                .get("/Data/GetOrderDataList", {
                    storeId: this.storeId,
                    startTime: this.activeDate.startTime,
                    endTime: this.activeDate.endTime,
                })
                .then((res) => {
                    uni.hideLoading();
                    for (let item of res.data) {
                        item.refundAmount /= 100;
                        item.saleAmount /= 100;
                    }
                    this.dataList = res.data;
                });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(50);
}
.brief-data {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #f1f1f1;
    width: 100%;
    background-color: #fff;
    margin-top: px(30);
    .item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: px(44);
        padding: px(30);
        line-height: px(66);
        border-bottom: 1px solid #f1f1f1;
        &:nth-child(2n) {
            border-left: 1px solid #f1f1f1;
        }
    }
    .value {
        height: px(66);
        font-weight: bold;
        margin-top: px(10);
        @include omit(100%);
    }
}
.data-list {
    margin-top: px(30);
    background-color: #fff;
}
.filter {
    padding: px(30);
    background-color: #fff;
    .date-list {
        display: flex;
        justify-content: space-between;
        font-size: px(44);
        text-align: center;
        li {
            border: 1px solid #f1f1f1;
            padding: px(20) 0;
            width: 25%;
            flex-shrink: 0;
            &.on {
                border-color: rgb(0, 188, 38);
                color: rgb(0, 188, 38);
            }
        }
    }
}
.data-table {
    margin-top: px(30);
    border-top: 1px solid #f1f1f1;
    .row {
        display: flex;
        justify-content: space-between;
        border-right: 1px solid #f1f1f1;
        font-size: px(40);
        border-bottom: 1px solid #f1f1f1;
        color: #333;
        .cell {
            width: 16.666666%;
            flex-shrink: 0;
            overflow: hidden;
            border-left: 1px solid #f1f1f1;
            text-align: center;
            padding: px(25) 0;
        }
    }
    .row-head {
        color: #666;
        background-color: #f9f9f9;
    }
}
</style>