<!--
 * @Author: your name
 * @Date: 2021-10-14 09:00:09
 * @LastEditTime: 2021-10-16 15:54:30
 * @LastEditors: Please set LastEditors
 * @Description: 微博详情
 * @FilePath: /data-show/src/views/WeiboDetails/index.vue
-->
<template>
  <div class="d-container">
    <div class="wd-outter">
      <div class="wd-d1">
        <v-label-div title="详情数据">
          <v-tab-group-control v-if="form.sSource == '懂车帝'"
            :btns="['全部', '车友圈']"
            :active="getCarCircle"
            @change="handlerTab" style="margin-right: 24px"
          ></v-tab-group-control>
          <v-tab-group-control v-if="form.sSource == '汽车之家'"
            :btns="['全部', '论坛']"
            :active="getCarCircle"
            @change="handlerTab" style="margin-right: 24px"
          ></v-tab-group-control>
          <v-btn @click="goback">返回首页</v-btn>
        </v-label-div>
        <div class="wd-d1-bd">
          <div class="d1"> {{ form.sSource }} </div>
          <div class="d2" style="margin-left: 114px">
            <img class="dd1" src="../../assets/images/BrandInsight/ic_xxzl.png" />
            <div class="dd2">
              <span class="s1">{{ total }}</span>
              <span class="s2">信息总量</span>
            </div>
          </div>
          <div class="d2">
            <img class="dd1" src="../../assets/images/BrandInsight/ic_dvsl.png" />
            <div class="dd2">
              <span class="s1">{{ totalRep }}</span>
              <span class="s2">互动人数</span>
            </div>
          </div>
          <!-- <div class="d2">
            <img class="dd1" src="../../assets/images/BrandInsight/ic_yhs.png" />
            <div class="dd2">
              <span class="s1">{{ countObj.userCount }}</span>
              <span class="s2">参与用户数</span>
            </div>
          </div> -->
          <div class="d2">
            <img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
            <a-popover title="舆情调性">
              <template slot="content">
                <template v-for="(item, key) in countObj2">
                  <div class="pd-item" :key="key">
                    <span >{{key}}</span>
                    <span>{{item}}</span>
                  </div>
                </template>
              </template>
              <div class="dd3">
                <span class="s3" :style="{ width: (countObj2['正面'] / total) * width + 'px' }" ></span>
                <span class="s3" :style="{ width: (countObj2['中性'] / total) * width + 'px', background: '#54BF93',}"></span>
                <span class="s3" :style="{ width: (countObj2['负面'] / total) * width + 'px', background: '#CC9D12',}"></span>
              </div>
            </a-popover>
          </div>
        </div>
      </div>
      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
        <vue-lazy-component>
        <weibo-communication-trend-long></weibo-communication-trend-long>
        <weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
        </vue-lazy-component>
      </div>
      <div class="wd-d2" v-else>
        <vue-lazy-component>
        <weibo-communication-trend></weibo-communication-trend>
        <weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
        </vue-lazy-component>
        <vue-lazy-component>
        <weiboContentTOPVolume></weiboContentTOPVolume>
        <weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
        </vue-lazy-component>
      </div>
      <div class="wd-d3">
        <!-- <subscribeSeries></subscribeSeries> -->
        <spreadTOPbrands></spreadTOPbrands>
        <spreadTOPmodels></spreadTOPmodels>
      </div>
      <div class="wd-d4">
        <vue-lazy-component>
        <weiboContentType></weiboContentType>
        <weiboContentTypeStoken slot="skeleton"></weiboContentTypeStoken>
        </vue-lazy-component>
        <vue-lazy-component>
        <weiboCharacters></weiboCharacters>
        <weiboCharactersStoken slot="skeleton"></weiboCharactersStoken>
        </vue-lazy-component>
        <vue-lazy-component>
        <weiboWordCloud></weiboWordCloud>
        <weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
        </vue-lazy-component>
      </div>
      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家')">
        <weiboUserActiveArea></weiboUserActiveArea>
        <weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
        </vue-lazy-component>
        <popularEventsList v-if="form.sSource == '懂车帝' && getCarCircle == 1"></popularEventsList>
        <vue-lazy-component>
        <weiboContentTOPVolume></weiboContentTOPVolume>
        <weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
        </vue-lazy-component>
      </div>
    </div>
  </div>
</template>

<script>
import weiboCommunicationTrend from "./weiboCommunicationTrend";
import weiboCommunicationTrendLong from "./weiboCommunicationTrendLong";
import weiboContentType from "./weiboContentType";
import weiboCharacters from "./weiboCharacters";
import weiboUserActiveArea from "./weiboUserActiveArea";
import weiboContentTOPVolume from "./weiboContentTOPVolume";
import weiboWordCloud from "./weiboWordCloud";
import spreadTOPmodels from "./spreadTOPmodels";
import spreadTOPbrands from "./spreadTOPbrands"
import subscribeSeries from "./subscribeSeries";
import popularEventsList from "./popularEventsList";
//骨架屏
import weiboCommunicationTrendStoken from "./weiboCommunicationTrendStoken";
import weiboCommunicationTrendLongStoken from "./weiboCommunicationTrendLongStoken";
import weiboContentTypeStoken from "./weiboContentTypeStoken";
import weiboCharactersStoken from "./weiboCharactersStoken";
import weiboUserActiveAreaStoken from "./weiboUserActiveAreaStoken";
import weiboContentTOPVolumeStoken from "./weiboContentTOPVolumeStoken";
import weiboWordCloudStoken from "./weiboWordCloudStoken";
import {getHomeCountAndaffections} from "@/api/KeyMediaHome/index.js"
export default {
  name: "WeiboDetails",
  inject: ['reload'],
  components: {
    weiboCommunicationTrend, // 微博传播趋势
    weiboCommunicationTrendLong,
    weiboContentType, // 微博内容类型
    weiboCharacters, // 微博人物画像
    weiboUserActiveArea, // 微博用户活跃地区
    weiboContentTOPVolume, // 微博内容TOP声量
    weiboWordCloud, // 词云分布
    spreadTOPmodels, // 传播TOP车型
    subscribeSeries, // 关注TOP车型
    spreadTOPbrands, // 关注top品牌
    popularEventsList, //数据列表
    //骨架屏
    weiboCommunicationTrendStoken, // 微博传播趋势
    weiboCommunicationTrendLongStoken,
    weiboContentTypeStoken, // 微博内容类型
    weiboCharactersStoken, // 微博人物画像
    weiboUserActiveAreaStoken, // 微博用户活跃地区
    weiboContentTOPVolumeStoken, // 微博内容TOP声量
    weiboWordCloudStoken, // 词云分布
  },
  data() {
    return {
      width: 200,
      form: {
        sSource: '',
        ilimitType: 0,
      },
      countObj: {
        carseriesCount: 0,
        count: 0,
        userCount: 0,
        vCount: 0,
      },
      countObj2: {
        正面: 0,
        中性: 0,
        负面: 0,
      },
      total: 0,
      totalRep: 0,
    };
  },
  created() {
    this.form.sSource = this.$route.query.source || "抖音";
    if(this.form.sSource == '汽车之家' && this.getCarCircle == 1) {
      this.form.ilimitType = 1;
    } else if (this.form.sSource == '懂车帝' && this.getCarCircle == 1) {
      this.form.ilimitType = 2;
    }
    this.getData();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    getData() {
      let obj = Object.assign({}, this.getCtime2, this.form);
      // getBrandWeiBoCount0528(obj).then((res) => {
      //   let data = res.data;
      //   this.countObj = Object.assign(this.countObj, data);
      // });
      getHomeCountAndaffections(obj).then(res => {
        let data = res.data.Affections || {};
        this.total = res.data.Count;
        this.totalRep = res.data.ReplyCount;
        this.countObj2 = {
          正面: data[0].Value,
          中性: data[1].Value,
          负面: data[2].Value,
        }
      })
    },
    handlerTab(val) {
      this.setCarCircle(val);
      this.reload();
    }
  },
};
</script>

<style lang="less" scoped>
.wd-outter {
  padding: 0px 16px 16px 16px;
}
.wd-d1 {
  width: 100%;
  height: 222px;
  border: 2px solid #0f2a4d;
  .wd-d1-bd {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .d1 {
      width: 150px;
      height: 150px;
      background-image: url("../../assets/images/BrandInsight/img_lq.png");
      background-repeat: no-repeat;
      background-size: cover;
      margin-left: 114px;
      text-align: center;
      line-height: 150px;
      font-size: 24px;
      color: #b2daf7;
    }
    .d2 {
      width: 378px;
      height: 82px;
      display: flex;
      justify-content: flex-start;
      .dd1 {
        width: 80px;
        height: 80px;
      }
      .dd2 {
        margin-left: 20px;
        height: 100%;
        .s1 {
          display: block;
          font-size: 34px;
          font-family: Bebas;
          color: #ffffff;
        }
        .s2 {
          display: block;
          font-size: 20px;
          color: #8f969c;
        }
      }
      .dd3 {
        margin-left: 20px;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .s3 {
          width: 87px;
          height: 33px;
          display: inline-block;
          margin-right: 2px;
          background: #3373cc;
        }
      }
    }
  }
}
.wd-d2 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
.wd-d3 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
.wd-d4 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
.wd-d5 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
.pd-item {
    display: flex;
    justify-content: space-between;
    color: #fff;
    border-bottom: 1px solid #173b6d;
    padding: 10px;
}
</style>
