<template>
  <div class="score-bar-chart">
    <h4>{{$t('studentWeb.exam.chart.scoreDistribution')}}</h4>
    <div class="attendance">
      {{$t('studentWeb.exam.chart.participant')}}
      <span class="timeNum">{{Attendance}}</span>
      / {{parseInt(Attendance) +2}}   {{$t('studentWeb.exam.chart.student')}}
    </div>
    <BarChart :option="option" />
    <div>
    </div>
    <img class="avatar"  src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
  </div>
</template>

<script>

import { BarChart } from "dr-vue-echarts";
import { Random } from "mockjs";
export default {
  name: "ScoreBarChart",
  components: {
    [BarChart.name]: BarChart
  },

  computed: {
    Attendance: function() {
      var result = 0;
      for (var i = 0; i < 7; i++) {
        result += this.option.series[0]["data"][i]["value"];
      }
      return result.toFixed(0);
    }
  },
 
  data() {
    return {
      option: {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "item",
          padding: [4, 12],
          backgroundColor: "white",
          textStyle: {
            color: "black",
            fontFamily: "Ariel",
            fontWeight: "bolder"
          },
          formatter: localStorage.getItem('lang')=='tw'?'PR前{b0}%: <span class="studyhrs">{c0}</span>人':'PR {b0}%: <span class="studyhrs">{c0} </span> students'
        },
        grid: {
          top: "20%",
          left: "6%",
          right: "12%",
          bottom: "18%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["0-59", "60", "70", "80", "90", "100"],
          splitLine: {
            lineStyle: {
              color: "transparent"
            }
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          }
        },
        yAxis: {
          type: "value",
          show: true,
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "transparent"
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          }
        },
        emphasis: {
          itemStyle: {
            color: "#FA6400" //高亮
          }
        },
        barCategoryGap: "1px",
        series: [
          {
            data: [
              {
                value: 0,
                itemStyle: { color: "#00AD6C" }
              },
              {
                value: 0,
                itemStyle: { color: "#008352" }
              },
              {
                value:0,
                itemStyle: { color: "#008352" }
              },
              {
                value: 0,
                itemStyle: { color: "rgb(0, 62, 39)" }
              },
              {
                value: 0,
                itemStyle: { color: "#00AD6C" }
              },
              {
                value:0,
                itemStyle: { color: "#00AD6C" }
              },
              {
                value:0,
                itemStyle: { color: "#00AD6C" }
              }
            ],
            type: "bar"
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.score-bar-chart {
  width: 100%;
  margin: auto;
  margin-bottom: 50px;
  padding: 15px 40px 0px 40px;
  height: 420px;
  color: rgba(0, 0, 0, 0.726);
}
.attendance {
  position: relative;
  top: 20px;
  margin-top: -20px;
  text-align: right;
  padding-left: 12%;
}
.avatar{
    width:32px;
    height: 32px;
    position: relative;
    top:-60px;
    left:26.5%;
}
</style>