<!--
 * @Author: your name
 * @Date: 2021-10-15 10:39:43
 * @LastEditTime: 2021-10-16 15:03:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/index.vue
-->
<template>
    <div class="d-container">
        <div class="bc-outter">
            <div class="bc-d1">
                <v-label-div title="品牌对比">
                    <v-btn @click="goback">返回洞察详情</v-btn>
                </v-label-div>
                <div class="bc-d1-inner">
                    <template v-for="(item,index) in brands">
                        <div class="bc-d1-item" :key="index">
                            <div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
                                <span class="s1">{{item.name}}</span>
                                <span class="s2">{{item.name}}</span>
                                <span class="s3" @click="openBrand(index)">切换品牌</span>
                            </div>
                            <img v-if="index != brands.length -1" src="../../assets/images/comm/img_vs.png" class="d1-m1">
                        </div>
                    </template>
                </div>
            </div>
            <div class="bc-d2">
                <informationTrend></informationTrend>
                <overallInformation></overallInformation>
                <overallNumberOfInteractions></overallNumberOfInteractions>
            </div>
            <brandTonalDistribution></brandTonalDistribution>
            <div class="bc-d3">
                <channelDistribution></channelDistribution>
                <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
            </div>
            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
            <overallWordCloudComparison></overallWordCloudComparison>
            <brandEventComparison></brandEventComparison>
            <div class="bc-d4">
                <v-label-div title="品牌微博对比"></v-label-div>
                <div class="bc-d4-d1">
                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
                    <weiboBigVComparison></weiboBigVComparison>
                </div>
                <weiboTuneComparison></weiboTuneComparison>
                <weiboContentDirectionComparison></weiboContentDirectionComparison>
                <div class="bc-d4-d2">
                    <userAreaDistribution></userAreaDistribution>
                    <weiboUserPortrait></weiboUserPortrait>
                </div>
            </div>
            <div class="bc-d5">
                <v-label-div title="品牌论坛对比"></v-label-div>
                <div class="bc-d5-dd1">
                    <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
                    <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
                </div>
                 <forumTonalComparison></forumTonalComparison>
                 <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
            </div>
            <div class="bc-d6">
               <v-label-div title="品牌尾翼对比"></v-label-div> 
                <div class="bc-d6-dd1">
                    <brandRearWingComparison></brandRearWingComparison>
                    <informationVolumeByChannel></informationVolumeByChannel>
                </div>
                <tailTOPMedia></tailTOPMedia>
            </div>

        </div>
        <iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
    </div>
</template>

<script>
import informationTrend from "./informationTrend";
import overallInformation from "./overallInformation";
import overallNumberOfInteractions from "./overallNumberOfInteractions";
import brandTonalDistribution from "./brandTonalDistribution";
import channelDistribution from "./channelDistribution";
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
import overallWordCloudComparison from "./overallWordCloudComparison";
import brandEventComparison from "./brandEventComparison";
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
import weiboBigVComparison from "./weiboBigVComparison";
import weiboTuneComparison from "./weiboTuneComparison";
import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
import userAreaDistribution from "./userAreaDistribution";
import weiboUserPortrait from "./weiboUserPortrait";
import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
import forumTonalComparison from "./forumTonalComparison"
import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
import brandRearWingComparison from "./brandRearWingComparison"
import informationVolumeByChannel from "./informationVolumeByChannel"
import tailTOPMedia from "./tailTOPMedia"
export default {
    name: "brandComparison",
    components: {
        informationTrend, // 信息量趋势
        overallInformation, // 整体信息量
        overallNumberOfInteractions, // 整体互动人数
        brandTonalDistribution, // 品牌调性分布
        channelDistribution, // 渠道分布
        keyMediaCommunicationComparison, // 重点媒体传播对比
        brandCommunicationTOPMedia, // 品牌传播TOP媒体
        overallWordCloudComparison, // 整体词云对比
        brandEventComparison, //品牌事件对比
        comparisonOfWeiboInformation, // 微博信息量对比
        comparisonOfTheNumberOfWeiboInteractions, // 微博互动人数对比
        weiboBigVComparison, // 微博大V对比
        weiboTuneComparison, // 微博调性对比
        weiboContentDirectionComparison, // 微博内容方向对比
        userAreaDistribution, //用户区域分布
        weiboUserPortrait, // 微博用户画像
        summaryAndComparisonOfForumInformation, // 论坛信息概括对比
        comparisonOfForumPostingTrends, // 论坛发帖趋势对比
        forumTonalComparison, // 论坛调性对比
        comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
        comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
        brandRearWingComparison, // 尾翼趋势对比
        informationVolumeByChannel, // 分渠道信息量
        tailTOPMedia
        
    },
    data() {
        return {
            brandShow: false,
            brandIndex: 0,
            brands: [
                {
                    name: "奥迪",
                },
                {
                    name: "宝马",
                },
                {
                    name: "奔驰",
                },
                {
                    name: "吉利",
                },
                {
                    name: "大众",
                },
                {
                    name: "别克",
                },
            ],
        };
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        openBrand(n) {
            this.brandShow = true;
            this.brandIndex = n;
        },
    },
};
</script>

<style lang="less" scoped>
.bc-outter {
    padding: 0px 16px 16px 16px;
}
.bc-d1 {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .bc-d1-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .bc-d1-item {
            display: inline-block;
            display: flex;
            justify-content: flex-start;
        }
        .d1-m1 {
            width: 96px;
            height: 102px;
        }
        .d1-item {
            position: relative;
            width: 228.5px;
            height: 120px;
            background-image: url("../../assets/images/BrandInsight/img_pd.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;

            .s1 {
                position: absolute;
                font-size: 14px;
                color: #b2daf8;
                top: 52px;
                left: 43px;
            }
            .s2 {
                position: absolute;
                top: 50px;
                left: 110px;
                color: #fff;
                font-size: 20px;
            }
            .s3 {
                display: block;
                position: absolute;
                top: 0px;
                right: 0px;
                width: 95px;
                height: 28px;
                background-image: url("../../assets/images/BrandInsight/img_xbut.png");
                background-repeat: no-repeat;
                background-size: cover;
                color: #4390ba;
                text-align: center;
                line-height: 28px;
                font-size: 12px;
                cursor: pointer;
            }
        }
    }
}
.bc-d2 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.bc-d3 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.bc-d4 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bc-d4-d1 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    .bc-d4-d2 {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
    }
}
.bc-d5 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bc-d5-dd1 {
        display: flex;
        justify-content: flex-start;
    }
}
.bc-d6 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bc-d6-dd1 {
        display: flex;
        justify-content: flex-start;
    }
}
</style>
