<template lang="html">
  <div class="content"></div>
</template>

<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

export default {
  props: {
    chartData: {
      type: Array,
      default: [],
    },
    columnX: {
      type: String,
    },
  },
  data: function () {
    return {};
  },
  methods: {
    chartCreate: function (data, columnX) {
      let chartWarp = this.$parent.$refs.chartdiv; // 차트 상위 div ref 매칭
      chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
      let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
      div.style.width = "100%"; // 차트를 담을 div의 넓이
      div.style.height = "100%"; // 차트를 담을 div의 높이
      let root = am5.Root.new(div); // 차트 하위 div에 차트(root) 담기
      chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
      this.charts = root; // 차트 정보 전역에 담기

      root._logo.dispose();

      // Set themes
      root.setThemes([am5themes_Animated.new(root)]);

      // Create chart
      var chart = root.container.children.push(
        am5xy.XYChart.new(root, {
          pinchZoomX: true,
          pinchZoomY: true,
          layout: root.verticalLayout,
        })
      );

      // Add legend
      var legend = chart.children.push(
        am5.Legend.new(root, {
          centerX: am5.p50,
          x: am5.p50,
        })
      );

      // Create axes
      var yAxis = chart.yAxes.push(
        am5xy.CategoryAxis.new(root, {
          categoryField: columnX,
          renderer: am5xy.AxisRendererY.new(root, {
            inversed: true,
            cellStartLocation: 0.1,
            cellEndLocation: 0.9,
            minorGridEnabled: true,
          }),
        })
      );
      yAxis.data.setAll(data);

      var xAxis = chart.xAxes.push(
        am5xy.ValueAxis.new(root, {
          renderer: am5xy.AxisRendererX.new(root, {
            strokeOpacity: 0,
          }),
          min: 0,
        })
      );

      function createSeries(columnY) {
        var series = chart.series.push(
          am5xy.ColumnSeries.new(root, {
            name: columnY,
            xAxis: xAxis,
            yAxis: yAxis,
            valueXField: columnY,
            categoryYField: columnX,
            tooltip: am5.Tooltip.new(root, {
              pointerOrientation: "horizontal",
              labelText: "[bold]{categoryY}[/]\n{name}: {valueX}",
            }),
          })
        );

        series.columns.template.setAll({
          height: am5.p100,
          strokeOpacity: 0,
        });

        series.data.setAll(data);
        series.appear();

        return series;
      }

      // 데이터 객체의 모든 키를 가져옵니다.
      let keyIndex = 0;
      for (let i = 0; i < data.length; i++) {
        if (keyIndex < Object.keys(data[i]).length) {
          keyIndex = i;
        }
      }
      let keys = Object.keys(data[keyIndex]);
      for (let key of keys) {
        if (key !== columnX) {
          createSeries(key);
        }
      }

      // Add legend
      var legend = chart.children.push(
        am5.Legend.new(root, {
          centerX: am5.p50,
          x: am5.p50,
        })
      );
      legend.data.setAll(chart.series.values);

      // Add cursor
      var cursor = chart.set(
        "cursor",
        am5xy.XYCursor.new(root, {
          behavior: "zoomXY",
          xAxis: xAxis,
        })
      );
      cursor.lineY.set("forceHidden", true);
      cursor.lineX.set("forceHidden", true);

      // Make stuff animate on load
      chart.appear(1000, 100);
    },
  },
  computed: {},
  watch: {
    chartData: function (newData) {
      if (newData != null && newData.length > 0) {
        this.chartCreate(newData, this.columnX);
      }
    },
  },
  //beforeCreate: function () {},
  //created: function () {},
  //beforeUpdate: function () {},
  //updated: function () {},
  mounted: function () {},
};
</script>