<!--
 * @Author: xw
 * @Date: 2021-10-08 16:37:30
 * @LastEditTime: 2021-12-16 09:43:56
 * @LastEditors: Please set LastEditors
 * @Description: 传播重点阵地
 * @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue
-->
<template>
    <div class="kcp-outter" v-loading="load">
        <v-label-div title="传播重点媒体"></v-label-div>
        <div class="kcp-inner">
            <div class="d1">
                <v-ranking  v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking>
            </div>
            <div class="d1" style="margin-left: 14px">
                <v-ranking  v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="5+index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking>
            </div>
        </div>
    </div>
</template>

<script>
import { getWebsiteHome0528 } from "@/api/home";
export default {
    name: "key-communication-positions",
    data() {
        return {
            load: false,
            d1: [],
            d2: [],
        };
    },
    created() {
        this.getData();
    },
    methods: {
      // 将数组分成几份
        group(array, subGroupLength) {
            let index = 0;
            let newArray = [];
            while (index < array.length) {
                newArray.push(array.slice(index, (index += subGroupLength)));
            }
            return newArray;
        },
        // 获取数据
        getData() {
          this.load = true;
            getWebsiteHome0528(this.getCommTime).then((res) => {
                let data = res.data;
                let vals = [];
                for (let key in data) {
                    let obj = { label: key, val: data[key] };
                    vals.push(obj);
                }
                let groupedArray = this.group(vals, 5);
                this.d1 = groupedArray[0];
                this.d2 = groupedArray[1];
                this.load = false;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.kcp-outter {
    width: 460px;
    height: 316px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
}
.kcp-inner {
    display: flex;
    justify-content: flex-start;
    padding: 0 16px;
    height: calc(100% - 48px);
    overflow: hidden;
    .d1 {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}
</style>
