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

<script>
import G6 from "@antv/g6";
import TrainChunkBox from "@/views/training/training/components/train-chunk-box.vue";
export default {
  components: { TrainChunkBox },
  data() {
    return {
      chart: null,
      showGroupData: null,
      isloading: true,
    };
  },
  props: {
    checkedGroup: {
      type: Number,
      default: 1,
    },
    allData: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    // this.initData()
  },
  methods: {
    init() {
      this.graph?.destroy();
      const container = this.$refs.stepevealuation;
      const fontSize = 20;
      G6.registerNode("crect", {
        draw: (cfg, group) => {
          let text = "";
          let textColor = "black";
          switch (cfg.depth) {
            case 0:
              text = "步骤信息";
              break;
            case 1:
              text = cfg.userName;
              break;
            case 2:
              let { operationInfo, partInfo, deviceInfo } = cfg;
              text = `${operationInfo.name}【${deviceInfo.name}】${partInfo.name}按钮`;
              // console.log(cfg);
              // text = "步骤" + text;
              if (cfg.status === 2) {
                textColor = "red";
              }
              break;
            default:
              text = "步骤信息";
              break;
          }
          const width = cfg.id.length * 10;
          const rect = group.addShape("rect", {
            attrs: {
              x: 0,
              y: -10,
              fill: textColor,
              width,
              height: 20,
              lineWidth: 0,
              opacity: 0,
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: "rect-shape",
            draggable: true,
          });

          const label = group.addShape("text", {
            attrs: {
              text,
              fill: textColor,
              shadowColor: textColor,
              fontSize,
              x: 0,
              y: 0,
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: "label-shape",
            draggable: true,
          });
          // const labelBBox = label.getBBox()
          // group.addShape('circle', {
          //   attrs: {
          //     x: labelBBox.maxX + 10,
          //     y: (labelBBox.minY + labelBBox.maxY) / 2,
          //     r: 5,
          //     stroke: textColor
          //   },
          //   // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
          //   name: 'circle-shape',
          //   draggable: true
          // })
          const bboxWidth = label.getBBox().width + 20;
          rect.attr({ width: bboxWidth });
          group.addShape("path", {
            attrs: {
              lineWidth: 1,
              fill: "#ccc",
              stroke: "#ccc",
              path: [
                ["M", 0, 0],
                ["L", bboxWidth, 0],
              ],
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: "path-shape",
            draggable: true,
          });

          return rect;
        },
        getAnchorPoints: (type, cfg) => {
          return [
            [0, 0.5],
            [1, 0.5],
          ];
        },
      });
      container.style.opacity = 0.3;
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      const graph = new G6.TreeGraph({
        container: this.$refs.stepevealuation,
        width,
        height,
        modes: {
          default: ["collapse-expand", "drag-canvas", "zoom-canvas"],
        },
        defaultNode: {
          type: "crect",
        },
        defaultEdge: {
          type: "cubic-horizontal",
          style: {
            stroke: "#A3B1BF",
          },
        },
        layout: {
          type: "compactBox",
          direction: "LR",
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getVGap: function getVGap() {
            return 10;
          },
          getHGap: function getHGap() {
            return 100;
          },
          getWidth: function getWidth(d) {
            return G6.Util.getTextSize(d.id, fontSize)[0] + 20;
          },
        },
        fitView: true,
      });
      graph.data(this.showGroupData);
      graph.render();
      this.graph = graph;
      setTimeout(() => {
        this.isloading = false;
         container.style.opacity = 1;
      }, 500);
      if (typeof window !== "undefined") {
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
      }
    },
    changeSize() {
      this.graph?.destroy();
      this.formatData();
      // let graph = this.graph;
      // let container = this.$refs.stepevealuation;
      // console.log(container.scrollWidth, container.scrollHeight);
      // if (!graph || graph.get("destroyed")) return;
      // if (!container || !container.scrollWidth || !container.scrollHeight)
      //   return;
      // graph.changeSize(container.scrollWidth, container.scrollHeight);
    },
    formatData() {
      const groupData = [];
      this.allData.forEach((item) => {
        item.userId = item.userInfo.id;
        item.userName = item.userInfo.name;
        if (item.settingInfo.group === this.checkedGroup) {
          groupData.push(item);
        }
      });
      this.showGroupData = { id: "步骤信息", children: [] };
      const baseData = {};
      groupData.forEach((item) => {
        item.id = `${item.id}`;
        if (baseData[item.userInfo.id]) {
          baseData[item.userInfo.id].children.push(item);
        } else {
          baseData[item.userInfo.id] = {
            id: item.userInfo.id,
            children: [item],
            userName: item.userName,
          };
        }
      });
      this.showGroupData.children = Object.values(baseData);
      this.$nextTick(() => {
        this.init();
      });
    },
  },
  watch: {
    allData() {
      this.formatData();
    },
    checkedGroup() {
      if (this.allData) {
        this.formatData();
      }
    },
  },
  computed: {},
};
</script>

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