<template>
  <TrainChunkBox
    style="150px"
    :title="baseData[0].posName + '操作步骤操作统计'"
    ref="PositionStepOperation"
  >
   <template v-slot:title-left
      ><span v-if="!$store.isFullscreen"
        @click="$elementFullscreen($refs.PositionStepOperation, init)"
        >全屏</span
      >
      </template
    >
    <div class="position-team" ref="position-team"></div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from "@/views/training/training/components/train-chunk-box.vue";
import { getTeamGroupDurationApi } from "@/api/training/train-evealuation";
import { Chart } from "@antv/g2";
export default {
  components: { TrainChunkBox },
  props: {
    baseData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    async getBaseData() {
      const { data } = await getTeamGroupDurationApi(this.subjectId);
      data.forEach((item) => {
        item.avgDur = +(+item.avgDur / 1000).toFixed(2);
      });
      data.sort((now, next) => {
        return now.orgId - next.orgId;
      });
      this.baseData = data;
      // this.formatData(data)
      this.init();
    },
    init() {
      this.chart?.destroy();
      const data = this.baseData;
      const chart = new Chart({
        container: this.$refs["position-team"],
        autoFit: true,
        height: 260,
        padding: [30, 0, 0, 60],
      });
      chart.data(data);
      chart.axis("value", false);
      let max = Math.max(...this.baseData.map((item) => item.value));
      chart.scale("value", { min: 0, max, alias: "步数" });
      chart.coordinate().transpose();
      chart.facet("mirror", {
        fields: ["type"],
        transpose: true,
        eachView: (view, facet) => {
          const facetIndex = facet.columnIndex;
          if (facetIndex === 0) {
            view.axis("orgName", {
              position: "top",
              label: {
                style: {
                  fill: "#aaaaaa",
                  fontSize: 12,
                },
              },
              tickLine: {
                alignTick: false,
                length: 0,
              },
              line: null,
            });
          } else {
            view.axis("orgName", false);
          }
          // view.scale('value', false)
          // view.legend(false)
          const color = facetIndex === 0 ? "#1890ff" : "#f96363";
          view
            .interval()
            .position("orgName*value")
            .color(color)
            .size(20)
            .label("value", (v, f) => {
              let content =  v ? v + "步" : ""
              let fill = 'white'
              if (facetIndex) {
                return {
                  content,
                  offsetX: -40,
                  style: { fill},
                };
              } else {
                return {
                  content,
                  offsetX: 15,
                  style: { fill},
                };
              }
            });
        },
      });

      chart.interaction("element-highlight");
      chart.render();
      this.chart = chart;
    },
  },
  watch: {
    baseData: {
      handler() {
        this.$nextTick(() => [this.init()]);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.train-chunk-box {
  flex: unset !important;
  min-height: 300px;
}
.user-position {
  height: 100%;
  width: 100%;
  padding: 10px;
}
</style>
