<!--
 * @Author: your name
 * @Date: 2021-11-03 11:45:09
 * @LastEditTime: 2021-11-05 18:51:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/MarketingComparison/index.vue
-->
<template>
    <div class="d-container">
       <div class="mc-outter">
          <mcChooseModel :data="getSComparison" @change="handlerChangeModel"></mcChooseModel>
          <div class="mc-d1">
              <mcOSVC></mcOSVC>
              <mcIVC></mcIVC>
          </div>
          <mcTOPMedia></mcTOPMedia>
          <mcChannelDistribution></mcChannelDistribution>
          <div class="mc-d2">
              <mcCTNF></mcCTNF>
              <salesComparison></salesComparison>
          </div>
       </div>
    </div>
</template>

<script>
import mcChooseModel from "./mcChooseModel"
import mcOSVC from "./mcOSVC"
import mcIVC from "./mcIVC"
import mcTOPMedia from "./mcTOPMedia"
import mcChannelDistribution from "./mcChannelDistribution"
import mcCTNF from "./mcCTNF"
import salesComparison from "./salesComparison"
export default {
    name: "marketingComparison",
    inject: ['reload'],
    components: {
        mcChooseModel, // 选择车型
        mcOSVC, // 整体声量对比
        mcIVC, // 互动量对比
        mcTOPMedia, // 车型传播TOP媒体
        mcChannelDistribution, // 渠道分布对比
        mcCTNF, // 论坛总量对比
        salesComparison // 销量对比
    },
    methods: {
        handlerChangeModel(arr) {
            this.setSComparison(arr);
            this.setChangeSTime(0);
            this.reload()
        }
    }
}
</script>

<style lang="less" scoped>
.mc-outter {
    padding: 0px 16px 16px 16px;
}
.mc-d1 {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.mc-d2 {
   display: flex;
   justify-content: flex-start;
   margin-top: 16px; 
}
</style>
