<template>
    <div class="page">
        <!-- data-list -->
        <div class="data-list">
            <div class="page-tit">{{ date.date }} 访客数据</div>
            <!-- <div class="filter">
                <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>
                    <div class="cell">操作</div>
                </li>
                <li class="row" v-for="(item, index) of dataList" :key="index">
                    <div class="cell">
                        {{ item.visitTime | dateFormat("hh:mm") }}
                    </div>
                    <div class="cell">
                        {{ item.userNickName || "未授权用户" }}
                    </div>
                    <div class="cell">{{ item.loginCount | maxNum }}</div>
                    <div class="cell link" @click="goDetail(item)">
                        查看详情
                    </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 {
            date: {
                startTime: "",
                endTime: "",
                date: "",
            },
            pageIndex: 1,
            dataEnd: false,
            storeId: "",
            activeDate: {},
            dataList: [], // 数据列表
            pixelRatio: 1,
            viewType: "table", // chart table
        };
    },

    onLoad(opts) {
        let date = opts.date;
        date = date.replace(/\d+:\d+:\d+/, "");
        this.date.date = date;
        this.date.startTime = date + "00:00:00";
        this.date.endTime = date + "23:59:59";

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

        this.cWidth = uni.upx2px(700);
        this.cHeight = uni.upx2px(1200);
        this.getUVList();
    },
    async onShow() {},
    onReachBottom() {
        if (!this.dataEnd) {
            this.getUVList(true);
        }
    },
    // 函数
    methods: {
        // 获取订单交易数据
        getUVList(isMore) {
            if (!isMore) {
                uni.showLoading({
                    title: "加载中...",
                });
            }
            this.api
                .get("/Data/GetUVList", {
                    startTime: this.date.startTime,
                    endTime: this.date.endTime,
                    pageIndex: this.pageIndex++,
                    pageSize: 20,
                })
                .then((res) => {
                    if (!isMore) {
                        uni.hideLoading();
                    }
                    if (isMore) {
                        this.dataList = [...this.dataList, ...res.data.data];
                        if (res.data.data.length === 0) {
                            this.dataEnd = true;
                        }
                    } else {
                        this.dataList = res.data.data;
                    }
                    // let chartData = {
                    //     categories: [],
                    //     series: [
                    //         {
                    //             name: "登录次数",
                    //             data: [],
                    //         },
                    //     ],
                    // };
                    // for (let item of this.dataList) {
                    //     let date = this.fn.timestampToDate(
                    //         item.visitTime,
                    //         "hh:mm"
                    //     );
                    //     chartData.categories.push(date);
                    //     chartData.series[0].data.push(item.loginCount);
                    // }
                    // 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.visitTime, "hh:mm");
            //         chartData.categories.push(date);
            //         chartData.series[0].data.push(item.loginCount);
            //     }
            //     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(val) {
            this.router.push({
                path: "/pages/manage/statistics/pv",
                query: {
                    date: val.visitTime,
                    uvId: val.id,
                    name: val.userNickName || "未授权用户",
                },
            });
        },
    },

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

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

<style lang="scss" scoped>

.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: 25%;
            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;
}
.page-tit {
    text-align: center;
    padding: px(30);
    font-size: px(48);
}
</style>