/**
 * 顶部header
 */
Vue.component("process-control-bar", {
    template: `
        <div @mouseover="MouseEnter" @mouseout="MouseLeave">
            <div class="output-content" ref="process" :style="{'height':height +'px'}">
                <div class="process-for" style="height: 60px;" v-for="(item,i) in forData">
                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 10px 0 5px;">
                        <div>
                            <img src="http://fileimg.makalu.cc/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png" width="12" height="8">
                            <span style="color:#fcbc02;font-style:italic;padding-right: 5px;">No.{{i + 1}}</span>
                            <span style="color:#c6d9fa">{{item.name}}</span>
                        </div>
                        <div style="color: #6c829a">
                            <span style="color: #c6d9fa">{{item.total}}</span> {{item.unit}} 
                            <span>（</span> 
                            <span style="color: #52adf4">{{item.yesMonitor}}</span> {{item.unit}} / 
                            <span style="color: #4677ff">{{item.notMonitor}}</span> {{item.unit}} 
                            <span>）</span>
                        </div>
                    </div>
                    <div style="padding-top: 8px;">
                        <div style="height: 6px;background:rgba(22,203,115,0.1);display: flex;align-items: center">
                            <div :style="{'width':item.yesWidth+'%','height':'6px','background':'#52adf4'}"></div>
                            <div :style="{'width':item.notWidth+'%','height':'6px','background':'#4677ff'}"></div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>

    `,
    props: {
        list:{
            type:Array
        },
        height:{
            type:Number
        },
        number:{
            type:Number
        }
    },
    data() {
        return {
            forData:[],
            interval: '',
            index:0,
        }
    },
    mounted() {
        //this.init()
    },
    methods: {
        init() {
            this.getData()
            //计划时间
        },
        getData(){
            var data = this.list
            var max = 0;
            for(let i = 0;i<data.length;i++){
                if(max < Number(data[i].total)){
                    max = Number(data[i].total)
                }
            }
            data.map(x => {
                x.yesWidth = (Number(x.yesMonitor) / max ) * 100
                x.notWidth = (Number(x.notMonitor) / max ) * 100
                return x
            })
            this.forData = data
            this.$refs.process.scrollTop = 0
            this.index = 0
            this.interval = setInterval(this.scroll, 5000);
        },
        scroll() {
            let offsetHeight = this.$refs.process.querySelectorAll('.process-for')[0].offsetHeight;
            if(this.index == this.forData.length - this.number){
                this.index = 0
            }else{
                this.index += 1
            }
            $(this.$refs.process).animate({scrollTop:(offsetHeight * this.index)+'px'})
        },
        MouseEnter() {//鼠标移入停止滚动
            clearInterval(this.interval);
        },
        MouseLeave() {//鼠标离开继续滚动
            this.interval = setInterval(this.scroll, 5000);
        },

    },
    watch:{
        list: function (n,o) {
            this.init()
        },
    }

})