<template>
    <div>
        <!-- <Side_t></Side_t> -->
        <div style="padding: 15px 60px 120px 60px ">
            <div class="flex justify-between align-center">
                <div class="logo mb25"><img src="../../../resources/img/logo2.png" alt=""></div>
                <Header></Header>
            </div>
            <div class="main-wrap flex justify-between">
                <div class="gd-2">
                    <div class=" mb30">
                        <div>
                            <img src="../../../resources/img/img16_s.png" alt="">
                            <div class="mt10" style="width: 100%;">
                                <p class="name mb10">학생이름</p>
                                <p class="mb5">xx중학교 3학년 x반</p>
                                <progress-bar :progress="progress"></progress-bar>
                                <span @click="increaseProgress">오늘의 공부</span>
                                <span class="brown ml10">{{ progress }}%</span>
                            </div>
                        </div>
                        <hr>
                        <p class="title2 mb25">최근 학습 히스토리</p>
                        <ul class="flex justify-between ml30">
                            <li>자학사 3학년 2학기</li>
                            <li>자학사 3학년 2학기</li>
                        </ul>

                        <hr>
                        <div class="title-box flex justify-between mb20">
                            <p class="name">가나다학생 랭킹</p>
                        </div>
                        <div class="mypage mb30">
                            <div class=" flex-column " style="gap: 20px;">
                                <div class="textbook book-red">
                                    <div class="text ">
                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
                                    </div>
                                    <div class="box">
                                        <P class="title2 mt10">현재 30명 중 <em class="red">2등</em>입니다.</P>
                                    </div>
                                </div>
                                <div class="textbook ">
                                    <div class="text ">
                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
                                    </div>
                                    <div class="box">
                                        <P class="title2 mt10">현재 30명 중 <em class="yellow">2등</em>입니다.</P>
                                    </div>
                                </div>
                                <div class="textbook book-blue">
                                    <div class="text ">
                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
                                    </div>
                                    <div class="box">
                                        <P class="title2 mt10">현재 30명 중 <em class="blue">2등</em>입니다.</P>
                                    </div>
                                </div>
                                <div class="textbook book-navy">
                                    <div class="text ">
                                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
                                    </div>
                                    <div class="box">
                                        <P class="title2 mt10">현재 30명 중 <em class="navy">2등</em>입니다.</P>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div>
                            <div class="title-box flex justify-between mb20">
                                <p class="title">사진첩</p>
                            </div>
                            <div class="photobook">
                                <div class="flex justify-between">
                                    <div class="box" style="gap: 5px;">
                                        <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
                                    </div>
                                    <div class="text mt10">
                                        <p class="title1 mb10">나의 사진첩</p>
                                        <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button"
                                            title="글쓰기" class="new-btn">
                                            바로가기
                                        </button>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="gd-9">
                    <div class="title-box flex justify-between mb40">
                        <p class="title">전체 진행률</p>
                    </div>
                    <div class="flex">
                        <div class="wrap">
                            <p class="name">학습 현황</p>
                            <div><Dounutchart/></div>
                            <div class="textbox">
                                <p class="title2">오늘의 학습현황</p>
                                <!-- 안전하게 진도율을 소수점 한자리 수까지 표시 -->
                                <p class="name"> 
                                    {{ donutChartData.clearUnitNum && donutChartData.totalScheduleUnitNum 
                                        ? (donutChartData.clearUnitNum / donutChartData.totalScheduleUnitNum * 100).toFixed(1) 
                                        : 0 }} %
                                </p>
                            </div>
                            <p class="title2">학습시간</p>
                            <p class="name">학습시간 n시간</p>
                        </div>
                        <div class="wrap">
                            <p class="name">이해/표현 점수</p>
                            <div>
                                <ColumnLineChart/>
                            </div>
                        </div>
                    </div>
                    <div class="wrap">
                        <p class="name">교재별 진행률</p>
                        <div>
                            <StackedBarChart />
                        </div>
                    </div>
                    <div class="flex">
                        <div class="wrap">
                            <p class="name">오늘의 학습 일정</p>
                            <div class="flex-column" style="gap: 20px;">
                                <div class=" flex justify-between align-center " style="gap: 70px;">
                                    <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
                                    <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }"
                                        @click="toggleClicked" style="width: 100%;">
                                        <div class="text-lf flex justify-between align-center ">
                                            <div>
                                                <div class="flex align-center mb10" style="gap: 10px;">
                                                    <p class="title2"><em class="gray-bd">1교시</em></p>
                                                    <p class="title1">9:00</p>
                                                    <p class="title1">~</p>
                                                    <p class="title1">10:00</p>
                                                </div>
                                                <div class="title-box  mb10"> <span class="title">the best</span></div>
                                                <p class="title2">wirte a</p>
                                            </div>
                                            <div class=""> <img src="../../../resources/img/img214_19s.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="flex-column">
                            <div class="wrap">
                                <p class="name">교재별 오답률</p>
                                <Barchart />
                            </div>

                            <div class="wrap">
                                <p class="name">LC/RC 세부 점수</p>
                                <Bubblechart />
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import Header from '../../layout/Header.vue';
import Menu from '../../layout/Menu.vue';
import Side_t from '../../layout/Side_t.vue';
import ProgressBar from '../../component/ProgressBar.vue';
import StackedBarChart from './StackedBarChart.vue';
import Barchart from './Barchart.vue';
import Bubblechart from './Bubblechart.vue';
import Dounutchart from './Dounutchart.vue';
import ColumnLineChart from './ColumnLineChart.vue';
import axios from "axios";

export default {

    data() {
        return {
            progress: 20,
            donutChartData: {},
            currentDate: "2024-08-14",
            currentStdId: "1"
        }
    },

    methods: {

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

    },

    watch: {

    },

    computed: {

    },

    components: {
        Header: Header,
        Menu: Menu,
        // Footer:Footer,
        Side_t: Side_t,
        ProgressBar,
        StackedBarChart: StackedBarChart,
        Barchart: Barchart,
        Bubblechart: Bubblechart,
        Dounutchart: Dounutchart,
        ColumnLineChart: ColumnLineChart,

    },

    mounted() {
        this.getStdProgressData();
    }

}
</script>

<style scoped>
.main-wrap {
    margin-top: 20px;
    position: static;
    width: 100%;
    height: 100%;
}
</style>