<template>
    <div class="auto-broadcast" :style="{'backgroundColor': backgroundColor, 'height' : getHeight, 'borderColor': borderColor}">
        <div class="icon" :style="{'color': iconColor, 'lineHeight' : getLineHeight}"><slot name="icon"></slot></div>
        <div class="text" :class="getClass">
            <ul class="broadcast-text-content-wrap">
                <li class="broadcast-text-content"
                    :style="{'color': textColor, 'height': getHeight}"
                    v-for="item in data"
                >
                    <div v-if="getType === 'object'">
                        <div class="a-wrap">
                            <a @click="doBroadcast(item)"
                               @mouseover="doCancelTimer"
                               @mouseleave="doStartTimer">{{typeof item === 'string' ? item : item
                                [prop]}}
                            </a>
                        </div>
                    </div>
                    <div v-else>
                        <div v-for="sub in item" class="a-wrap">
                            <a @click="doBroadcast(sub)" @mouseover="doCancelTimer"
                               @mouseleave="doStartTimer">{{typeof item === 'string' ? item :
                                sub[prop]}}
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ElAutoBroadcast',
        props: {
            backgroundColor: { // 背景颜色
                type: String,
                default: 'white'
            },
            borderColor: {
                type: String,
                default: '#dcdfe6'
            },
            textColor: { // 文字颜色
                type: String,
                default: 'black'
            },
            iconColor: { // 图标颜色
                type: String,
                default: 'inherit'
            },
            data: { // 默认示例
                type: Array,
                default: []
            },
            time: { // 动画时间>=500
                type: Number,
                default: 2000
            },
            prop: {
                type: String,
                default: 'name'
            }
        },
        data() {
            return {
                timer500: null,
                timer2000: null,
                animate: false,
                doubleArray: []
            }
        },
        created: function() {
            this.timer2000 = setInterval(this.showMarquee, this.time < 500 ? 2000 : this.time)
        },
        methods: {
            showMarquee() {
                this.animate = true;
                this.timer500 = setTimeout(() => {
                    this.data.push(this.data[0]);
                    this.data.shift();
                    this.animate = false;
                }, 500)
            },
            doBroadcast(item) {
                this.$emit('select', item)
            },
            doCancelTimer() {
                console.log('mouseover')
                clearInterval(this.timer2000);
                clearTimeout(this.timer500)
            },
            doStartTimer() {
                console.log('mouseleave')
                this.animate = false
                this.timer2000 = setInterval(this.showMarquee, this.time)
            }
        },
        computed: {
            getType() {
                if (this.data[0]) {
                    let type = Object.prototype.toString.call(this.data[0])
                    if (type === '[object Array]') {
                        return 'array'
                    } else {
                        return 'object'
                    }
                } else {
                    return 'object'
                }
            },
            getHeight() {
                if (this.data[0]) {
                    return this.getType === 'array' ? this.data[0].length * 50 + 'px' : 50 + 'px'
                } else {
                    return 50 + 'px'
                }

            },
            getLineHeight() {
                if (this.data[0]) {
                    return this.getType === 'array' ? this.data[0].length * 50 + 'px' : '50px'
                } else {
                    return '50px'
                }
            },
            getLength() {
                if (this.getType === 'array') {
                    return this.data[0].length
                } else {
                    return 1
                }
            },
            getClass() {
                let obj = {}
                for (let i = 0; i < this.getLength; i++) {
                    obj[`broadcast_marquee_top_${i + 1}`] = this.animate && this.getLength === i + 1
                }
                return obj
            }
        },
        destroyed: function() {
            clearInterval(this.timer2000);
            clearTimeout(this.timer500)
            this.timer2000 = null
            this.timer500 = null
        }
    }
</script>