<template>
  <div class="vote-result-chart">
    <div class="vote-num-text" v-if="this.$store.getters.getCurrentLaguage=='tw'">
      投票人數:
      <span class="vote-num">{{ sumVoteNum}} / {{sumVoteNum+28}}</span>人
    </div>
    <div class="vote-num-text" v-if="this.$store.getters.getCurrentLaguage=='en'">
      Voting Participants:
      <span class="vote-num">{{ sumVoteNum}} / {{sumVoteNum+28}}</span> students
    </div>
    <BarChart :option="option" />
    <!--div class="myChooseTag">
      <Avatar
        v-if="this.$store.getters.getItemTitle.isDone==true"
        shape="square"
        src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
      />
    </div-->
  </div>
</template>

<script>
import { Random } from "mockjs";
import { BarChart } from "dr-vue-echarts";
export default {
  name: "VoteResultChart",
  components: {
    [BarChart.name]: BarChart,
  },
  computed: {
    sumVoteNum: function () {
      let sum = 0;
      for (let i = 0; i < 5; i++) {
        sum += this.option.series[0].data[i].value;
      }
      return sum;
    },
  },
  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> 人':'Option {b0}: <span class="studyhrs">{c0}</span> students'
        },
        grid: {
          top: "15%",
          left: "6%",
          right: "12%",
          bottom: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",

          data: ["A", "B", "C", "D", "E"],
          splitLine: {
            lineStyle: {
              color: "transparent",
            },
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2,
            },
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "#575757",

            fontSize: 14,
            fontWeight: "bolder",
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        emphasis: {
          itemStyle: {
            color: "#FA6400", //高亮
          },
        },
        barCategoryGap: "1px",
        series: [
          {
            data: [
              {
                value: Random.natural(10, 60),
                itemStyle: { color: "#00AD6C" },
              },
              {
                value: Random.natural(80, 100),
                itemStyle: { color: "rgb(0, 62, 39)" },
              },
              {
                value: Random.natural(60, 80),
                itemStyle: { color: "#008352" },
              },
              {
                label: {
                  formatter: ["{Sunny|}", "{c}"].join("\n"),
                  rich: {
                    Sunny: {
                      height: 30,
                      width: 30,
                      align: "center",
                      backgroundColor: {
                        image:
                          "https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
                      },
                    },
                  },
                },

                value: Random.natural(60, 80),
                itemStyle: { color: "#FA6400" },
              },
              {
                value: Random.natural(10, 60),
                itemStyle: { color: "#00AD6C" },
              },
            ],
            type: "bar",

            label: {
              show: true,
              position: "top",
              fontSize: 20,
              fontWeight: "bolder",
              align: "center",
              lineHeight: 30,
              padding: [10, 10, -5, 10],
              textBorderWidth: 0,
            },
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.vote-result-chart {
  width: 100%;
  margin: auto;
  margin-bottom: 0px;
  padding: 15px 40px 0px 40px;
  height: 400px;
  color: rgba(0, 0, 0, 0.726);
}
.vote-num-text {
  position: absolute;
  font-weight: bolder;
  right: 20px;
  top: 20px;
}
.vote-num {
  font-size: 20px;
}
.myChooseTag {
  position: relative;
  top: -18%;
  left: 15%;
}
</style>