<!--
 * @Author: your name
 * @Date: 2021-10-20 09:39:28
 * @LastEditTime: 2021-11-17 16:20:52
 * @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">{{ countObj.total }}</span>total
                            </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">{{ countObj.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">{{ countObj.sum }}</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">
                            <img class="mm1" :src="item._source.profileimgurl" width="100%" height="100%" v-if="item._source.profileimgurl">
                        </div> -->
                        <div class="d-f">
                            <div class="d1">{{item._source.user_author}}</div>
                            <div class="d2">粉丝数：<span class="d2-s1">{{bigNumberTransform(item._source.weibofans)}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getDiffuseZhuTi } from "@/api/EventdEC";
import createOpt from "./opt";
import {bigNumberTransform} from "@/utils/gol/dataTool"
export default {
    name: "mediaInterpretationED",
    props: {
        id: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            bigNumberTransform: bigNumberTransform,
            opt: {},
            load: false,
            total: 0,
            sum: 0,
            volume: 0,
            form: {
                token: "",
                sRele: "",
            },
            countObj: {
                volume: 0,
                total: 0,
                sum: 0,
            },
            colors: [
                "#FFB600",
                "#886CFF",
                "#0084FF",
                "#4CB690",
                "#58B458",
                "#6C6C6C",
                "#F56161",
                "#FC754C",
                "#5F5EEC",
            ],
            list: [],
        };
    },
    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) => {
                this.load = true;
                let data = res.data;
                this.countObj.sum = data.sum;
                this.countObj.volume = data.volume;
                this.countObj.total = data.total;
                let getCoreDiffuseWeiBo = data.getCoreDiffuseWeiBo || [];
                this.list = 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 || "";
                    nodes.forEach(e => {
                        if(e.id === xgmid) {
                            e.value = _source.volume
                        } else {
                            e.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);
                this.load = false;
            });
        },
    },
};
</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);
                margin-left: 16px;
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                .pv-item {
                    width: 285px;
                    height: 64px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    position: relative;
                    margin-right: 24px;
                    margin-top: 12px;
                    .dm {
                        position: absolute;
                        width: 68px;
                        height: 68px;
                        border-radius: 68px;
                        border: 1px solid #ccc;
                        left: 0px;
                        top: 0px;
                        background-color: #fff;
                        z-index: 10;
                        .mm1 {
                            width: 100%;
                            height: 100%;
                            border-radius: 74px;
                        }
                    }
                    .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>
