<template>
    <div class="home-view">
        <Row :gutter="30" v-if="spanCharts == false">
            <i-col :xs="0" :sm="0" :md="0" :lg="1"></i-col>
            <i-col :xs="24" :sm="24" :md="12" :lg="7">
                <!-- 行事历 -->
                <Card :bordered="true" class="calenderCard" @click.native="noData">
                    <p slot="title">
                        <svg-icon class="titleIcon" icon-class="calander" />
                        <span class="title">{{ $t("studentWeb.calenderCardTitle") }}</span>
                    </p>
                    <div>
                        <!-- <div class="title-rect" /> -->
                        <p class="title-rect-name">{{ $t("studentWeb.recentClass") }}</p>
                        <p class="classtitle">{{ $t("evaluation.noData") }}</p>
                        <!-- <p class="classtitle">{{ $t("studentWeb.defaultRecentClass") }}</p>
                        <p class="time">{{ $t("studentWeb.defaultClassTime") }}</p>
                        <p class="place">{{ $t("studentWeb.defaultClassPlace") }}</p> -->
                    </div>
                    <div class="todaydayline">
                        <div class="todaydaylinewraptitle">
                            <!-- <div class="title-rect" /> -->
                            <p class="title-rect-name">
                                {{ $t("studentWeb.todaydeadlineList") }}
                                <Icon type="ios-arrow-forward" />
                            </p>
                            <p class="classtitle">
                                {{ $t("evaluation.noData") }}
                            </p>
                        </div>
                        <div class="todaydaylineList">
                            <div class="list-block"
                                 :style="{'max-height': todaydaylineListHeight + 'px',}">
                                <li :id="`tditem${index}`"
                                    class="list-item"
                                    v-for="(item, index) in mockdata"
                                    :key="index"
                                    v-show="eventPageType.includes(item.eventType) == true && item.isDone == false && index < 8"
                                >
                                    <ul>
                                        <li class="list-item-icon">
                                            <svg-icon v-if="item.eventType == 'homework'"
                                                      icon-class="doc"/>
                                            <svg-icon v-if="item.eventType == 'preview'"
                                                      icon-class="selflearninginTime"/>
                                            <svg-icon v-if="item.eventType == 'exam'"
                                                      icon-class="test"
                                                      class="reset-testIcon"/>
                                            <svg-icon v-if="item.eventType == 'vote'"
                                                      icon-class="vote"/>
                                            <svg-icon v-if="item.eventType == 'survey'"
                                                      icon-class="quesnaire"/>
                                        </li>
                                        <li class="list-item-info">
                                            <p class="list-item-title" :class="{'list-item-titleEn': getCurrentLang() == 'en',}">
                                                <span class="list-item-typeMark">{{ item.eventType }}</span>
                                                <span>{{ item.eventName }}</span>
                                            </p>
                                            <p class="list-item-time">
                                                {{ $t( "studentWeb.endsTodayTime") }}
                                            </p>
                                        </li>
                                        <li class="list-item-unDone"></li>
                                    </ul>
                                </li>
                            </div>
                        </div>
                    </div>
                </Card>
                <br />
                <!-- 课程清单 -->
                <router-link to="/studentWeb/courseList">
                    <Card style="overflow: hidden">
                        <h3 style="color: #575757; font-weight: 700">
                            <svg-icon class="titleIcon" icon-class="course" />
                            {{ $t("studentWeb.coursesCardTitle") }}
                            <Icon type="ios-arrow-forward" />
                        </h3>
                        <p class="course-new">{{ $t("evaluation.noData") }}</p>
                        <!-- <p class="course-new">{{ $t("studentWeb.newAddCourse") }}</p> -->
                    </Card>
                </router-link>
                <br />
            </i-col>
            <i-col :xs="24" :sm="24" :md="12" :lg="8">
                <!-- 活动任务清单 -->
                <MissionListCard />
            </i-col>
            <i-col :xs="24" :sm="24" :md="12" :lg="7">
                <Card :bordered="true">
                    <div class="no-data-text">
                        <img
                            src="@/assets/icon/no_data_evaluation.png"
                            width="120"
                        />
                        <span style="margin-top: 15px; color: #808080">{{
                            $t("evaluation.noData")
                        }}</span>
                    </div>
                    <!-- <div style="position: relative">
                        <div class="spanAllchartBtn" @click="setSpanCharts()">
                            <svg-icon
                                class="spanAllchartIcon"
                                icon-class="dimensions"
                            />
                        </div>
                        <ChartCarousel />
                    </div> -->
                </Card>
                <br />
                <Card class="bar-card" @click.native="noData">
                    <h3 style="color: #575757; font-weight: 700">
                        <svg-icon class="titleIcon" icon-class="target" />
                        {{ $t("studentWeb.myProgressBar.tasksCompletionRate") }}
                    </h3>

                    <div class="myProgressBar">
                        <span class="myTestProgressNum">
                            {{ MyEventData }}
                            <span style="font-size: 20px">&nbsp;%</span>
                        </span>
                        <div
                            class="myTestProgressContent"
                            :style="{ width:MyEventData == '--' ? '0' : MyEventData + '%' }"
                            style="background: #00ad6c"
                        ></div>
                        <div class="myTestProgress"></div>
                    </div>
                </Card>
                <br />
                <Card class="bar-card" @click.native="noData">
                    <h3 style="color: #575757; font-weight: 700">
                        <svg-icon
                            class="titleIcon studyIcon"
                            icon-class="note"
                        />
                        {{ $t("studentWeb.myProgressBar.selfStudyClickRate") }}
                    </h3>
                    <div class="myProgressBar">
                        <span class="myTestProgressNum">
                            <!-- {{ 22 }} -->
                            --
                            <span style="font-size: 20px">&nbsp;%</span>
                        </span>
                        <div
                            class="myTestProgressContent"
                            :style="{ width: 0 + '%' }"
                            style="
                                background: linear-gradient(
                                    90deg,
                                    #ffa400,
                                    #fa6400
                                );
                            "
                        ></div>
                        <div class="myTestProgress"></div>
                    </div>
                </Card>
            </i-col>
        </Row>
        <Row :gutter="30" v-if="spanCharts == true">
            <i-col :xs="0" :sm="0" :md="0" :lg="1"></i-col>
            <i-col :xs="24" :sm="24" :md="24" :lg="22">
                <div class="allcharts">
                    <Row :gutter="30">
                        <div
                            class="spanAllchartBtn isOpen"
                            @click="setSpanCharts()"
                        >
                            <svg-icon
                                class="spanAllchartIconNow"
                                icon-class="dimensions"
                            />
                        </div>
                        <i-col :xs="24" :sm="24" :md="24" :lg="8">
                            <h3>{{ $t("studentWeb.chartNames[0]") }}</h3>
                            <StudyTimeChart />
                        </i-col>
                        <i-col :xs="24" :sm="24" :md="24" :lg="8">
                            <h3>{{ $t("studentWeb.chartNames[1]") }}</h3>
                            <SplineAreaChart />
                        </i-col>
                        <i-col :xs="24" :sm="24" :md="24" :lg="8">
                            <h3>{{ $t("studentWeb.chartNames[2]") }}</h3>
                            <StackBarChart />
                        </i-col>
                        <i-col :xs="24" :sm="24" :md="24" :lg="8">
                            <h3>{{ $t("studentWeb.chartNames[3]") }}</h3>
                            <TwoLineChart />
                        </i-col>
                        <i-col :xs="24" :sm="24" :md="24" :lg="8">
                            <h3>{{ $t("studentWeb.chartNames[4]") }}</h3>
                            <EventPieChart />
                        </i-col>
                        <i-col :xs="24" :sm="24" :md="24" :lg="8">
                            <h3>{{ $t("studentWeb.chartNames[5]") }}</h3>
                            <StudyHeatMap />
                        </i-col>
                    </Row>
                </div>
            </i-col>
        </Row>
        <br />
    </div>
</template>

<script>
import ChartCarousel from "./ChartCarousel/ChartCarousel";
import MissionListCard from "./MissionListCard";
import StudyTimeChart from "../HomeView/ChartCarousel/StudyTimeChart";
import EventPieChart from "../HomeView/ChartCarousel/EventPieChart";
import TwoLineChart from "../HomeView/ChartCarousel/TwoLineChart";
import StackBarChart from "../HomeView/ChartCarousel/StackBarChart";
import SplineAreaChart from "../HomeView/ChartCarousel/SplineAreaChart";
import StudyHeatMap from "../HomeView/ChartCarousel/StudyHeatMap";

export default {
    name: "HomeView",
    components: {
        ChartCarousel,
        MissionListCard,
        SplineAreaChart,
        StackBarChart,
        TwoLineChart,
        EventPieChart,
        StudyHeatMap,
        StudyTimeChart,
    },

    data() {
        return {
            eventPageType: ["preview", "exam", "homework", "vote", "survey"], //本頁出現的類型
            MyNo: "1", //接收NavBar 選定的那一頁icon標示
            MyName: "",
            mockdata: [
                {
                    eventSubject: "英文",
                    eventID: "360000198305204644",
                    eDes:
                        "眼技先准角期几要毛精且将已己拉省。制力叫了连并情权了类资格深外表量。领值术农除存给么连什通单问。",
                    eventName: "党华前置亲从性常但给",
                    teacher: "阎娟",
                    startTime: "2020.01.14",
                    endTime: "2020.02.31",
                    isDone: false,
                    isOverEndTime: true,
                    eventType: "作業",
                },
                {
                    eventSubject: "國文",
                    eventID: "420000200302184824",
                    eDes:
                        "回全导色即院给深育完东两会白任斗了利。取。之部个变型自重周间情六天确史这节族么易。",
                    eventName: "一斯在管石门",
                    teacher: "薛洋",
                    startTime: "2020.01.09",
                    endTime: "2020.02.28",
                    isDone: false,
                    isOverEndTime: true,
                    eventType: "課前預習",
                },
                {
                    eventSubject: "英文",
                    eventID: "32000020030706692X",
                    eDes:
                        "适会商你济标张或程道称育口海率。己织南系完群百相系她两意对该亲。门车个解争包看听文变声反先。",
                    eventName: "动主利全这还便划九",
                    teacher: "谭强",
                    startTime: "2020.01.06",
                    endTime: "2020.02.27",
                    allowRetryNow: true,
                    isDone: false,
                    isOverEndTime: false,
                    eventType: "問卷",
                },
            ],
            // MyEventData: parseFloat(this.$store.getters.getCountedIsDonePercent).toFixed(0),
            MyEventData: "--", // 没有数据用--表示，后面再从vuex里拿
            spanCharts: false,
            todaydaylineListHeight: 0,
        };
    },

    methods: {
        noData() {
            this.$Message.warning(this.$t("studentWeb.public.notice"))
        },
        getCurrentLang() {
            return localStorage.getItem("lang")
        },
        sentSelectedEventTitle: function (item) {
            this.$router.push("/studentWeb/eventView#" + item.eventID)
            this.$store.commit("ChangeItemName", item)
        },
        setSpanCharts() {
            this.spanCharts = !this.spanCharts
        },
    },

    created() {
        (this.MyName = this.$t("studentWeb.homeView-title")),
            this.$emit("onNavNo", this.MyNo)
        this.$emit("onNavName", this.MyName)
    },
    mounted() {
        if (document.getElementById("tditem0") != "") {
            document.getElementById("tditem0").style.display = "block"
            var item1Height = document.getElementById("tditem0").offsetHeight
            document.getElementById("tditem0").style.display = "none"
        }
        if (document.getElementById("tditem1") != "") {
            document.getElementById("tditem1").style.display = "block"
            var item2Height = document.getElementById("tditem1").offsetHeight
            document.getElementById("tditem1").style.display = "none"
        }
        this.todaydaylineListHeight = item1Height + item2Height + 20
    },
}
</script>

<style scoped>
@import "~@/assets/student-web/component_styles/home-view.css";
@keyframes born {
    from {
        width: 0;
    }

    to {
        width: MyEventData + "%";
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.no-data-text {
    width: 100%;
    padding: 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-size: 16px;
}
</style>
