<template>
    <div class="page">
        <!-- data-list -->
        <div class="data-list">
            <div class="page-tit" v-if="queryData.uvId">
                {{ date.date }} {{ queryData.name }} 访问数据
            </div>
            <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>
                </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.pageName || "未知页面" }}</div>
                    <div class="cell">{{ item.staySeconds }}</div>
                    <div class="cell">
                        {{ item.leaveTime | dateFormat("hh:mm") }}
                    </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 {
            queryData: {}, // date,uvId,name
            date: {
                startTime: "",
                endTime: "",
                date: "",
            },
            pageIndex: 1,
            dataEnd: false,
            storeId: "",
            dataList: [], // 数据列表
        };
    },

    onLoad(opts) {
        this.queryData = 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.getPVList();
    },
    async onShow() {},
    // 函数
    methods: {
        // 获取数据
        getPVList(isMore) {
            if (!isMore) {
                uni.showLoading({
                    title: "加载中...",
                });
            }
            this.api
                .get("/Data/GetPVList", {
                    startTime: this.date.startTime,
                    endTime: this.date.endTime,
                    uvId: this.queryData.uvId,
                    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;
                    }
                });
        },
    },
    onReachBottom() {
        if (!this.dataEnd) {
            this.getPVList(true);
        }
    },

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