<template>
    <div class="page">
        <div class="data-list">
            <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>
                <ul class="date-list sort-list">
                    <li
                        @click="sortClick('SaleCount')"
                        :class="{ on: sort === 'SaleCount' }"
                    >
                        销量
                    </li>
                    <li
                        @click="sortClick('SaleAmount')"
                        :class="{ on: sort === 'SaleAmount' }"
                    >
                        销售金额
                    </li>
                </ul>
            </div>
        </div>
        <view class="qiun-charts-rotate">
            <canvas
                canvas-id="canvasColumn"
                id="canvasColumn"
                class="charts-rotate"
                @touchstart="touchColumn"
            ></canvas>
        </view>
    </div>
</template>

<script>
import uCharts from "../../../components/u-charts/u-charts.js";
var _self;
var canvaColumn = null;
export default {
    data() {
        return {
            cWidth2: "", //横屏图表
            cHeight2: "", //横屏图表
            pixelRatio: 1,
            filterDateList: [], // 快捷日期 [{name,startTime,endTime}]
            activeDate: {},
            dataList: [],
            sort:'SaleCount' // SaleCount 按销量数量倒序排序  SaleAmount-按销售金额倒序排序
        };
    },
    onLoad() {
        _self = this;
        this.cWidth2 = uni.upx2px(700);
        this.cHeight2 = uni.upx2px(1100);
        this.initFilterDateList();
        this.getServerData();
    },
    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.getServerData();
        },
        sortClick(val) {
            this.sort = val;
            this.getServerData();
        },
        getServerData() {
            // uni.request({
            //     url: "https://www.ucharts.cn/data.json",
            //     data: {},
            //     success: function (res) {
            //         console.log(res.data.data);
            //         let ColumnColumn = { categories: [], series: [] };
            //         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
            //         ColumnColumn.categories = res.data.data.ColumnB.categories;
            //         ColumnColumn.series = res.data.data.ColumnB.series;
            //         _self.showColumnColumn("canvasColumn", ColumnColumn);
            //     },
            //     fail: () => {
            //         _self.tips = "网络错误，小程序端请检查合法域名";
            //     },
            // });
            uni.showLoading({
                title: "加载中...",
            });
            this.api
                .get("/Data/GetProductsSaleData", {
                    startTime: this.activeDate.startTime,
                    endTime: this.activeDate.endTime,
                    pageIndex: 1,
                    pageSize: 10,
                    sort: this.sort,
                })
                .then((res) => {
                    uni.hideLoading();
                    let chartData = {
                        categories: [],
                        series: [
                            {
                                name: this.sort === "SaleCount"?'销量':'销售金额',
                                data: [],
                            },
                        ],
                    };
                    this.dataList = res.data.data;
                    for (let item of res.data.data) {
                        let name = item.name;
                        if (name.length > 10) {
                            name = name.substr(0, 6) + "...";
                        }
                        chartData.categories.push(name);
                        if (this.sort === "SaleCount") {
                            chartData.series[0].data.push(item.totalCount);
                        } else {
                            chartData.series[0].data.push(item.totalAmount / 100);
                        }
                    }
                    console.log(chartData);
                    this.showColumnColumn("canvasColumn", chartData);
                });
        },
        showColumnColumn(canvasId, chartData) {
            canvaColumn = new uCharts({
                $this: _self,
                canvasId: canvasId,
                type: "column",
                // legend: { show: true },
                fontSize: 11,
                background: "#FFFFFF",
                pixelRatio: _self.pixelRatio,
                animation: true,
                rotate: true,
                // #ifdef MP-ALIPAY || MP-BAIDU
                rotateLock: true, //百度及支付宝需要锁定旋转
                // #endif
                categories: chartData.categories,
                series: chartData.series,
                xAxis: {
                    disableGrid: true,
                    rotateLabel: true,
                },
                yAxis: {
                    //disabled:true
                    format: (val) => {
                        return val.toFixed(2);
                    },
                },
                legend: {
                    show: false,
                },
                dataLabel: true,
                width: _self.cWidth2 * _self.pixelRatio,
                height: _self.cHeight2 * _self.pixelRatio,
                extra: {
                    column: {
                        type: "group",
                        width: 15,
                    },
                },
            });
        },
        touchColumn(e) {
            let self = this;
            canvaColumn.showToolTip(e, {
                format: function (item, category) {
                    let name = "";
                    for (let item of self.dataList) {
                        let itemName = item.name;
                        if (itemName.length > 10) {
                            itemName = itemName.substr(0, 6) + "...";
                        }
                        if (itemName === category) {
                            name = item.name;
                        }
                    }
                    return name + " " + item.name + "：" + item.data;
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
    background-color: #fff;
}
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #ffffff;
    padding: 25upx;
}

.charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #ffffff;
}
.filter {
    padding: px(30);
    .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);
            }
        }
    }
    .sort-list {
        margin-top: px(20);
        li {
            width: 50%;
        }
    }
}
</style>