<!--
 * @Author: your name
 * @Date: 2021-10-16 10:49:09
 * @LastEditTime: 2021-10-16 13:55:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
-->
<template>
  <div class="wtc-outter">
    <v-label-div
      title="论坛调性对比"
      :showLine="false"
      :eStyle="{ 'border-style': 'none' }"
    >
    </v-label-div>
    <div class="wtc-d1">
      <div class="dd1" style="margin-left: 16px">
        <span class="s1"></span><span class="s2">正面</span>
      </div>
      <div class="dd1" style="margin-left: 24px">
        <span class="s1" :style="{ background: '#54BF93' }"></span
        ><span class="s2">中性</span>
      </div>
      <div class="dd1" style="margin-left: 24px">
        <span class="s1" :style="{ background: '#CC9D12' }"></span
        ><span class="s2">负面</span>
      </div>
    </div>
    <div class="wtc-inner">
      <roundata
        v-for="(item,index) in dataSource"
        :key="index"
        :title="item.Name"
        :color="colors[index]"
        :style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
        :data="item.Data"
      ></roundata>
    </div>
  </div>
</template>

<script>
import { getAffectionsC } from "@/api/BrandComparison/BbsBrand.js";
import roundata from "./roundata";
export default {
  name: "forumTonalComparison",
  components: {
    roundata,
  },
  data() {
    return {
      form: {
        token: "",
        sBrand: "",
      },
      colors: [
        "#3373CC",
        "#63AECC",
        "#54BF93",
        "#CC9D12",
        "#CC7733",
        "#CC5B41",
      ],
      dataSource: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.form.token = this.getToken;
      let arr = this.getBComparison;
      let brands = [];
      arr.forEach((ele) => {
        brands.push(ele.name);
      });
      this.form.sBrand = brands.toString();
      this.getData();
    },
    getData() {
      return new Promise((resolve, reject) => {
        let obj = Object.assign({}, this.getCtime2, this.form);
        getAffectionsC(obj)
          .then((res) => {
            let data = res.data || [];
            this.dataSource = data;
            resolve(data);
          })
          .catch(() => {
            reject(false);
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wtc-outter {
  width: 100%;
  height: 460px;
  margin-top: 16px;
  .wtc-d1 {
    width: 100%;
    display: flex;
    height: 36px;
    justify-content: flex-start;
    align-items: center;
    .dd1 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .s1 {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #3373cc;
    }
    .s2 {
      display: inline-block;
      font-size: 12px;
      color: #fff;
      margin-left: 10px;
    }
  }
  .wtc-inner {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
