<template>
    <div :class="[ 'hanzo-order-tips', show ? 'hanzo-order-tips_active' : '' ]" :style="{top: `${top}px`, left: `${left}px`}">
        <span class="hanzo-order-tips-avatar"><h-image :src="currentTip.src"/></span>
        <span class="hanzo-order-tips-text">{{ currentTip.text }}</span>
    </div>
</template>

<script>
import hImage from '../image/index.vue';
export default {
    name: 'h-order-tips',
    components: {
        hImage
    },
    props: {
        list: Array,
        top: {
            type: [ Number, String ],
            default: 100
        },
        left: {
            type: [ Number, String ],
            default: 20
        }
    },
    data() {
        return {
            defaultTip: {
                src: 'https://front-xps-cdn.xsyx.xyz/2019/09/19/1614040859.jpg',
                text: '最新订单来自 XSYX, 26秒前'
            },
            currentTip: {},
            show: false,
            priList: [ ...this.list ],
            timer: null
        }
    },
    watch: {
        list( newV ) {
            this.priList = [ ...newV ];
            this.getOrderTip();
        }
    },
    mounted() {
        this.getOrderTip();
    },
    destroyed() {
        this.timer && clearTimeout( this.timer );
    },
    methods: {
        getOrderTip() {
            if ( this.priList && this.priList.length ) {
                let current = this.priList.shift();
                current.wechatName = current.wechatName.substr(0, 4) + (current.wechatName.length > 4 ? '...' : '');
                this.timer = setTimeout( () => {
                    this.currentTip = {
                        src: current.wechatImage,
                        text: `最新订单来自${current.wechatName}，${this.ramdom(1, 30)}秒前`
                    }
                    this.show = true;

                    setTimeout( () => {
                        this.show = false;
                        this.getOrderTip();
                    }, 5000 );
                }, this.ramdom(2,4) * 1000 );
            }
        },
        ramdom(min, max){
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
    }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>