<!--
 * @Author: your name
 * @Date: 2021-10-12 16:48:36
 * @LastEditTime: 2021-11-01 18:07:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandInsight/forumHotTopicDirection/index.vue
-->
<template>
    <div class="fhtd-outter" v-loading="load">
        <v-label-div title="传播媒体TOP" :eStyle="{ 'border-style': 'none' }" />
        <div class="fhtd-inner">
            <div class="d1">
                <v-ranking-fhtd :num="index + 1" :label="item.label" :val="item.val" :lineShow="index === 0 ?false : true" v-for="(item,index) in d1" :key="index" @toMedia="toKeyMedia(item)"></v-ranking-fhtd>
            </div>
            <div class="d2" style="margin-left: 16px">
                <v-ranking-fhtd :num="5 + index + 1" :label="item.label" :val="item.val" :lineShow="index === 0 ?false : true" v-for="(item,index) in d2" :key="index" @toMedia="toKeyMedia(item)"></v-ranking-fhtd>
            </div>
        </div>
    </div>
</template>

<script>
import { getWebsiteEvent } from "@/api/EventdEC";
import vRankingFhtd from "./v-ranking-fhtd";
export default {
    name: "forumHotTopicDirection",
    props: {
                id: {
                    type: String,
                    default: "",
                },
            },
    components: {
        "v-ranking-fhtd": vRankingFhtd,
    },
    data() {
        return {
            load: false,
            form: {
                token: "",
                sRele: "",
                sTimeType: 20,
            },
            d1: [],
            d2: [],
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sRele = this.id;
        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;
            let obj = Object.assign({}, this.form);
            getWebsiteEvent(obj).then((res) => {
                let data = res.data;
                let vals = [];
                for (let key in data) {
                    let obj = { label: key, val: data[key] };
                    vals.push(obj);
                };
                let arr1 = [];let arr2 = [];
                for(let i=0;i<vals.length;i++) {
                    if(i%2 == 0) {
                        arr1.push(vals[i])
                    } else {
                        arr2.push(vals[i])
                    }
                }
                this.d1 = arr1;
                this.d2 = arr2;
                this.load = false;
            });
        },
        toKeyMedia(item) {
            this.$router.push({
                path: '/keyMediaEvent',
                query: {
                    source: item.label,
                    id: this.id
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>
.fhtd-outter {
    width: 658px;
    height: 460px;
    margin-left: 16px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .fhtd-inner {
        padding: 16px 16px 16px 16px;
        height: auto;
        display: flex;
        justify-content: flex-start;
    }
}
</style>