<template>
  <TrainChunkBox title="训练步骤分类统计" ref="StepClassifyEvealuation">
    <template v-slot:title-left
      ><span
        v-if="!$store.isFullscreen"
        @click="$elementFullscreen($refs.StepClassifyEvealuation, formatData)"
        >全屏</span
      >
    </template>
    <div class="classify-box">
      <div class="classify-item">
        <span class="classify-title">设备操作步骤统计</span>
        <span class="classify-title"
          >总步骤数：{{ showGroupData?.length }}</span
        >
        <div
          ref="stepDeviceEvealuation"
          id="userstepevealuation"
          style="height: 100%; width: 100%; overflow: hidden; padding: 5px"
        ></div>
      </div>
      <div class="classify-item">
        <span class="classify-title">人员操作步骤统计</span>
        <span class="classify-title"
          >总步骤数：{{ showGroupData?.length }}</span
        >
        <div
          ref="stepUserEvealuation"
          id="userstepevealuation"
          style="height: 100%; width: 100%; overflow: hidden; padding: 5px"
        ></div>
      </div>
    </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: {},
      showGroupData: null,
    };
  },
  props: {
    allData: {
      type: Array,
      required: () => [],
    },
    checkedGroup: {
      type: Number,
      default: 1,
    },
  },
  created() {
    // this.initData()
  },
  mounted() {},
  methods: {
    async getStepData() {
      const { data } = await getTrainStepApi(this.trainId);
      this.allData = data;
    },
    init(ref, data) {
      this.chart[ref]?.destroy();
      this.$nextTick(() => {
        const chart = new Chart({
          container: this.$refs[ref],
          autoFit: true,
          width: "100%",
          padding: 0,
        });
        chart.data(data);
        chart.coordinate("theta", {
          radius: 0.75,
        });
        chart.tooltip({
          showMarkers: false,
          showTitle: false,
          customContent: (title, data) => {
            if (!data[0]) return;
            return `
        <ul class="g2-tooltip-list">
          <li class="g2-tooltip-list-item">${title}</li>
          <li class="g2-tooltip-list-item"><span style="background-color:${
            data[0].color
          };" class="g2-tooltip-marker"></span>占比: ${(+data[0]
              ?.value).toFixed(2)}%</li>
        </ul>`;
          },
        });
        chart
          .interval()
          .adjust("stack")
          .position("value")
          .color("type")
          .style({ opacity: 0.4 })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  matrix: Util.zoom(shape, 1.1),
                };
              },
            },
          })
          .label("type", (val) => {
            return {
              // offset: -20,
              // offsetX: -20,
              // offsetY: 30,
              autoRotate: false,
              style: {
                fill: "rgb(88, 87, 87)",
                // fill: "white",
                fontSize: 12,
                shadowBlur: 2,
                // shadowColor: "rgba(0, 0, 0, .45)",
              },
              content: (obj) => {
                return obj.type + "\n" + obj?.value.toFixed(2) + "%";
              },
            };
          });
        chart.legend(false);
        chart.interaction("element-single-selected");

        chart.render();
        this.chart[ref] = chart;
      });
    },
    formatData() {
      const groupData = this.allData.filter((item) => {
        return +item.settingInfo.group === +this.checkedGroup;
      });
      this.showGroupData = groupData;
      const deviceAllStep = {};
      const userAllStep = {};

      groupData.forEach((item) => {
        if (deviceAllStep[item.deviceInfo.id]) {
          deviceAllStep[item.deviceInfo.id].step.push(item);
        } else {
          deviceAllStep[item.deviceInfo.id] = {
            step: [item],
            type: item.deviceInfo.name,
          };
        }
        if (userAllStep[item.userInfo.id]) {
          userAllStep[item.userInfo.id].step.push(item);
          userAllStep[item.userInfo.id].allValue++;
        } else {
          userAllStep[item.userInfo.id] = {
            step: [item],
            type: item.userInfo.name,
            allValue: 1,
          };
        }
      });
      let formatDev = 0;
      let formatUser = 0;
      for (const key in deviceAllStep) {
        const base = deviceAllStep[key];
        console.log(base, "aaaaaa");
        base.allValue = groupData.length;
        // base.value =  Math.round((base.step.length / groupData.length) * 100);
        base.value = +((base.step.length / groupData.length) * 100).toFixed(2);
        formatDev += base?.value;
      }
      Object.values(deviceAllStep)[0] &&
        (Object.values(deviceAllStep)[0].value -= formatDev - 100);
      for (const key in userAllStep) {
        const base = userAllStep[key];
        console.log(base, "aaaaaa");
        base.allValue = groupData.length;
        base.value = +((base.step.length / groupData.length) * 100).toFixed(2);
        formatUser += base?.value;
      }
      Object.values(userAllStep)[0] &&
        (Object.values(userAllStep)[0].value -= formatDev - 100);

      this.$nextTick(() => {
        this.init("stepDeviceEvealuation", Object.values(deviceAllStep));
        this.init("stepUserEvealuation", Object.values(userAllStep));
      });
    },
  },
  watch: {
    allData() {
      this.formatData();
    },
    checkedGroup() {
      if (this.allData) {
        this.formatData();
      }
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.classify-box {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.classify-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.classify-title {
  font-size: 14px;
  font-weight: bold;
  padding-top: 10px;
  display: inline-block;
  width: 100%;
  text-align: center;
}
</style>
