<extend name="public@base"/>
<block name="css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.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>

    <div v-if="!is_select">
        <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"
                           @click="location.href = '{:url('Userwall/detail')}?id='+item.user.id"
                           href="javascript:void(0);">
                            <dt class="avatar pa l15 t15 br3 oh">
                                <img class="img_70" style="object-fit:cover;"
                                     :src="item.user.main_image_thumb ? item.user.main_image_thumb : '__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 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>
                                    <van-button type="primary" size="mini" @click.stop="select(item.user.id)"
                                                v-if="active === 0">
                                        确认关系
                                    </van-button>
                                    <van-button type="danger" size="mini" @click.stop="cancel(item.user.id)"
                                                v-if="active === 1">
                                        取消选择
                                    </van-button>
                                </div>
                                <div class="time pa t15 r15 color_m fz12">{{item.create_time}}</div>
                            </dd>
                        </a>
                    </dl>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>

    <div v-if="is_select">
        <!--头图-->
        <div class="image_box">
            <img src="" class="image"
                 :src="user.main_image ? user.main_image : '__TMPL__/public/assets/images/userwall/no_image.png'"/>
        </div>
        <!--简介-->
        <div class="detail_describe">
            <div class="fl">
                <h3 class="ws">
                    <span class="fz22">{{user.username}}</span>
                    <span class="fz16 text-gray">(ID:{{user.id}})</span>
                </h3>
                <p class="fz16 mt10">
                    <van-icon
                            :class="[user.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                    {{user.age}}岁
                    ▪ {{user.education}}
                    ▪ {{user.high}}CM
                </p>
            </div>
            <div class="fr mr20">
                <van-button type="primary" size="mini" @click="location.href = '{:url('Userwall/detail')}?id='+user.id">
                    查看详情
                </van-button>
                <!--<br/>-->
                <!--<van-button type="danger" size="mini" @click.stop="cancel(user.id)">取消互选</van-button>-->
            </div>
            <!--<div class="clear"></div>-->
            <!--<div class="fr mr20" v-if="has_prize">-->
                <!--<van-button type="info" size="mini" @click.stop="marry(user.id)">确认结婚</van-button>-->
            <!--</div>-->
            <div class="clear"></div>
        </div>
    </div>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    user: {$user},
                    is_select: {$is_select},
                    has_prize: {$has_prize},
                    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('selectList')}", {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);
                },
                select(id) {
                    this.$dialog.confirm({
                        title: '确认关系',
                        message: '确认选择后将无法再选择其他人',
                    }).then(() => {
                        var that = this;
                        $.post("{:url('selectConfirm')}", {id: id}, function (json) {
                            if (json.code == 1) {
                                that.$dialog.alert({
                                    title: '消息提醒',
                                    message: '系统送你们两张咖啡券，男方在我的->我的咖啡券里查看，请带上对方一起去享用吧！对方联系方式：' + json.data.mobile,
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                that.$toast(json.msg);
                            }
                        });
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                },
                cancel(id) {
                    this.$dialog.confirm({
                        title: '取消选择',
                        message: '确认取消表明心意？',
                    }).then(() => {
                        var that = this;
                        $.post("{:url('selectCancel')}", {id: id}, function (json) {
                            if (json.code == 1) {
                                location.reload();
                            } else {
                                that.$toast(json.msg);
                            }
                        });
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                },
                marry() {
                    this.$dialog.confirm({
                        title: '确认结婚',
                        message: '确认结婚后进行抽奖，凭结婚证领奖，但是无法继续使用此平台',
                    }).then(() => {
                        var that = this;
                        $.get("{:url('marry')}", function (json) {
                            if (json.code == 1) {
                                location.href = "{:url('love/lottery/index')}";
                            } else {
                                that.$toast(json.msg);
                            }
                        });
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                },
            },
        });
    </script>
</block>