<!--
 * @Author: your name
 * @Date: 2021-10-20 09:39:28
 * @LastEditTime: 2021-10-20 10:45:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDEC/mediaInterpretationED/index.vue
-->
<template>
    <div class="med-outter" v-loading="load">
        <v-label-div title="媒体解读">
        </v-label-div>
        <div class="med-inner">
            <div class="d1">
                <v-label-div title="传播途径" :showLine="false" :eStyle="{'border-style': 'none'}">
                </v-label-div>
                <div class="dd1">
                    <div class="dd1-left">
                        <v-echarts :opt="opt"></v-echarts>
                    </div>
                    <div class="dd1-right">
                        <div class="d-r-item">
                            <img class="m1" src="../../../assets/images/EventInsight/ic_cbl.png" />
                            <div class="d1">
                                <span class="ss1">最大层级</span>
                                <span class="ss2">{{ sum }}</span>
                            </div>
                        </div>
                        <div class="d-r-item">
                            <img class="m1" src="../../../assets/images/EventInsight/ic_wbfg.png" />
                            <div class="d1">
                                <span class="ss1">微博覆盖人数</span>
                                <span class="ss2">{{ volume}}</span>
                            </div>
                        </div>
                        <div class="d-r-item">
                            <img class="m1" src="../../../assets/images/EventInsight/img_ljgj.png" />
                            <div class="d1">
                                <span class="ss1">总转发人数</span>
                                <span class="ss2">{{ total }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d1">
                <v-label-div title="意见领袖" :showLine="false" :eStyle="{'border-style': 'none'}">
                </v-label-div>
                <div class="d1-inner">
                    <div class="pv-item" v-for="(item,index) in list" :key="index">
                        <div class="dm"></div>
                        <div class="d-f">
                            <div class="d1">{{item.title}}</div>
                            <div class="d2">粉丝数：<span class="d2-s1">{{item.fans}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getDiffuseZhuTi } from "@/api/EventdEC";
import createOpt from "./opt";
export default {
    name: "mediaInterpretationED",
    props: {
        id: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            opt: {},
            load: false,
            total: 0,
            sum: 0,
            volume: 0,
            form: {
                token: "",
                sRele: "",
            },

            colors: ["#FFB600", "#886CFF", "#0084FF"],
            list: [
                {
                    title: "新浪汽车",
                    fans: "1106w",
                },
                {
                    title: "易车",
                    fans: "1326w",
                },
                {
                    title: "主编说车",
                    fans: "1326w",
                },
                {
                    title: "我是评车人",
                    fans: "1326w",
                },
                {
                    title: "汽车老手",
                    fans: "1326w",
                },
                {
                    title: "艾兰汽车",
                    fans: "1326w",
                },
                {
                    title: "我是评车人",
                    fans: "1326w",
                },
                {
                    title: "汽车老手",
                    fans: "1326w",
                },
                {
                    title: "艾兰汽车",
                    fans: "1326w",
                },
            ],
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sRele = this.id;
        this.getData();
    },
    methods: {
        getData() {
            let obj = Object.assign({}, this.form);
            getDiffuseZhuTi(obj).then((res) => {
                let data = res.data;
                let getCoreDiffuseWeiBo = data.getCoreDiffuseWeiBo || [];
                let listIdName = data.listIdName || [];
                let listPid = data.listPid || [];
                let nodes = listIdName;
                let edges = listPid;
                getCoreDiffuseWeiBo.forEach((ele) => {
                    let _source = ele._source;
                    let xgmid = _source.xgmid;
                    let row = nodes.find((e) => e.id === xgmid);
                    if (row) {
                        row.value = _source.volume;
                    } else {
                        row.value = 0;
                    }
                });
                nodes.forEach((ele) => {
                    let colorSet = new Set(this.colors);
                    let curIndex = Math.round(
                        Math.random() * (colorSet.size - 1)
                    );
                    ele.color = this.colors[curIndex];
                });
                let o = { nodes, edges };
                this.opt = createOpt(o);
            });
        },
    },
};
</script>

<style lang="less" scoped>
.med-outter {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    overflow: hidden;
    .med-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .d1 {
            width: 944px;
            height: 100%;
            .d1-inner {
                width: 100%;
                height: calc(100% - 48px);
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                .pv-item {
                    width: 285px;
                    height: 72px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    position: relative;
                    margin-right: 16px;
                    margin-top: 16px;
                    .dm {
                        position: absolute;
                        width: 72px;
                        height: 72px;
                        border-radius: 72px;
                        border: 1px solid #ccc;
                        left: 0px;
                        top: 0px;
                        background-color: #fff;
                        z-index: 10;
                    }
                    .d-f {
                        position: absolute;
                        width: 249px;
                        height: 64px;
                        left: 36px;
                        padding-left: 65px;
                        background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
                        .d1 {
                            font-size: 14px;
                            color: #fff;
                            font-weight: 500;
                            margin-top: 10px;
                            height: 20px;
                        }
                        .d2 {
                            color: #70869a;
                            font-size: 12px;
                            .d2-s1 {
                                font-size: 12px;
                                font-family: Bebas;
                                color: #f49847;
                            }
                        }
                    }
                }
            }
            .dd1 {
                width: 100%;
                height: calc(100% - 48px);
                display: flex;
                justify-content: flex-start;
                .dd1-left {
                    width: 680px;
                    height: 100%;
                }
                .dd1-right {
                    .d-r-item {
                        width: 264px;
                        height: 109px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .m1 {
                            width: 72px;
                            height: 72px;
                        }
                        .d1 {
                            margin-left: 12px;
                            margin-top: 54px;
                            .ss1 {
                                display: block;
                                font-size: 16px;
                                color: #93989e;
                            }
                            .ss2 {
                                display: block;
                                font-size: 20px;
                                font-family: Bebas;
                                color: #ffffff;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
