<!--
 * @Author: your name
 * @Date: 2021-10-19 10:22:54
 * @LastEditTime: 2021-11-08 17:46:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventComparison/wtcEc/index.vue
-->

<template>
  <div class="wtcEc-outter" v-loading="load">
    <v-label-div
      title="微博调性对比"
      :showLine="false"
      :eStyle="{ 'border-style': 'none' }"
    >
      <v-tab-group :btns="eventList" @change="handlerTab"></v-tab-group>
    </v-label-div>
    <div class="wtcEc-inner">
      <v-echarts :opt="opt"></v-echarts>
    </div>
  </div>
</template>

<script>
import { getAffectionsC } from "@/api/EventComparison/BrandWeibo.js";
import createOpt from "./opt";
export default {
  name: "wtcEc",
  data() {
    return {
      opt: {},
      form: {
        token: "",
        sRele: "",
      },
      load: false,
      colors: [
        "#54BF93",
        "#3373CC",
        "#CC9D12",
        "#f15c80",
        "#e4d354",
        "#8085e8",
        "#8d4653",
        "#91e8e1",
        "#f7a35c",
        "#90ed7d",
        "#54BF93",
        "#3373CC",
        "#CC9D12",
        "#f15c80",
        "#e4d354",
        "#8085e8",
        "#8d4653",
        "#91e8e1",
        "#f7a35c",
        "#90ed7d",
      ],
      eventList: [],
      showData: []
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.form.token = this.getToken;
      let arr = [];
      this.getEComparison.forEach((ele) => {
        arr.push(ele.events_id);
      });
      this.form.sRele = arr.toString();
      this.getData();
    },
    getData() {
      let obj = Object.assign({}, this.getCtime2, this.form);
      this.load = true;
      getAffectionsC(obj).then((res) => {
        let data = res.data || [];
        let eList = [];
        let dList = [];
        data.forEach(e => {
            let subStr = e.Name;
            if(subStr.length > 5){
                eList.push(subStr.substr(0, 4))
            } else {
                eList.push(subStr)
            }
            dList.push(this.toArr(e.Data))
        })
        this.eventList = eList;
        this.showData = dList;
        this.opt = createOpt(this.showData[0],this.colors);
        this.load = false;
      });
    },
    // 将对象变成数组
    toArr(obj) {
      let arr = [];
      for (let key in obj) {
        let o = {
          key: key,
          value: obj[key],
        };
        arr.push(o);
      }
      return arr;
    },
    //切换数据
    handlerTab(n) {
      this.opt = createOpt(this.showData[n],this.colors);
    },
  },
};
</script>

<style lang="less" scoped>
.wtcEc-outter {
  width: 472px;
  height: 412px;
  .wtcEc-inner {
    width: 100%;
    height: calc(100% - 48px);
  }
}
</style>
