<!--
 * @Author: your name
 * @Date: 2021-10-19 15:57:11
 * @LastEditTime: 2021-11-26 17:41:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDEC/index.vue
-->
<template>
    <div class="d-container">
        <div class="edec-outter">
            <div class="edec-d1">
                <v-label-div title="事件详情">
                    <a-button style="margin-right: 1rem" @click="goDataList" v-has="'btn_event_datalist'">进入数据列表页</a-button>
                    <a-button style="margin-right: 1rem" @click="handlerExport" :loading="btnLoading" v-has="'btn_event_toppt'">导出报告</a-button>
                    <v-btn @click="goback">返回</v-btn>
                </v-label-div>
                <div class="edec-d1-dd1">
                    <div class="d1">{{eventObj.events_type}}</div>
                    <div class="d2">
                        <div class="s1">{{eventObj.events_title}}</div>
                        <div class="s2">{{eventObj.description}}</div>
                    </div>
                </div>
                <div class="edec-d1-dd2">
                    <div class="d1" style="margin-left: 16px">
                        <img class="m1" src="../../assets/images/EventInsight/ic_kssj.png" />
                        <span class="s1">开始时间：</span>
                        <span class="s2">{{eventObj.source_time}}</span>
                    </div>
                    <div class="d1">
                        <img class="m1" src="../../assets/images/EventInsight/ic_yxl.png" />
                        <span class="s1">影响力指数：</span>
                        <span class="s2">{{eventObj.Effect}}</span>
                    </div>
                    <div class="d1">
                        <img class="m1" src="../../assets/images/EventInsight/ic_cbl.png" />
                        <span class="s1">传播总量：</span>
                        <span class="s2">{{eventObj.events_count}}</span>
                    </div>
                </div>
            </div>
            <vue-lazy-component>
            <incidentSpreadSituation :id="events_id"></incidentSpreadSituation>
            <incidentSpreadSituationStoken slot="skeleton"></incidentSpreadSituationStoken>
            </vue-lazy-component>
            <div class="edec-d3">
                <vue-lazy-component>
                <tonalCommunicationPosture :id="events_id"></tonalCommunicationPosture>
                <tonalCommunicationPostureStoken slot="skeleton"></tonalCommunicationPostureStoken>
                </vue-lazy-component>
                <vue-lazy-component>
                <keyCommunicationPositions :id="events_id"></keyCommunicationPositions>
                <keyCommunicationPositionsStoken slot="skeleton"></keyCommunicationPositionsStoken>
                </vue-lazy-component>
            </div>
            <vue-lazy-component>
            <esprocess :id="events_id"></esprocess>
            <esprocessStoken slot="skeleton"></esprocessStoken>
            </vue-lazy-component>
            <vue-lazy-component>
            <mediaInterpretationEc :id="events_id"></mediaInterpretationEc>
            <mediaInterpretationEcStoken slot="skeleton"></mediaInterpretationEcStoken>
            </vue-lazy-component>
            <vue-lazy-component>
            <mediaInterpretationED :id="events_id"></mediaInterpretationED>
            <mediaInterpretationEDStoken slot="skeleton"></mediaInterpretationEDStoken>
            </vue-lazy-component>
            <vue-lazy-component>
            <wbUserEDE :id="events_id"></wbUserEDE>
            <wbUserEDEStoken slot="skeleton"></wbUserEDEStoken>
            </vue-lazy-component>
            <div class="edec-d2">
                <v-label-div title="尾翼分析">
                </v-label-div>
                <vue-lazy-component>
                <tailAnalysisED :id="events_id"></tailAnalysisED>
                <tailAnalysisEDStoken slot="skeleton"></tailAnalysisEDStoken>
                </vue-lazy-component>
                <div class="edec-dd1">
                    <vue-lazy-component>
                    <kmdED :id="events_id"></kmdED>
                    <kmdEDStoken slot="skeleton"></kmdEDStoken>
                    </vue-lazy-component>
                    <vue-lazy-component>
                    <pnwcWord :id="events_id"></pnwcWord>
                    <pnwcWordStoken slot="skeleton"></pnwcWordStoken>
                    </vue-lazy-component>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import incidentSpreadSituation from "./incidentSpreadSituation";
import tonalCommunicationPosture from "./tonalCommunicationPosture";
import keyCommunicationPositions from "./keyCommunicationPositions";
import esprocess from "./esprocess";
import mediaInterpretationEc from "./mediaInterpretationEc";
import mediaInterpretationED from "./mediaInterpretationED";
import wbUserEDE from "./wbUserEDE";
import tailAnalysisED from "./tailAnalysisED";
import kmdED from "./kmdED"
import pnwcWord from "./pnwcWord"
//骨架屏
import incidentSpreadSituationStoken from "./incidentSpreadSituationStoken";
import tonalCommunicationPostureStoken from "./tonalCommunicationPostureStoken";
import keyCommunicationPositionsStoken from "./keyCommunicationPositionsStoken";
import esprocessStoken from "./esprocessStoken";
import mediaInterpretationEcStoken from "./mediaInterpretationEcStoken";
import mediaInterpretationEDStoken from "./mediaInterpretationEDStoken";
import wbUserEDEStoken from "./wbUserEDEStoken";
import tailAnalysisEDStoken from "./tailAnalysisEDStoken";
import kmdEDStoken from "./kmdEDStoken"
import pnwcWordStoken from "./pnwcWordStoken"
import {getEventData} from '@/api/EventdEC'
import { getToPptTask } from "@/api/BrandInsight";
export default {
    name: "eventDEC",
    components: {
        incidentSpreadSituation, // 事件传播态势
        tonalCommunicationPosture, // 调性传播态势
        keyCommunicationPositions, // 重点传播阵地
        esprocess, // 事件传播历程
        mediaInterpretationEc, // 事件传播历程-媒体解读
        mediaInterpretationED, // 媒体解读
        wbUserEDE, // 微博用户画像
        tailAnalysisED, // 尾翼分析
        kmdED, // 重点媒体分布
        pnwcWord, // 正负词云
        //骨架屏
        incidentSpreadSituationStoken, // 事件传播态势
        tonalCommunicationPostureStoken, // 调性传播态势
        keyCommunicationPositionsStoken, // 重点传播阵地
        esprocessStoken, // 事件传播历程
        mediaInterpretationEcStoken, // 事件传播历程-媒体解读
        mediaInterpretationEDStoken, // 媒体解读
        wbUserEDEStoken, // 微博用户画像
        tailAnalysisEDStoken, // 尾翼分析
        kmdEDStoken, // 重点媒体分布
        pnwcWordStoken // 正负词云
    },
    data() {
        return {
            gValue: 0,
            total: 0,
            Time: "",
            events_id: "",
            btnLoading: false,
            eventObj: {
                events_type: "",
                events_title: "",
                description: "",
                source_time: "",
                events_count: 0,
                Effect: ""
            },
            form: {
                sRele: "",
                token: "",
            }
        }
    },
    created() {
        this.form.token = this.getToken;
        this.events_id = this.$route.query.events_id || "";
        this.form.sRele = this.events_id;
        this.getDdta();
    },
    methods: {
        getDdta(){
             let obj = Object.assign({},this.form);
             this.load = true;
             getEventData(obj).then(res => {
                let data = res.data || [];
                this.eventObj = {...data[0]._source};
                this.load = false;
            })
        },
        goback() {
            this.$router.go(-1);
        },
        goDataList() {
            this.$router.push({path: '/industryDataExport',query: {token: this.getToken, events_id: this.events_id, sType: 'HotEvent', action: 'getList', title: '事件-行业数据'}})
        },
        handlerExport() {
           this.btnLoading = true;
            let obj = Object.assign({}, this.getCtime2, {
                token: this.getToken,
                sRele: this.events_id,
                sType: 'ToEventPptV6'
            });
            getToPptTask(obj).then(() => {
                this.$notification.open({
                    message: `数据生成中`,
                    description: '请前往个人中心查看下载进度',
                    placement: 'bottomRight',
                });
                this.btnLoading = false;
            }) 
        }
    },
};
</script>
<style lang="less" scoped>
.edec-outter {
    padding: 0px 16px 16px 16px;
}
.edec-d1 {
    width: 100%;
    height: 245px;
    border: 2px solid #0f2a4d;
    overflow: hidden;
    .edec-d1-dd1 {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        .d1 {
            width: 120px;
            height: 120px;
            background-image: url("../../assets/images/EventInsight/img_xlq.png");
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: 16px;
            margin-top: 16px;
            line-height: 120px;
            text-align: center;
            color: #006dff;
        }
        .d2 {
            width: 1714px;
            margin-left: 16px;
            .s1 {
                font-size: 20px;
                color: #fff;
                margin-top: 36px;
            }
            .s2 {
                width: 100%;
                color: #828990;
                font-size: 14px;
                margin-top: 6px;
                height: 40px;
                word-break: break-all;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
    .edec-d1-dd2 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .d1 {
            width: 400px;
            margin-top: 10px;
            .m1 {
                width: 44px;
                height: 44px;
            }
            .s1 {
                display: inline-block;
                font-size: 12px;
                color: #878887;
                margin-left: 4px;
            }
            .s2 {
                display: inline-block;
                font-size: 12px;
                font-family: Bebas;
                color: #ffffff;
            }
        }
    }
}
.edec-d2 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .edec-dd1 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
}
.edec-d3 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
</style>