<template>
  <div class="chart-carousel">
    <div class="chart-carousel-title">
      <svg-icon class="titleIcon" icon-class="performance" />
      <span class="title">{{$t(`studentWeb.chartNames[${value1}]`)}}</span>
    </div>
    <Carousel
      v-model="value1"
      :autoplay="setting.autoplay"
      :dots="setting.dots"
      :radius-dot="setting.radiusDot"
      :trigger="setting.trigger"
      :arrow="setting.arrow"
    >
      <CarouselItem class="demo-carousel">
        <StudyTimeChart/>
      </CarouselItem>
      <CarouselItem class="demo-carousel">
        <SplineAreaChart/>
      </CarouselItem>
      <CarouselItem class="demo-carousel">
        <StackBarChart/>
      </CarouselItem>
      <!--CarouselItem class="demo-carousel">
        <div id="chart2">
          <apexchart type="pie" :options="chartOptions" :series="series"></apexchart>
        </div>
      </CarouselItem-->
      <CarouselItem class="demo-carousel">
        <TwoLineChart/>
      </CarouselItem>
      <CarouselItem class="demo-carousel">
        <EventPieChart/>
      </CarouselItem>
      <CarouselItem class="demo-carousel">
        <StudyHeatMap/>
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>
import StudyTimeChart from "./StudyTimeChart";
import EventPieChart from "./EventPieChart";
import TwoLineChart from "./TwoLineChart";
import StackBarChart from "./StackBarChart";
import SplineAreaChart from "./SplineAreaChart";
//import VueApexCharts from "vue-apexcharts";
import { BarChart } from "dr-vue-echarts";
import StudyHeatMap from "./StudyHeatMap";
export default {
  name: "ChartCarousel",
  components: {
    [BarChart.name]: BarChart,
    //apexchart: VueApexCharts,
    SplineAreaChart,
    StackBarChart,
    TwoLineChart,
    EventPieChart,
    StudyHeatMap,
    StudyTimeChart,
  },
  data() {
    return {
      value1: 0,
      chartNames: [
        "平均自學時間",
        "本學期每月自學時數曲線",
        "上月我與年級的活動參與數比較",
        "每日平均自學時間與全年級比較圖",
        "本月各類活動任務參與時間佔比",
        "自學活躍度",
      ],
      setting: {
        autoplay: false,
        dots: "outside",
        radiusDot: true,
        trigger: "click",
        //arrow: "always"
      },
      data: [
        {
          name: "学生人数",
          data: [
            {
              label: "2018",
              value: 45,
            },
            {
              label: "2019",
              value: 60,
            },
          ],
        },
      ],
      //VueApexCharts, BarChart
      series: [44, 55, 13],
      chartOptions: {
        chart: {
          width: 380,
          type: "pie",
        },
        labels: ["Team A", "Team B", "Team C"],
        fill: {
          colors: ["#F44336", "#E91E63", "#9C27B0"], //https://apexcharts.com/docs/colors/
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 200,
              },
              legend: {
                position: "bottom",
              },
            },
          },
        ],
      },
      //VueApexCharts, BarChart End
    };
  },
};
</script>

<style scoped>
@import '~@/assets/student-web/component_styles/home-chart.less';



</style>