<extend name="public@base"/>
<block name="css">
    <style>
    </style>
</block>
<block name="body">
    <van-nav-bar
            left-text="返回"
            left-arrow
            @click-left="onBack"
    >
        <template #title>
            <span>足迹记录</span>
        </template>
    </van-nav-bar>

    <van-tabs v-model="active">
        <van-tab title="我看过谁"></van-tab>
        <van-tab title="我的访客"></van-tab>
    </van-tabs>
    <van-pull-refresh v-model="refreshing[active]" @refresh="onRefresh(active)">
        <van-list
                v-model="loading[active]"
                :finished="finished[active]"
                finished-text="没有更多了"
                @load="onLoad(active)"
        >
            <div v-for="item in list[active]">
                <dl>
                    <a class="block pr15 pt15 bg_f pr pl100" :href="'{:url('Userwall/detail')}?id=' + item.user.id">
                        <dt class="avatar pa l15 t15">
                            <img class="img_60 br50" style="object-fit:cover;" :src="item.user.avatar ? item.user.avatar : '__TMPL__/public/assets/images/userwall/no_image_thumb.png'">
                        </dt>
                        <dd class="pb15 bo_bf7">
                            <div class="name fz16 pb5">
                                <van-icon
                                        :class="[item.user.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                                {{item.user.username}}
                            </div>
                            <div class="user_info mt5 fz13 color_6">
                                <span>{{item.user.age}}岁</span>
                                <span>{{item.user.education}}</span>
                                <span>{{item.user.high}}CM</span>
                            </div>
                            <div class="text fz12 mt10 color_9 ws">{{item.user.signature}}</div>
                            <div class="time pa t15 r15 color_m fz12">{{item.last_visit_time}}</div>
                        </dd>
                    </a>
                </dl>
            </div>
        </van-list>
    </van-pull-refresh>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    active: 0,
                    page: [1,1],
                    list: [{$list1},{$list2}],
                    loading: [false,false],
                    finished: [false,false],
                    refreshing: [false,false],
                };
            },
            methods: {
                onBack() {
                    history.back();
                },
                onLoad(index) {
                    //参数
                    let self = this;
                    this.page[index]++;

                    $.post("{:url('visitmeList')}",{page:this.page[index],status:this.active}, function (json) {
                        //下拉刷新
                        if (self.refreshing[index]) {
                            self.refreshing[index] = false;
                        }

                        // 加载状态结束
                        self.loading[index] = false;

                        if (json.data.length == 0) {
                            // 数据全部加载完成
                            self.finished[index] = true;
                        } else {
                            console.log(json.data);
                            for (let i = 0; i < json.data.length; i++) {
                                self.list[index].push(json.data[i]);
                            }
                            console.log(self.list[index]);
                        }
                        self.$forceUpdate();
                    }, 'json');
                },
                onRefresh(index) {
                    // 清空列表数据
                    this.list[index] = [];
                    this.page[index] = 0;
                    this.loading[index] = true;
                    this.finished[index] = false;
                    this.$forceUpdate();

                    this.onLoad(index);
                },
            },
        });
    </script>
</block>