<!--
    filename: Bipv.vue
    author: liubin
    date: 2024-04-10 15:39:54
    description:
-->

<template>
  <right-chart-base
    :legend="legend"
    :series="series"
    :xAxis="xAxis"
    :vHeight="20.5"
    class="std-chart"
  />
</template>

<script>
import RightChartBase from "./RightChartBase.vue";

export default {
  name: "StdChart",
  components: { RightChartBase },

  data() {
    const year = new Date().getFullYear();
    // 城市数组的顺序必须是固定的
    const cities = ["瑞昌", "邯郸",
      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
    ];
    return {
      legend: [
        { label: `${year}年目标值`, color: "#f3c000" },
        { label: `${year - 1}年`, color: "#12f7f1" },
        { label: `${year}年`, color: "#58adfa" },
      ],
      xAxis: cities,
    };
  },
  computed: {
    series() {
      const stdOutput = this.$store.getters.home.stdOutput;

      if (!stdOutput || !stdOutput.current || !stdOutput.previous) {
        return [
          {
            name: "样例数据--2024年目标值",
            data: Array.from({ length: 7 }, () =>
              Math.floor(Math.random() * 1000)
            ),
          },
          {
            name: "样例数据--2023年",
            data: Array.from({ length: 7 }, () =>
              Math.floor(Math.random() * 1000)
            ),
          },
          {
            name: "样例数据--2024年",
            data: Array.from({ length: 7 }, () =>
              Math.floor(Math.random() * 1000)
            ),
          },
        ];
      }

      return [
        {
          name: `${new Date().getFullYear()}年目标值`,
          data: stdOutput.target,
        },
        {
          name: `${new Date().getFullYear() - 1}年`,
          data: stdOutput.previous,
        },
        {
          name: `${new Date().getFullYear()}年`,
          data: stdOutput.current,
        },
      ];
    },
  },
};
</script>

<style scoped lang="scss"></style>
