Vue.component('table-ranking', {
    template:`
        <div class="element-table-ranking">
            <el-table ref="warning"
                        :data="data.data"
                        style="width: 100%"
                        :height="height+'px'"
                        @cell-mouse-enter="mouseEnter"
                        @cell-mouse-leave="mouseLeave"
                        @row-click="onRankingTr">
                <el-table-column  :label="item.label" :width="item.width" v-for="item in data.label" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div v-if="item.type == '' || item.type == undefined" :style="{'color':item.color}">{{scope.row[item.data]}}</div>
                        <div v-if="item.type == 'state'" :style="{'color':scope.row[item.type_color]}" >{{scope.row[item.data]}}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    `,
    props: {
        height:{
            type:Number
        },
        data: {
            type:Object,
        },
    },
    data() {
        return {
            interval: '',
        };
    },
    mounted(){
        this.init()
    },
    created() {

    },
    methods: {
        init() {
            //表格定时器
            this.interval = setInterval(this.scroll, 50);
        },
        scroll() {
            let maxHeight = this.$refs.warning.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
            let clientHeight = this.$refs.warning.bodyWrapper.clientHeight;
            if (Math.abs(this.$refs.warning.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 3) { //预留5像素误差
                this.$refs.warning.bodyWrapper.scrollTop = 0;
            } else {
                this.$refs.warning.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
            }
        },
        //鼠标移入停止滚动
        mouseEnter() {
            clearInterval(this.interval);
        },
        //鼠标离开继续滚动
        mouseLeave() {
            this.interval = setInterval(this.scroll, 50);
        },
        onRankingTr(row){
            this.$emit('item',row);
        }
    },
    watch:{
        data:function () {
            if(this.interval){
                clearInterval(this.interval);
            }
            this.init()
        }
    }
})