<template>
  <div>
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="350px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
import asyncRequest from "@/apis/service/bigScreen";
// import resToken from "@/mixins/resToken";
export default {
  data() {
    return {
      options: {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "今日", "本月", "今年"],
            // ["销售一组", 20, 30, 50],
            // ["销售二组", 15, 60, 80],
            // ["销售三组", 10, 20, 100],
            // ["销售6组", 1, 30, 100],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [
          {
            type: "bar",
            label: {
              show: true,
              color: "#fff",
              position: "top",
              formatter: function (params) {
                return params.value[1] + "%";
              },
            },
            itemStyle: {
              normal: {
                color: "#1a8cd7",
              },
            },
          },
          {
            type: "bar",
            label: {
              show: true,
              color: "#fff",
              position: "top",
              formatter: function (params) {
                return params.value[2] + "%";
              },
            },
            itemStyle: {
              normal: {
                color: "skyblue",
              },
            },
          },
          {
            type: "bar",
            label: {
              show: true,
              color: "#fff",
              position: "top",
              formatter: function (params) {
                return params.value[3] + "%";
              },
            },
            itemStyle: {
              normal: {
                color: "orange",
              },
            },
          },
        ],
      },
     
      flag: false,
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    this.initHttp3();
  },
  methods: {
    async initHttp() {
      let res = await asyncRequest.datatordertransferratetoday();
      if (res.data.length <= 0) {
        for(let index = 0; index<this.options.dataset.source.length-1; index++){
          this.$set(this.options.dataset.source[index + 1], 1, 0);
        }    
        return;
      }
      if (res.code == 0) {
        //  console.log(res)
        res.data.forEach((item, index) => {
          this.$set(
            this.options.dataset.source[index + 1],
            1,
            item.transfer_rate
          );
        });
      } else {
        this.$message.error(res.message);
        return;
      }
    },
    async initHttp2() {
      let res = await asyncRequest.datatordertransferratemonth();
      if (res.data.length <= 0) {
        for(let index = 0; index<this.options.dataset.source.length-1; index++){
          this.$set(this.options.dataset.source[index + 1], 2, 0);
        }    
        return;
      }
      if (res.code == 0) {
        res.data.forEach((item, index) => {
          // this.$set(this.options.dataset.source, index+1, [item.companyName])
          this.$set(
            this.options.dataset.source[index + 1],
            2,
            item.transfer_rate
          );
        });
      } else {
        this.$message.error(res.message);
        return;
      }
    },
    async initHttp3() {
      let res = await asyncRequest.datatordertransferrateyear();
      if (res.code == 0) {
        res.data.forEach((item, index) => {
          this.$set(this.options.dataset.source, index + 1, [item.companyName]);
          this.$set(
            this.options.dataset.source[index + 1],
            3,
            item.transfer_rate
          );
        });
        await this.initHttp2();
        await this.initHttp();
      } else {
        this.$message.error(res.message);
        return;
      }
    },
  },
  watch: {
    // cdata: {
    //   handler() {
    //   },
    //   immediate: true,
    //   deep: true,
    // },
  },
};
</script>