<template>
  <TrainChunkBox style="150px" title="各班组各号位平均成绩统计" ref="TeamgroupAveragebox">
    <div class="user-position" ref="TeamgroupAverageScores"></div>
    <div slot="title-left" v-if="!$store.isFullscreen">
      <el-button
        size="mini"
        class="self-button"
        @click="$html2Pdf('subject-evealuation')"
        >导出</el-button
      >
      <el-button
        size="mini"
        class="self-button"
        style="margin-right:10px"
        @click="$html2Pdf('subject-evealuation', true)"
        >打印</el-button
      >
      <span style="line-height:30px"
        @click="$elementFullscreen($refs.TeamgroupAveragebox, init)"
        >全屏</span
      >
    </div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from "@/views/training/training/components/train-chunk-box.vue";
import { getTeamGroupAgeScoresApi } from "@/api/training/train-evealuation";
import { Chart } from "@antv/g2";
export default {
  components: { TrainChunkBox },
  props: {
    subjectId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      baseData: null,
    };
  },
  created() {},
  methods: {
    async getBaseData() {
      const { data } = await getTeamGroupAgeScoresApi(this.subjectId);
      data.forEach((item) => {
        item.avgScore = Math.round(item.avgScore);
      });
      data.sort((now, next) => {
        return now.orgId - next.orgId;
      });
      this.baseData = data;
      // this.formatData(data)
      this.init();
    },
    init() {
      this.chart?.destroy?.();
      const chart = new Chart({
        container: this.$refs.TeamgroupAverageScores,
        autoFit: true,
      });
      chart.data(this.baseData);
      chart.coordinate().transpose().scale(1, -1);
      chart.tooltip({
        shared: true,
        showMarkers: false,
      });
      chart.scale("avgScore", {
        nice: true,
        max: 100,
      });
      chart.axis("avgScore", {
        position: "right",
      });
      chart.legend({
        position: "top",
      });
      chart
        .interval()
        .position("posName*avgScore")
        .color("orgName")
        .adjust([
          {
            type: "dodge",
            dodgeBy: "orgName",
            marginRatio: 0,
          },
        ])
        .tooltip("avgScore*orgName", (value, orgName) => ({
          value: value + "分",
          name: orgName,
        }));
      chart.interaction("active-region");

      chart.render();
      this.chart = chart;
    },
  },
  watch: {
    subjectId: {
      handler() {
        this.getBaseData();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.user-position {
  height: 100%;
  width: 100%;
  padding: 10px;
}
.title-left{
  display: flex;
  align-items: center;
}
</style>
