<template>
  <div ref="ColumnLineChart" style="width: 500px; height: 500px;"></div>
</template>

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

export default {
  name: "ColumnLineChart",

  data() {
    return {
      chartData: [],
      currentStdId: "1"
    };
  },

  mounted() {
    this.getMtrScoreData();
  },

  methods: {
    // 학생의 문제 지표 점수 데이터 가져오기
    getMtrScoreData() {
      const vm = this;
      axios.post('/dashboard/mtrScoreData.json', {
          std_id: vm.currentStdId
      })
      .then(response => {
        if (response.data) {
          // 데이터를 날짜순으로 정렬
          vm.chartData = response.data.sort(
            (a, b) => new Date(a.learnedDate) - new Date(b.learnedDate)
          );
          vm.createChart();
        } else {
          console.error("mtrScoreList가 응답 데이터에 없습니다.");
        }
      })
      .catch(error => {
          console.error('문제 지표 점수 데이터를 가져오는 중 오류 발생:', error);
      });
    },

    createChart() {
      // Initialize root
      const root = am5.Root.new(this.$refs.ColumnLineChart);

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

      // Create chart
      const chart = root.container.children.push(
        am5xy.XYChart.new(root, {
          panX: false,
          panY: false,
          wheelX: "panX",
          wheelY: "zoomX",
          paddingLeft: 0,
          layout: root.verticalLayout
        })
      );

      // Create axes
      const xRenderer = am5xy.AxisRendererX.new(root, {
        minorGridEnabled: true,
        minGridDistance: 60
      });

      const xAxis = chart.xAxes.push(
        am5xy.CategoryAxis.new(root, {
          categoryField: "learnedDate",
          renderer: xRenderer,
          tooltip: am5.Tooltip.new(root, {})
        })
      );

      xRenderer.grid.template.setAll({
        location: 1
      });

      xAxis.data.setAll(this.chartData);

      let yAxis = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
          min: 0,
          extraMax: 0.1,
          renderer: am5xy.AxisRendererY.new(root, {
            strokeOpacity: 0.1
          })
        })
      );

      // 이해 점수 막대 그래프
      let series1 = chart.series.push(
        am5xy.ColumnSeries.new(root, {
          name: "이해 점수",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "totalMtr01Score",
          categoryXField: "learnedDate",
          tooltip: am5.Tooltip.new(root, {
            pointerOrientation: "horizontal",
            labelText: "{name} in {categoryX}: {valueY}"
          })
        })
      );

      // 파스텔 블루
      series1.columns.template.setAll({
        fill: am5.color(0x87CEEB),
        stroke: am5.color(0x87CEEB),
        tooltipY: am5.percent(10),
      });

      series1.data.setAll(this.chartData);

      // 표현 점수 막대 그래프
      let series2 = chart.series.push(
        am5xy.ColumnSeries.new(root, {
          name: "표현 점수",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "totalMtr02Score",
          categoryXField: "learnedDate",
          tooltip: am5.Tooltip.new(root, {
            pointerOrientation: "horizontal",
            labelText: "{name} in {categoryX}: {valueY}"
          })
        })
      );

      // 파스텔 핑크
      series2.columns.template.setAll({
        fill: am5.color(0xFFB6C1),
        stroke: am5.color(0xFFB6C1),
        tooltipY: am5.percent(10),
      });

      series2.data.setAll(this.chartData);

      // 이해 점수 변화 꺾은선 그래프
      const lineSeries1 = chart.series.push(
        am5xy.LineSeries.new(root, {
          name: "이해 점수 변화",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "totalMtr01Score",
          categoryXField: "learnedDate",
          stroke: am5.color(0xADD8E6), // 라이트 블루로 설정
          tooltip: am5.Tooltip.new(root, {
            pointerOrientation: "horizontal",
            labelText: "{name} on {categoryX}: {valueY}"
          })
        })
      );

      lineSeries1.strokes.template.setAll({
        strokeWidth: 3,
        stroke: am5.color(0xADD8E6), // 다시 명시적 설정
      });

      lineSeries1.bullets.push(function () {
        return am5.Bullet.new(root, {
          sprite: am5.Circle.new(root, {
            radius: 5,
            fill: am5.color(0xADD8E6), // 라이트 블루로 설정
            strokeWidth: 3,
            stroke: am5.color(0xADD8E6)
          })
        });
      });

      lineSeries1.data.setAll(this.chartData);

      // 표현 점수 변화 꺾은선 그래프
      const lineSeries2 = chart.series.push(
        am5xy.LineSeries.new(root, {
          name: "표현 점수 변화",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "totalMtr02Score",
          categoryXField: "learnedDate",
          stroke: am5.color(0xFF69B4), // 핫 핑크로 설정
          tooltip: am5.Tooltip.new(root, {
            pointerOrientation: "horizontal",
            labelText: "{name} on {categoryX}: {valueY}"
          })
        })
      );

      lineSeries2.strokes.template.setAll({
        strokeWidth: 3,
        stroke: am5.color(0xFF69B4), // 다시 명시적 설정
      });

      lineSeries2.bullets.push(function () {
        return am5.Bullet.new(root, {
          sprite: am5.Circle.new(root, {
            radius: 5,
            fill: am5.color(0xFF69B4), // 핫 핑크로 설정
            strokeWidth: 3,
            stroke: am5.color(0xFF69B4)
          })
        });
      });

      lineSeries2.data.setAll(this.chartData);

      chart.set("cursor", am5xy.XYCursor.new(root, {}));

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

      chart.appear(1000, 100);
      series1.appear();
      series2.appear();
      lineSeries1.appear();
      lineSeries2.appear();
    },
  },
};
</script>

<style scoped>
/* Add necessary styles here */
</style>
