<template>
    <div class="praise" @click="_clickPraise">
        <div class="icon"></div>
        <span class="prais-num">{{praiseTotal | formatNum}}</span>
        <div class="prais-box">
            <div id="praisBox" ref="praisBox"></div>
        </div>
    </div>
</template>

<script>
    import {getpraisenum,sendPraise} from '@/plugins/API/apiAll'
    import {mapGetters} from 'vuex'
    export default {
        data(){
            return {
                praiseTotal: 0,
                praiseNum: 0,
                tiemr: null,
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
            }),
        },
        mounted(){
            this.$Bus.$on('bus-praiseNum', this._addPraise)
            // 获取点赞数
            this._getpraisenum();
        },
        methods: {
            async _getpraisenum(){
                const res = await getpraisenum({
                    id: this.channelInfo.id,
                })
                if (res.code == 200 && res.errorCode == 0) {
                    let praiseNum = parseInt(res.data.praiseNum) || 0;
                    let customPraiseNum = parseInt(res.data.customPraiseNum) || 0;
                    this.praiseTotal = praiseNum + customPraiseNum;
                }
            },
            _clickPraise(){
                this.praiseTotal ++;
                this.praiseNum ++;
                this.add(2);
                clearTimeout(this.tiemr);
                this.tiemr = setTimeout(() => {
                    this._sendPraise();
                },1000)
            },
            async _sendPraise(){
                const res = await sendPraise({
                    id: this.channelInfo.id,
                    uin: this.channelInfo.uin,
                    num: this.praiseNum,
                })
                if (res.code == 200 && res.errorCode == 0) {
                    setTimeout(() => {
                        this.praiseNum = 0;
                    },1000)
                }
            },
            _addPraise(num){
                if(this.praiseNum != num){
                    this.praiseTotal += num;
                }
                if(num>10){
                    this.add(5)
                }else if(num > 0){
                    this.add(2)
                }
            },
            add(num){
                for (let i = 0; i < num; i++) {
                    this._add();
                }
            },
            _add(type){
                let div = document.createElement("div");
                let a = Math.floor(Math.random()*7);
                div.style.backgroundPosition = `-${a*30}px 0`;
                div.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
                this.$refs.praisBox.appendChild(div);
                this._animation(div)
            },
            _animation(e){
                e.animate([
                        {'transform': `matrix(1, 0, 0, 1, 0, 0)`, 'opacity': 1},
                        {'transform': `matrix(1, 0, 0, 1, ${Math.random()*50-20}, ${Math.random()*50-100})`, 'opacity': 1},
                        {'transform': `matrix(1, 0, 0, 1, ${Math.random()*50-20}, ${Math.random()*50-200})`, 'opacity': 0.7},
                        {'transform': `matrix(1, 0, 0, 1, ${Math.random()*50-20}, ${Math.random()*50-300})`, 'opacity': 0}
                    ], 1500);
                setTimeout(() => {
                    e.parentNode.removeChild(e);
                }, 1500)
            }
        },
        beforeDestroy(){
            this.$Bus.$off('bus-praiseNum', this._addPraise)
        },
    }
</script>
<style lang="less" scoped>
    .praise{
        position: relative;
        height: 55px;
        margin-bottom: 5px;
        background-size: 100% auto;
        background-image: url(./img/praise.png);
        background-repeat: no-repeat;
        background-position: 0 0;

        .prais-num{
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            vertical-align: middle;
            width: 100%;
            height: 14px;
            line-height: 14px;
            font-size: 10px;
            text-align: center;
            background-color: rgba(0,0,0,0.4);
            color: #fff;
            border-radius: 7px;
            white-space: nowrap;
        }
        .prais-box{
            position: absolute;
            top: 0;
            left: 0;
        }
    }
</style>
<style lang="less">
    #praisBox{
        position: absolute;
        top: 0;
        left: 0;

        div{
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            background:url(./img/img-love.png) no-repeat 0 0;background-size:auto 30px;
            background-position: 0 0;
            opacity: 0;
        }
    }
</style>
