<template>
    <div ref="Dounutchart" style="position: relative;left: 29px;top: -5px;width: 500px;height: 300px;"></div>
</template>

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

export default {
    name: "Dounutchart",

    data() {
        return {
            chartData: {},
            currentDate: "2024-08-14",
            currentStdId: "1",
            root: null,
            chart: null
        };
    },

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

    methods: {

        // 현재 날짜의 학생 학습률 데이터 가져오기
        getStdProgressData() {
            const vm = this;
            axios.post('/dashboard/stdProgressData.json', {
                std_id: vm.currentStdId,
                current_date: vm.currentDate
            })
                .then(response => {
                    vm.chartData = response.data;
                    vm.createChart();
                })
                .catch(error => {
                    console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
                })
        },

        createChart() {
            // 차트 중복 생성 방지
            if (this.root) {
                this.root.dispose();
            }

            // Initialize root
            const root = am5.Root.new(this.$refs.Dounutchart);

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

            // Create chart
            const chart = root.container.children.push(am5percent.PieChart.new(root, {
                layout: root.verticalLayout,
                radius: am5.percent(80),
                innerRadius: am5.percent(40)  // Adjusted innerRadius for a donut chart
            }));

            if (chart.logo) {
                chart.logo.disabled = true;
            };

            // Create series
            const series = chart.series.push(am5percent.PieSeries.new(root, {
                valueField: "value",
                categoryField: "category",
                alignLabels: false
            }));

            // 색깔 설정
            series.slices.template.setAll({
                fill: am5.color(0x008000), // green for completed units
                strokeWidth: 0,
                strokeOpacity: 0
            });

            // 카테고리 별 색깔 설정
            series.slices.template.adapters.add("fill", (fill, target) => {
                if (target.dataItem.get("category") === "완료한 단원") {
                    return am5.color(0xafe589); // 초록
                } else if (target.dataItem.get("category") === "남은 단원") {
                    return am5.color(0xf7cece); // 빨강
                }
                return fill;
            });

            series.labels.template.setAll({
                textType: "circular",
                centerX: am5.p50,
                centerY: am5.p50,
                fontSize: 14
            });

            // Set data
            series.data.setAll([
                { value: this.chartData.clearUnitNum, category: "완료한 단원" },
                { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: "남은 단원" },
            ]);

            // Create legend
            // const legend = chart.children.push(am5.Legend.new(root, {
            //     centerX: am5.p50,
            //     x: am5.p50,
            //     marginTop: -100,
            // }));

            legend.data.setAll(series.dataItems);

            // Play initial series animation
            series.appear(1000, 100);

        }
    }

};
</script>

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