<template>
  <div class="study-time-chart">
    <BarChart :option="option" />

    <div class="averageTime">
      <span class="timeNum">{{AverageTime}}</span>
      {{$t('studentWeb.studyTimeChart.averageTime')}}
    </div>
  </div>
</template>

<script>
import { Random } from "mockjs";
import { BarChart } from "dr-vue-echarts";
export default {
  name: "StudyTimeChart",
  components: {
    [BarChart.name]: BarChart,
  },
  computed: {
    AverageTime: function () {
      var result = 0;
      for (var i = 0; i < 7; i++) {
        result += this.option.series[0]["data"][i]["value"];
      }
      return (result / 7).toFixed(2);
    },
  },


  data() {
    return {
      option: {
        tooltip: {
          trigger: "item",
          padding: [4, 12],
          backgroundColor: "white",
          textStyle: {
            color: "black",
            fontFamily: "Ariel",
            fontWeight: "bolder",
          },
          formatter: localStorage.getItem('lang')=='tw'? '星期{b0}: <span class="studyhrs">{c0}</span> 分鐘':'{b0}: <span class="studyhrs">{c0}</span> min',
        },
        grid: {
          top: "40%",
          left: "6%",
          right: "12%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.$t("studentWeb.studyTimeChart.xAxisData"),
          splitLine: {
            lineStyle: {
              color: "transparent",
            },
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2,
            },
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black",
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        barCategoryGap: "1px",

        emphasis: {
          itemStyle: {
            color: "#FA6400", //高亮
          },
        },
        series: [
          {
            data: [
              {
                value: Random.natural(10, 60),
                itemStyle: { color: "#00AD6C" },
              },
              {
                value: Random.natural(60, 80),
                itemStyle: { color: "#008352" },
              },
              {
                value: Random.natural(60, 80),
                itemStyle: { color: "#008352" },
              },
              {
                value: Random.natural(80, 100),
                itemStyle: { color: "rgb(0, 62, 39)" },
              },
              {
                value: Random.natural(10, 60),
                itemStyle: { color: "#00AD6C" },
              },
              {
                value: Random.natural(10, 60),
                itemStyle: { color: "#00AD6C" },
              },
              {
                value: Random.natural(0, 60),
                itemStyle: { color: "#00AD6C" },
              },
            ],
            type: "bar",
          },
        ],
      },
    };
  },
};
</script>

<style>
</style>