<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 class="pr15 bg_f mb10 pr pl100 pr pt15 pb10 cursor" style="height:80px;">
                    <dt class="pa lt pl15 pt15">
                        <span class="img_60 oh dib">
                          <img class="ob_c"
                               :src="item.gift.image"/>
                        </span>
                        <p class="t_center ws fz12" style="width:60px;">{{item.gift.name}}</p>
                    </dt>
                    <a :href="'{:url('Userwall/detail')}?id=' + item.user.id">
                        <dd class="pl40 pr">
                        <span class="inline_block img_30 br oh pa lt">
                          <img class="ob_c br50"
                               :src="item.user.avatar ? item.user.avatar : '__TMPL__/public/assets/images/userwall/no_image_thumb.png'" />
                        </span>
                            <h3 class="fz16">
                                <van-icon
                                        :class="[item.user.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                                {{item.user.username}}
                            </h3>
                            <p class="fz14 mt10">
                                {{item.user.age}}岁
                                ▪ {{item.user.education}}
                                ▪ {{item.user.high}}CM
                            </p>
                            <p class="color_9 fz12 mt10">
                                {{active === 0 ? '赠送时间' : '收到时间'}} ：{{item.create_time}}
                            </p>
                        </dd>
                    </a>
                    <div class="clear"></div>
                </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('giftList')}", {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 {
                            for (let i = 0; i < json.data.length; i++) {
                                self.list[index].push(json.data[i]);
                            }
                        }
                        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>