<template>
    <div class="draw-turntable" @click="_setDrawTurntable">
        <div class="turntable" @click.stop>
            <div class="start">
                <div class="btn" @click="_start" :class="{'open': drawStart}">开始抽奖({{drawBalance}})次</div>
            </div>
            <ul class="draw-list">
                <li class="item" v-for="(item,index) in drawList" :key="index" :class="{'z-active': rollIndex == index}">
                    <div v-if="item.type">
                        <img src="./img/icon-draw.png" alt="">
                        <div class="rank">{{item.type}}等奖</div>
                    </div>
                    <div v-else>
                        <div class="no-rank">谢谢惠顾</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {sweepstakes} from '@/plugins/API/apiDraw'
    export default {
        props: {
            channelInfo: {},
            userInfo: {},
            value: {},
            info: {},
            count: {},
            jumpUrls: {},
        },
        data(){
            return {
                isShow: this.value,
                drawList: [],
                timer: null,
                rollIndex: 0,
                time: 1000,
                isAjax: true
            }
        },
        computed: {
            drawStart(){
                let is = false;
                if(this.info.id){
                    if(this.info.times > this.count && this.info.status == 1){
                        is = true;
                    }
                }
                return is;
            },
            drawBalance(){
                if(this.info.id){
                    return this.info.times - this.count;
                }else{
                    return 0;
                }
            },
        },
        mounted(){
            this.$nextTick(() => {
                this._setDrawList();
                this._timerStart(1);
            })
        },
        methods: {
            _setDrawList(){
                let arr = [];
                for(let i = 0; i < 8; i++){
                    if(this.info.drawItem[i]){
                        arr.push(this.info.drawItem[i])
                    }else{
                        arr.push({
                            type: 0,
                        })
                    }
                }
                arr.sort((a,b) => {
                    return Math.random()>.5 ? -1 : 1;
                });
                this.drawList = arr;
            },
            _setDrawTurntable(){
                this.isShow = false;
            },
            _timerStart(type, obj){
                if(type == 1){
                    this.time = 1000;
                }else if(type == 2){
                    this.time = this.time > 500 ? 500 : this.time < 100 ? this.time-100 : 100;
                }else if(type == 3){
                    this.time = this.time < 500 ? this.time+100 : 500;
                }
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.rollIndex ++;
                    if(this.rollIndex >= 8){
                        this.rollIndex = 0
                    }
                    if(obj && this.drawList[this.rollIndex].type == obj.type){
                        this.$layer.msg(obj.str);
                        let userResultItem = {
                            drawItemId: obj.type,
                            result: obj.str,
                        }
                        this.$emit('addResult',userResultItem)
                        clearTimeout(this.timer)
                        return;
                    }
                    this._timerStart(type, obj);
                }, this.time)
            },
            async _start(){
                if(!this.userInfo.id){
                    this.$layer.msg('请先登录并绑定手机号!~');
                    this.$Bus.$emit('bus-showLogin', true);
                    return false;
                }
                if(!this.userInfo.phone){
                    window.location.href = this.jumpUrls.login_binding;
                    return false;
                }
                if(!this.isAjax){
                    return false;
                }
                this._timerStart(2);
                this.isAjax = false;
                const res = await sweepstakes({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                })
                setTimeout(() => {
                    this.isAjax = true;
                    if(res.code == 200 && res.errorCode == 0){
                        this._timerStart(3, res.data);
                    }else{
                        this._timerStart(1);
                    }
                },3000)
            }
        },
        watch: {
            value(nVal){
                this.isShow = nVal;
            },
            isShow(nVal){
                this.$emit('input', nVal);
                if(nVal){
                    this._setDrawList();
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    .draw-turntable {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.3);

        .turntable {
            position: absolute;
            top: calc(50% - 155px);
            left: calc(50% - 155px);
            width: 310px;
            height: 310px;
            background: #6C5251;
            border-radius: 10px;

            .draw-list {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                .item {
                    position: absolute;
                    width: 90px;
                    height: 90px;
                    border: 5px solid transparent;
                    border-radius: 5px;
                    background-color: rgba(0, 0, 0, 0.2);
                    background-image: url("./img/icon-draw-bg.png");
                    background-repeat: no-repeat;
                    background-position: 0 0;
                    background-size: auto 100%;
                    transition: all 0.3s;

                    img {
                        display: block;
                        width: 50px;
                        height: 50px;
                        margin: 3px auto;
                    }
                    .rank {
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                        white-space: nowrap;
                        font-size: 14px;
                        text-align: center;
                        color: #fff;
                    }
                    .no-rank {
                        padding: 10px;
                        line-height: 30px;
                        font-size: 25px;
                        text-align: center;
                        color: #fff;
                        font-weight: bold;
                    }
                    &.z-active{
                        border-color: #F6FF00;
                    }
                    &:nth-child(1) {
                        top: 10px;
                        left: 10px;
                        background-position: 0 0;
                    }
                    &:nth-child(2) {
                        top: 10px;
                        left: 110px;
                        background-position: -88px 0;
                    }
                    &:nth-child(3) {
                        top: 10px;
                        left: 210px;
                        background-position: -176px 0;
                    }
                    &:nth-child(4) {
                        top: 110px;
                        left: 210px;
                        background-position: -352px 0;
                    }
                    &:nth-child(5) {
                        top: 210px;
                        left: 210px;
                        background-position: -616px 0
                    }
                    &:nth-child(6) {
                        top: 210px;
                        left: 110px;
                        background-position: -528px 0
                    }
                    &:nth-child(7) {
                        top: 210px;
                        left: 10px;
                        background-position: -440px 0
                    }
                    &:nth-child(8) {
                        top: 110px;
                        left: 10px;
                        background-position: -264px 0
                    }
                }
            }
            .start {
                position: absolute;
                top: 110px;
                left: 110px;
                z-index: 1;
                width: 90px;
                height: 90px;
                border: 5px solid transparent;
                border-radius: 5px;
                background-color: rgba(0, 0, 0, 0.2);

                .btn {
                    width: 100%;
                    height: 100%;
                    background-color: #999999;
                    font-size: 18px;
                    line-height: 30px;
                    padding: 10px 0;
                    text-align: center;
                    color: #777777;
                    font-weight: bold;

                    &.open {
                        background-color: #EA4541;
                        color: #ffffff;
                    }
                }
            }
        }
    }
</style>
