/**
 * 顶部header
 */
Vue.component("process-control", {
    template: `
        <div  @mouseover="MouseEnter" @mouseout="MouseLeave">
            <div v-if="list.length == 0" style="height: 200px;text-align: center;line-height: 200px;color: #aaaaaa">暂无数据</div>
            <div v-if="list.length> 0" class="output-content" :style="{'height':height +'px'}" ref="process">
                <div class="output-content-for" v-for="(item,i) in forData">
                    <div class="output-title">
                    {{item.title}}
                    <div class="output-rightTitle" v-if="righttext">
                          {{item.text}}  {{item.number}}%
                    </div>
                    </div>
                    
                    <div class="output-bar"v-if="!prop">
                        <div class="output-bar-border">
                            <div class="output-bar-background-1" :style="{'width':item.width+'%'}"></div>
                        </div>
                        <div class="output-bar-value" v-if="!shownumber">{{item.number}}</div>
                    </div>
                    
                    <div class="output-bar" v-if="prop">
                        <div class="output-bar-border">
                            <div class="output-bar-background-1" :style="{'width':item.number}"></div>
                        </div>
                        <div class="output-bar-value" v-if="!shownumber">{{item.number}}</div>
                    </div>
                    
                    <div class="output-bar" v-if="!type">
                        <div class="output-bar-border">
                            <div class="output-bar-background-2" :style="{'width':item.prop}"></div>
                        </div>
                        <div class="output-bar-value">{{item.prop}}</div>
                    </div>
                    
                </div>
            </div>
        </div>
        
    `,
    props: {
        list:{
            type:Array
        },
        height:{
            type:Number
        },
        number:{
            type:Number
        },
        prop:{
            type:Boolean
        },
        type:{
            type:Boolean,
            default:false
        },
        shownumber:{
            type:Boolean,
            default: false
        },
        righttext:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            forData:[],
            interval: '',
            index:0,
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getData()
            //计划时间
            this.interval = setInterval(this.scroll, 5000);

        },
        getData(){
            var data = this.list
            var max = 0;
            for(let i = 0;i<data.length;i++){
                if(max < Number(data[i].number)){
                    max = Number(data[i].number)
                }
            }
            data.map(x => {
                x.width = (Number(x.number) / max ) * 100
                return x
            })
            this.forData = data
        },
        scroll() {
            let offsetHeight = this.$refs.process.querySelectorAll('.output-content-for')[0].offsetHeight;
            if(this.index == this.forData.length - this.number){
                this.index = 0
                this.$refs.process.scrollTop = 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 () {
            this.init()
        }
    }
})