/**
 * 顶部header
 */
Vue.component("planne-output", {
    template: `
    <!--最外班盒子-->
<div>
    <div class="outBox" 
     @mouseover="MouseEnter"
     @mouseout="MouseLeave"
     ref="jhxj"
     >
        <div v-if="data.length == 0" style="height: 200px;text-align: center;line-height: 200px;color: #aaaaaa">暂无数据</div>
        <!--每一个盒子-->
        <div v-if="data.length> 0" class="allBox" v-for="(item,index) in data" >
            <!--时间年份-->
            <div class="planTime">{{item.planeTime}}</div>
            <!--    比例-->
            <div class="planeScale">{{(item.realityValue/item.planValue*100).toFixed(1)+'%'}}</div>
            <!--    进度条-->
            <div class="planeProgress">
                <!--                每一个进度条-->
                <div class="inBox">
                    <!--                      进度条盒子-->
                    <div class="progressBox">
                        <!--  进度条内容部分-->
                        <div class="upActive" :style="{'width':item.planValueWidth+'%'}"></div>
                    </div>
                    <!--                        数值-->
                    <div class="planeData">{{item.planValue.toFixed(2)}}</div>
                </div>
                <!--                每一个进度条-->
                <div class="inBox">
                    <!--                      进度条盒子-->
                    <div class="progressBox">
                        <!--  进度条内容部分-->
                        <div class="downActive" :style="{'width':item.realityValueWidth+'%'}"></div>
                    </div>
                    <!--                        数值-->
                    <div class="planeData">{{item.realityValue.toFixed(2)}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
    `,
    props: {
        planelist: {
            type: Array,
            default: []
        },

    },
    data() {
        return {
            interval: '',
            IndexBox:0,
            data:[]
        }
    },
    mounted() {
        this.init(

        )
    },
    methods: {
        init() {
            //计划时间
            this.interval = setInterval(this.scroll, 5000);
            this.getData()
        },

        getData(){
            var planelist = this.planelist
            var arr = []
            for(let i = 0;i<planelist.length;i++){
                arr.push(planelist[i].planValue)
            }
            console.log(arr)
            var max = Math.max(...arr)

            planelist.map(x => {
                x.planValueWidth = (x.planValue / max ) * 100
                x.realityValueWidth = (x.realityValue / max ) * 100
                return x
            })
            this.data = planelist
        },

        scroll() {
            let offsetHeight = this.$refs.jhxj.querySelectorAll('.allBox')[0].offsetHeight;
            if(this.IndexBox==this.planelist.length-6){
                this.IndexBox=0
            }else{
                this.IndexBox+=1
            }
            $(this.$refs.jhxj).animate({scrollTop:(offsetHeight * this.IndexBox)+'px'})
        },
        MouseEnter() {//鼠标移入停止滚动
            clearInterval(this.interval);
        },
        MouseLeave() {//鼠标离开继续滚动
            this.interval = setInterval(this.scroll, 5000);
        },

    },
    //计算属性
    // computed: {
    //     percentage() {
    //         return index => {
    //             let row = this.planelist[index]
    //             console.log(row)
    //             return (row.plansList[1].widthB / row.plansList[0].widthA) * 100
    //         }
    //
    //     }
    // }
})