<template>
    <div class="draw" v-if="info.id">
        <div class="draw-box">
            <div class="top">
                <img src="./img/draw-head.jpg" alt="">
                <div class="start" :class="{'open': drawStart}" @click="_openDraw">
                    开始抽奖(<span>{{drawBalance}}</span>次)
                </div>
            </div>
            <div class="my-draw" v-if="newUserDrawResult.length">
                <div class="my-box">
                    <div class="title">我的奖品</div>
                    <div class="list">
                        <span v-for="(item,index) in newUserDrawResult" :key="index">
                            {{index+1}}、{{item.result}}　　
                        </span>
                    </div>
                </div>
            </div>
            <div class="draw-list">
                <div class="title-box">
                    <dian-box class="dian"></dian-box>
                    <div class="title">奖项设置</div>
                </div>
                <ul class="list">
                    <li class="item" v-for="(item,index) in info.drawItem" :key="index">
                        {{ruleList[item.type]}}等奖<span class="num">{{item.name}}</span>
                    </li>
                </ul>
            </div>
            <div class="draw-record" v-if="newDrawResultList.length">
                <div class="title-box">
                    <dian-box class="dian"></dian-box>
                    <div class="title">获奖名单</div>
                </div>
                <div class="list-box">
                    <ul class="list" ref="recordList">
                        <li class="item" v-for="(item,index) in newDrawResultList" :key="index">
                            <div>
                                恭喜<span> {{item.userName}} </span>获得<span> {{item.drawName}} </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="draw-info">
                <div class="title-box">
                    <dian-box class="dian"></dian-box>
                    <div class="title">活动详情</div>
                </div>
                <div class="content">{{info.content}}</div>
            </div>
        </div>
        <turntable-box 
            v-transfer-dom
            v-model="showDraw" 
            v-show="showDraw" 
            :info="info" 
            :count="count" 
            @addResult="addUserResult" 
            :channelInfo="channelInfo" 
            :userInfo="userInfo"
        ></turntable-box>
    </div>
</template>
<script>
    import {getDrawInfo,getUserDrawResult} from '@/plugins/API/apiDraw'
    import dianBox from './dian'
    import turntableBox from './turntable'

    export default {
        components: {
            dianBox,
            turntableBox
        },
        props: {
            drawId: {},
            channelInfo: {},
            userInfo: {},
            jumpUrls: {},
        },
        data(){
            return {
                ruleList: {1: '一',2: '二',3: '三',4: '四',5: '五',6: '六',7: '七',8: '八'},
                info: {},
                drawResult: [],
                count:0,
                userResult: [],
                showDraw: false,
            }
        },
        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;
                }
            },
            newUserDrawResult(){
                let arr = [];
                if(this.userResult.length){
                     arr = this.userResult.filter((x) => {return x.drawItemId != 0;});
                }
                return arr;
            },
            newDrawResultList(){
                let arr = [];
                if(this.drawResult.length){
                    arr = this.drawResult.filter((x) => {return x.drawItemId != 0;});
                }
                return arr;
            }
        },
        mounted(){
            this.$Bus.$on('bus-drawStatus', this._drawStatus)
            this._getConfig();
        },
        methods: {
            _drawStatus(data){
                if(data.drawId == this.drawId){
                    if(data.status == 1){
                        this._getConfig();
                    }else{
                        this.info.status = 2;
                    }
                }
            },
            _getConfig(){
                if(this.drawId){
                    this._getDrawInfo();
                    if(this.userInfo.phone){
                        this._getUserDrawResult();
                    }
                }
            },
            async _getDrawInfo(){
                const res = await getDrawInfo({
                    drawId: parseInt(this.drawId),
                })
                    if(res.code == 200 && res.errorCode == 0){
                        this.info = res.data.drawInfo;
                        this.drawResult = res.data.drawResultList;
                    }
            },
            async _getUserDrawResult(){
                const res = await getUserDrawResult({
                    uin: this.channelInfo.uin,
                    drawId: parseInt(this.drawId),
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.count = res.data.count;
                    this.userResult = res.data.drawResult;
                }
            },
            _openDraw(){
                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.info.status == 0){
                    this.$layer.msg('抽奖未开启');
                }else if(this.info.status == 2){
                    this.$layer.msg('抽奖已结束');
                }else if(this.info.times <= this.count){
                    this.$layer.msg('抽奖机会用完了')
                }else if(this.drawStart){
                    this.showDraw = true;
                }
            },
            addUserResult(obj){
                this.count ++;
                this.userResult.push(obj)
            },
        },
        watch: {
            'userInfo.id'(){
                if(this.userInfo.phone){
                    this._getUserDrawResult();
                }
            }
        },
        beforeDestroy(){
            this.$Bus.$off('bus-drawStatus', this._drawStatus)
        },
    }
</script>

<style lang="less" scoped>
    .draw{
        height: 100%;
        background: #E74143;


        .draw-box{
            height: 100%;
            overflow: auto;

            .top{
                position: relative;
                margin-bottom: 10px;

                img{
                    display: block;
                    width: 100%;
                    height: auto;
                }
                .start{
                    position: absolute;
                    bottom: -20px;
                    left: calc(50% - 105px);
                    width: 210px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 18px;
                    border-radius: 40px;
                    background: #999999;
                    color: #ffffff;

                    &.open{
                        background: #FFD23B;
                        color: #E81903;
                    }
                }
            }
            .my-draw{
                padding:30px 20px 0;

                .my-box{
                    padding: 20px 10px 10px;
                    background: #ffffff;
                    border-radius: 5px;

                    .title{
                        text-align: center;
                        font-weight: 700;
                        font-size: 18px;
                        color: #E74143;
                    }
                    .list{
                        margin-top: 10px;
                        padding: 10px;
                        border-radius: 4px;
                        font-size: 14px;
                        color: #E74143;
                        background: #FFEBEB;

                        span{
                            display: inline-block;
                            white-space: nowrap;
                            margin-right: 10px;
                        }
                    }
                }
            }
            .draw-list{
                padding: 20px 20px 0;

                .title-box{
                    position: relative;
                    height: 40px;
                    padding: 2px 0;
                    overflow: hidden;

                    .dian{
                        position: absolute;
                        top: calc(50% - 5px);
                        left: 0;
                        width: 100%;
                    }
                    .title{
                        position: absolute;
                        top: calc(50% - 18px);
                        left: calc(50% - 65px);
                        width: 130px;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        font-size: 18px;
                        border-radius: 36px;
                        background: #FFD23B;
                        color: #E81903;
                    }
                }
                .list{
                    padding: 10px;
                    .item{
                        display: flex;
                        line-height: 22px;
                        color: #ffffff;
                        font-size: 14px;

                        .num{
                            flex: 1;
                            margin-left: 10px;
                        }
                    }
                }
            }
            .draw-record{
                padding: 20px 20px 0;

                .title-box{
                    position: relative;
                    height: 40px;
                    padding: 2px 0;
                    overflow: hidden;

                    .dian{
                        position: absolute;
                        top: calc(50% - 5px);
                        left: 0;
                        width: 100%;
                    }
                    .title{
                        position: absolute;
                        top: calc(50% - 18px);
                        left: calc(50% - 65px);
                        width: 130px;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        font-size: 18px;
                        border-radius: 36px;
                        background: #FFD23B;
                        color: #E81903;
                    }
                }
                .list-box{
                    padding: 10px;
                    width: 100%;
                    max-height: 300px;
                    overflow: auto;

                    .list{
                        position: relative;
                        top: 0;
                        left: 0;
                        width: 100%;
                        .item{
                            line-height: 15px;
                            padding: 3px 0;
                            color: #FFD23B;
                            font-size: 12px;
                        }
                    }
                }
            }
            .draw-info{
                padding: 20px 20px 10px;

                .title-box{
                    position: relative;
                    height: 40px;
                    padding: 2px 0;
                    overflow: hidden;

                    .dian{
                        position: absolute;
                        top: calc(50% - 5px);
                        left: 0;
                        width: 100%;
                    }
                    .title{
                        position: absolute;
                        top: calc(50% - 18px);
                        left: calc(50% - 65px);
                        width: 130px;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        font-size: 18px;
                        border-radius: 36px;
                        background: #FFD23B;
                        color: #E81903;
                    }
                }
                .content{
                    padding-top: 10px;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    color: #fff;
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }
    }
</style>
