<!--
 * @Author: your name
 * @Date: 2021-10-15 13:27:50
 * @LastEditTime: 2021-10-15 14:30:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
-->
<template>
  <div class="bd-outter">
    <v-label-div title="品牌调性分布"> </v-label-div>
    <div class="bd-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="bd-inner">
      <roundata
        v-for="(item,index) in list"
        :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";
import roundata from "./roundata";
export default {
  name: "brandTonalDistribution",
  components: {
    roundata,
  },
  data() {
    return {
      form: {
        token: "",
        sBrand: "",
      },
      colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
      list: [

      ]
    };
  },
  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.list = data;
          resolve(data)
        }).catch(() => {
            reject(false)
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.bd-outter {
  width: 100%;
  height: 460px;
  border: 2px solid #0f2a4d;
  margin-top: 16px;
  .bd-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;
    }
  }
  .bd-inner {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>