<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>随机抽人</title>
    <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>
    <style>
        body {margin:0;padding:0;border:none;}
        .image_box {width:100%;height:500px;overflow: hidden;}
        .image {width: 100%;height: 100%;object-fit: cover;}
        .user_no {color:#FF0000;font-weight:bold;font-size:22px;}
    </style>
</head>
<body>
<div id="app">
    <div style="width:100%;box-sizing:border-box;height:600px;padding:10px;margin-top:100px;overflow: hidden;">
        <el-row :gutter="40" v-if="num == 2">
            <el-col :span="6" :offset="6">
                <el-card :body-style="{ padding: '0px' }">
                    <!--头图-->
                    <div class="image_box">
                        <div class="rq">
                            <img src="__TMPL__/public/assets/images/userwall/rq.svg">
                            人气：{{man_select1.star}}
                        </div>
                        <img :src="man_select1.main_image" class="image" />
                    </div>
                    <div class="detail_describe">
                        <div class="fl">
                            <h3 class="ws">
                                <span class="fz22">{{man_select1.realname ? man_select1.realname : man_select1.username}}</span>
                                <span class="fz16 text-gray">(嘉宾编号:<span class="user_no"> {{man_select1.user_no}} </span>)</span>
                            </h3>
                        </div>
                        <div class="clear"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                    <!--头图-->
                    <div class="image_box">
                        <div class="rq">
                            <img src="__TMPL__/public/assets/images/userwall/rq.svg">
                            人气：{{woman_select1.star}}
                        </div>
                        <img :src="woman_select1.main_image" class="image" />
                    </div>
                    <div class="detail_describe">
                        <div class="fl">
                            <h3 class="ws">
                                <span class="fz22">{{woman_select1.realname ? woman_select1.realname : woman_select1.username}}</span>
                                <span class="fz16 text-gray">(嘉宾编号:<span class="user_no"> {{woman_select1.user_no}} </span>)</span>
                            </h3>
                        </div>
                        <div class="clear"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="40" v-if="num == 4">
            <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                    <!--头图-->
                    <div class="image_box">
                        <div class="rq">
                            <img src="__TMPL__/public/assets/images/userwall/rq.svg">
                            人气：{{man_select1.star}}
                        </div>
                        <img :src="man_select1.main_image" class="image" />
                    </div>
                    <div class="detail_describe">
                        <div class="fl">
                            <h3 class="ws">
                                <span class="fz22">{{man_select1.realname ? man_select1.realname : man_select1.username}}</span>
                                <span class="fz16 text-gray">(嘉宾编号:<span class="user_no"> {{man_select1.user_no}} </span>)</span>
                            </h3>
                        </div>
                        <div class="clear"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                    <!--头图-->
                    <div class="image_box">
                        <div class="rq">
                            <img src="__TMPL__/public/assets/images/userwall/rq.svg">
                            人气：{{man_select2.star}}
                        </div>
                        <img :src="man_select2.main_image" class="image" />
                    </div>
                    <div class="detail_describe">
                        <div class="fl">
                            <h3 class="ws">
                                <span class="fz22">{{man_select2.realname ? man_select2.realname : man_select2.username}}</span>
                                <span class="fz16 text-gray">(嘉宾编号:<span class="user_no"> {{man_select2.user_no}} </span>)</span>
                            </h3>
                        </div>
                        <div class="clear"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                    <!--头图-->
                    <div class="image_box">
                        <div class="rq">
                            <img src="__TMPL__/public/assets/images/userwall/rq.svg">
                            人气：{{woman_select1.star}}
                        </div>
                        <img :src="woman_select1.main_image" class="image" />
                    </div>
                    <div class="detail_describe">
                        <div class="fl">
                            <h3 class="ws">
                                <span class="fz22">{{woman_select1.realname ? woman_select1.realname : woman_select1.username}}</span>
                                <span class="fz16 text-gray">(嘉宾编号:<span class="user_no"> {{woman_select1.user_no}} </span>)</span>
                            </h3>
                        </div>
                        <div class="clear"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }">
                    <!--头图-->
                    <div class="image_box">
                        <div class="rq">
                            <img src="__TMPL__/public/assets/images/userwall/rq.svg">
                            人气：{{woman_select2.star}}
                        </div>
                        <img :src="woman_select2.main_image" class="image" />
                    </div>
                    <div class="detail_describe">
                        <div class="fl">
                            <h3 class="ws">
                                <span class="fz22">{{woman_select2.realname ? woman_select2.realname : woman_select2.username}}</span>
                                <span class="fz16 text-gray">(嘉宾编号:<span class="user_no"> {{woman_select2.user_no}} </span>)</span>
                            </h3>
                        </div>
                        <div class="clear"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div style="width:100%;box-sizing:border-box;margin-top:50px;padding:10px;text-align:center;">
        <el-radio v-model="num" :label="2" @change="changeNum">2人</el-radio>
        <el-radio v-model="num" :label="4" @change="changeNum">4人</el-radio>
        <el-button type="primary" @click="start">开始</el-button>
        <el-button type="danger" @click="end">结束</el-button>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                num:2,
                man: {$man},
                woman: {$woman},
                man_index1: 0,
                man_index2: 1,
                woman_index1: 0,
                woman_index2: 1,
                man_count: {$man_count},
                woman_count: {$woman_count},
                inter: null,
            };
        },
        methods: {
            changeNum() {
                this.man_index1 = 0;
                this.man_index2 = 1;
                this.woman_index1 = 0;
                this.woman_index2 = 1;
            },
            start() {
                let self = this;
                this.inter = setInterval(function(){
                    if (self.num == 2) {
                        if (self.man_index1 < self.man_count) {
                            self.man_index1++;
                        } else {
                            self.man_index1 = 0;
                        }
                        if (self.woman_index1 < self.woman_count) {
                            self.woman_index1++;
                        } else {
                            self.woman_index1 = 0;
                        }
                    }
                    if (self.num == 4) {
                        if (self.man_index2 < self.man_count) {
                            self.man_index1 = self.man_index2 + 1;
                            if (self.man_index1 < self.man_count) {
                                self.man_index2 = self.man_index1 + 1;
                            } else {
                                self.man_index2 = 0;
                            }
                        } else {
                            self.man_index1 = 0;
                            self.man_index2 = 1;
                        }
                        if (self.woman_index2 < self.woman_count) {
                            self.woman_index1 = self.woman_index2 + 1;
                            if (self.woman_index1 < self.woman_count) {
                                self.woman_index2 = self.woman_index1 + 1;
                            } else {
                                self.woman_index2 = 0;
                            }
                        } else {
                            self.woman_index1 = 0;
                            self.woman_index2 = 1;
                        }
                    }
                },100);
            },
            end() {
                clearInterval(this.inter);
            },
        },
        computed: {
            man_select1() {
                return this.man[this.man_index1];
            },
            woman_select1() {
                return this.woman[this.woman_index1];
            },
            man_select2() {
                return this.man[this.man_index2];
            },
            woman_select2() {
                return this.woman[this.woman_index2];
            }
        }
    });
</script>
</html>