/**
 * 顶部header
 */
Vue.component("technical-disclosure-chart", {
    template: `
        <div class="technical-disclosure" :style="{'height':height+'px'}" ref="list" @mouseover="mouseEnter" @mouseout="mouseLeave">
            <div class="technical-disclosure-for" v-for="(item,i) in listData" >
                <div class="technical-disclosure-title">
                    <div class="technical-disclosure-text">{{item.name}}</div>
                    <div class="technical-disclosure-value">
                        <span>{{item.value}}</span>
                        <span>{{item.prop}} %</span>
                    </div>
                </div>
                <div class="technical-disclosure-border">
                    <div class="technical-disclosure-bgd" :style="{'width':item.prop+'%'}" @click="onChart(item)"></div>
                </div>
            </div>
        </div>
    `,
    props: {
        height:{
            type: Number,
        },
        datas:{
            type:Array
        },
        number:{
            type: Number,
        },

    },
    data() {
        return {
            interval: '',
            index:0,
            listData:[],
            num:0
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getListDataChart()
            //计划时间
            this.interval = setInterval(this.scroll, 3000);
        },
        getListDataChart(){
            if(this.datas.length>0){
                var data = this.datas
                var arr = []
                for(let i = 0;i< data.length;i++){
                    arr.push(data[i].value)
                }
                var max = Math.max(...arr)
                data.map(x => {
                    x.prop =((x.value / max ) * 100) .toFixed(2)
                    return x
                })
                this.listData = data
            }
        },

        scroll() {
            const height = $('.technical-disclosure-for').innerHeight()
            let n = this.number ? this.number:0;
            if(this.index == this.listData.length - n){
                this.$refs.list.scrollTop = 0
                this.index = 1
            }else{
                this.index+=1
            }
            $(this.$refs.list).animate({scrollTop:(height * this.index)+'px'})
        },


        mouseEnter() {//鼠标移入停止滚动
            clearInterval(this.interval);
        },
        mouseLeave() {//鼠标离开继续滚动
            this.interval = setInterval(this.scroll, 3000);
        },
        onChart(item){
            this.$emit('value',item);
        }
    },

    watch:{
        datas:function () {
            this.getListDataChart()
        }
    },

})