<template>
    <div class="page">
        <!-- data-list -->
        <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 chart-view">
                    <li
                        :class="{ on: viewType === 'chart' }"
                        @click="viewTypeClick('chart')"
                    >
                        图表
                    </li>
                    <li
                        :class="{ on: viewType === 'table' }"
                        @click="viewTypeClick('table')"
                    >
                        表格
                    </li>
                </ul>
            </div>
            <div class="empty-text" v-if="dataList.length === 0">无数据</div>
            <div
                class="charts"
                v-if="dataList.length > 0 && viewType === 'chart'"
            >
                <canvas
                    canvas-id="canvasLineA"
                    id="canvasLineA"
                    class="charts"
                    @touchstart="touchLineA"
                ></canvas>
            </div>
            <ul
                class="data-table"
                v-if="dataList.length > 0 && viewType === 'table'"
            >
                <li class="row row-head">
                    <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.count | maxNum }}</div>
                    <div class="cell link" @click="goDetail(item.date)">查看详情</div>
                </li>
            </ul>
        </div>
    </div>
</template>

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

var canvaLineA = null;
export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            storeId: "",
            filterDateList: [], // 快捷日期 [{name,startTime,endTime}]
            activeDate: {},
            dataList: [], // 数据列表
            pixelRatio: 1,
            viewType: "chart", // chart table
        };
    },

    onLoad() {
        if (this.user.storeId) {
            this.storeId = this.user.storeId;
        }

        this.cWidth = uni.upx2px(700);
        this.cHeight = uni.upx2px(1200);
        this.initFilterDateList();
        this.getUVList();
    },
    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.getUVList();
        },
        // 获取订单交易数据
        getUVList() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api
                .get("/Data/GetDailyUV", {
                    startTime: this.activeDate.startTime,
                    endTime: this.activeDate.endTime,
                })
                .then((res) => {
                    uni.hideLoading();
                    this.dataList = res.data;
                    let chartData = {
                        categories: [],
                        series: [
                            {
                                name: "访问量",
                                data: [],
                            },
                        ],
                    };
                    for (let item of this.dataList) {
                        let date = this.fn.timestampToDate(item.date, "MM-dd");
                        chartData.categories.push(date);
                        chartData.series[0].data.push(item.count);
                    }
                    this.showLineA("canvasLineA", chartData);
                });
        },

        viewTypeClick(val) {
            this.viewType = val;
            if (val === "chart") {
                let chartData = {
                    categories: [],
                    series: [
                        {
                            name: "访问量",
                            data: [],
                        },
                    ],
                };
                for (let item of this.dataList) {
                    let date = this.fn.timestampToDate(item.date, "MM-dd");
                    chartData.categories.push(date);
                    chartData.series[0].data.push(item.count);
                }
                this.showLineA("canvasLineA", chartData);
            }
        },

        showLineA(canvasId, chartData) {
            canvaLineA = new uCharts({
                $this: this,
                canvasId: canvasId,
                type: "line",
                fontSize: 11,
                legend: { show: true },
                rotate: true,
                dataLabel: false,
                dataPointShape: true,
                background: "#FFFFFF",
                pixelRatio: this.pixelRatio,
                categories: chartData.categories,
                series: chartData.series,
                animation: true,
                xAxis: {
                    disableGrid: true,
                    rotateLabel: true,
                },
                yAxis: {
                    format: (val) => {
                        return val.toFixed(1) + "次";
                    },
                },
                width: this.cWidth * this.pixelRatio,
                height: this.cHeight * this.pixelRatio,
                extra: {
                    line: {
                        type: "straight",
                    },
                },
            });
        },
        touchLineA(e) {
            canvaLineA.showToolTip(e, {
                format: function (item, category) {
                    return category + " " + item.name + ":" + item.data;
                },
            });
        },
        // 查看详情
        goDetail(date){
            this.router.push({
                path:'/pages/manage/statistics/uv2',
                query:{
                    date
                }
            })
        }
    },

    // 数据计算
    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;
    .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 {
    background-color: #fff;
}
.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);
            }
        }
    }

    .chart-view {
        width: 50%;
        margin: px(30) auto 0;
        border-radius: px(10);
        li {
            width: 50%;
            &:first-child {
                border-radius: px(20) 0 0 px(20);
            }
            &:last-child {
                border-radius: 0 px(20) px(20) 0;
            }
        }
    }
}
.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: 33.333333%;
            flex-shrink: 0;
            overflow: hidden;
            border-left: 1px solid #f1f1f1;
            text-align: center;
            padding: px(25) 0;
        }
    }
    .row-head {
        color: #666;
        background-color: #f9f9f9;
    }
}
.charts {
    width: 700upx;
    height: 1200upx;
    background-color: #ffffff;
}
.empty-text {
    text-align: center;
    padding: px(30);
    font-size: px(44);
    color: #999;
}
.link{
    color: #4395ff;
}
</style>