<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="__TMPL__/public/assets/images/favicon.ico"/>
    <meta name="Keywords" content="{$site_info.site_seo_keywords}"/>
    <meta name="Description" content="{$site_info.site_seo_description}"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/style.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/icon.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/element.css">
    <script src="__TMPL__/public/assets/js/vue.min.js"></script>
    <script src="__TMPL__/public/assets/js/element.js"></script>
    <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
    <title>{{$active.title}}</title>
    <style>
        body {margin:0;padding:0;border:none;}
        .image_box {width:100%;height:380px;overflow: hidden;}
        .image {width: 100%;height: 100%;object-fit: cover;}
        .user_no {color:#FF0000;font-weight:bold;font-size:22px;}
        .title {padding: 5px 10px;font-size: 16px;font-weight:bold;}
        .content_box {padding:5px 10px;}
    </style>
</head>
<body>
<div id="app">
    <div style="width:100%;box-sizing:border-box;overflow:hidden;height:100vh;padding:10px;">
        <el-carousel indicator-position="none" height="100vh" arrow="never" :interval="10000">
            <el-carousel-item v-for="(item1, index) in res">
                <el-row :gutter="40">
                    <el-col :span="6" v-for="(item, index) in item1">
                        <el-card :body-style="{ padding: '0px' }">
                            <!--头图-->
                            <div class="image_box">
                                <div class="rq">
                                    <img src="__TMPL__/public/assets/images/userwall/rq.svg">
                                    人气：{{item.star}}
                                </div>
                                <img :src="item.main_image" class="image" />
                            </div>
                            <div class="detail_describe">
                                <div class="fl">
                                    <h3 class="ws">
                                        <span class="fz22">{{item.realname ? item.realname : item.username}}</span>
                                        <span class="fz16 text-gray">(嘉宾编号:<span class="user_no"> {{item.user_no}} </span>)</span>
                                    </h3>
                                    <p class="fz16 mt10">
                                        <i :class="[item.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']" style="font-size:22px;"></i>
                                        {{item.age}}岁
                                        ·
                                        {{item.high}}CM
                                    </p>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="split-block"></div>
                            <div class="title"><span class="bg-pink inline_block vam mr5 t_1 pr dian br"></span>基本资料</div>
                            <div class="content_box">
                                <el-tag effect="plain">{{item.high ? item.high + 'CM' : '身高保密'}}</el-tag>
                                <el-tag effect="plain">{{item.weight ? item.weight + 'KG' : '体重保密'}}</el-tag>
                                <el-tag effect="plain" v-if="item.education">{{item.education}}</el-tag>
                            </div>
                            <div class="split-block"></div>
                            <div class="title"><span class="bg-pink inline_block vam mr5 t_1 pr dian br"></span>择偶要求</div>
                            <div class="content_box">
                                <el-tag effect="plain">年龄：{{getMatingValue(item.mating.min_age,item.mating.max_age,'岁')}}</el-tag>
                                <el-tag effect="plain">身高：{{getMatingValue(item.mating.min_high,item.mating.max_high,'CM')}}</el-tag>
                                <el-tag effect="plain">体重：{{getMatingValue(item.mating.min_weight,item.mating.max_weight,'KG')}}</el-tag>
                            </div>
                            <div class="split-block"></div>
                            <div class="title"><span class="bg-pink inline_block vam mr5 t_1 pr dian br"></span>扫码查看详细资料</div>
                            <div class="content_box" style="text-align:center;">
                                <img :src="'/qrcode.php?code=' + item.url" alt="" style="width:370px;height:350px;">
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-carousel-item>
        </el-carousel>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: {$list},
                last_time: {$last_time},
                interval: null,
            };
        },
        mounted() {
            this.get_list();
        },
        methods: {
            get_list() {
                let self = this;
                this.interval = setInterval(function(){
                    $.post("{:url('sceneListPost')}",{time:self.last_time,id:{$id}},function(json){
                        if (json.data.length > 0) {
                            let list = self.list;
                            for (var i in list) {
                                json.data.push(list[i]);
                            }
                            self.last_time = json.data[0].site_time;
                            self.list = json.data;
                        }
                    },'json');
                },3000)
            },
            //多列选择器值
            getMatingValue(min,max,ext) {
                if (min === '' || max === '') {
                    return '';
                }

                if (min === 0 && max === 0) {
                    return '不限';
                }

                let min_ext = min + ext;
                if (min === 0) {
                    min_ext = '不限';
                }
                let max_ext = max + ext;
                if (max === 0) {
                    max_ext = '不限';
                }
                return `${min_ext}-${max_ext}`;
            },
        },
        computed:{
            res() {
                let list = [];
                let item = [];
                for (var i = 0; i < this.list.length; i++) {
                    if (i % 4 == 0 && i != 0) {
                        list.push(item);
                        item = [];
                        item.push(this.list[i]);
                    } else {
                        item.push(this.list[i]);
                    }
                }
                if (item.length != 0) {
                    list.push(item);
                }
                return list;
            },
        },
    });
</script>
</html>