<template>
  <TrainChunkBox title="训练步骤用时信息" ref="StepDurationEvealuation">
    <template v-slot:title-left
      ><span v-if="!$store.isFullscreen"
        @click="$elementFullscreen($refs.StepDurationEvealuation, formatData)"
        >全屏</span
      >
      </template
    >
    <div
      ref="stepDurationEvealuation"
      id="userstepevealuation"
      style="height: 100%; overflow: hidden; padding: 5px"
    ></div>
  </TrainChunkBox>
</template>

<script>
import { Chart } from "@antv/g2";
import { getTrainStepApi } from "@/api/training/train";
import TrainChunkBox from "@/views/training/training/components/train-chunk-box.vue";
export default {
  components: { TrainChunkBox },
  data() {
    return {
      chart: null,
      showGroupData: null,
    };
  },
  props: {
    allData: {
      type: Array,
      default: () => [],
    },
    checkedGroup: {
      type: Number,
      default: 1,
    },
  },
  created() {
    // this.initData()
  },
  methods: {
    async getStepData() {
      const { data } = await getTrainStepApi(this.trainId);
      this.allData = data;
    },
    init() {
      this.chart?.destroy();
      const chart = new Chart({
        container: this.$refs.stepDurationEvealuation,
        autoFit: true,
        padding: [30, 30, 50, 30],
        // height: 500
      });
      // 数据格式： [{"gender":"female","height":161.2,"weight":51.6}]
      // const data = [{ gender: 'female', height: 161.2, weight: 51.6 }]
      chart.data(this.showGroupData);
      chart.scale({
        // height: { nice: true },
        // weight: { nice: true }
      });
      chart.tooltip({
        showTitle: false,
        showCrosshairs: true,
        crosshairs: {
          type: "xy",
        },
        itemTpl:
          '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' +
          '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
          "{name}<br/><br/>" +
          "{value}" +
          "</li>",
      });
      chart
        .point()
        .position("sort*duration")
        .color("userName")
        .shape("circle")
        .tooltip(
          "sort*duration*userName*standardTime*stepInfo",
          (sort, duration, userName, standardTime, stepInfo) => {
            let value = "";
            if (userName === "标准用时") {
              value = `<div>第${sort}步,标准用时：${duration}秒
              <div>详情：${stepInfo.operationInfo.name}【${stepInfo.deviceInfo.name}】${stepInfo.partInfo.name}按钮</div>
              </div>`;
            } else {
              const standartText = `标准用时${standardTime}秒,`;
              value = `<div>第${sort}步,${standartText},实际用时：${duration}秒
              <div>详情：${stepInfo.operationInfo.name}【${stepInfo.deviceInfo.name}】${stepInfo.partInfo.name}按钮</div>
              </div>`;
            }
            return {
              name: userName,
              value,
            };
          }
        )
        .style({
          fillOpacity: 0.85,
        });
      chart.interaction("legend-highlight");
      chart.render();
      this.chart = chart;
    },
    formatData() {
      this.showGroupData = [];
      let data = this.allData.filter((item) => {
        return +item.settingInfo.group === +this.checkedGroup;
      });
      data = data?.map((item) => {
        this.showGroupData.push({
          duration: +item.stepInfo.duration + +item.stepInfo.delay,
          sort: item.stepInfo.sort,
          stepInfo: item,
          userName: "标准用时",
        });
        return {
          sort: item.stepInfo.sort,
          userName: item.userInfo.name,
          stepInfo: item,
          duration: Math.round(+item.duration / 1000),
          standardTime: +item.stepInfo.duration + +item.stepInfo.delay,
        };
      });
      this.showGroupData.push(...data);
      this.$nextTick(() => {
        this.init();
      });
    },
  },
  watch: {
    allData() {
      this.formatData();
    },
    checkedGroup() {
      if (this.allData) {
        this.formatData();
      }
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
