<template>
  <div class="container">
    <div class="lf" ref="container" />
    <legend-lf />
  </div>
</template>

<script>
import LegendLf from "./legend.vue";
import LogicFlow from "@logicflow/core";
import { createProcessData } from "./utils/createProcessData";
import processRequest from "@/apis/service/serviceParam/setActionProcess";
import { StartTask, ProcessTask, NormalTask, Dashe } from "./tasks";
import { Tooltip } from "./utils/tooltip";

import "@logicflow/core/dist/style/index.css";
import "./style.css";

LogicFlow.use(Tooltip);
export default {
  props: {
    orderCode: {
      type: String,
      default: ""
    },
    process_id: {
      type: String,
      default: ""
    },
    type:{
      type:String,
      default:'YJD'
    }
  },
  data() {
    return {
      lf: null,
      process: null,
      record: null
    };
  },
  components: {
    LegendLf
  },
  mounted() {
    this.createLf();
  },
  methods: {
    createLf() {
      this.lf = new LogicFlow({
        container: this.$refs.container,
        stopZoomGraph: true,
        stopScrollGraph: true,
        stopMoveGraph: true,
        isSilentMode: true,
        grid: false
      });

      this.lf.register(StartTask);
      this.lf.register(ProcessTask);
      this.lf.register(NormalTask);
      this.lf.register(Dashe);
    },
    async getProcess() {
      const result = await processRequest.list({ process_id: this.process_id });
      this.process = result.data?.list;
    },
    async getRecord() {
      const result = await processRequest.record({
        orderCode: this.orderCode,
        type: this.type
      });
      this.record = result.data;
    },
    initalData() {
      this.getRecord();
      this.getProcess();
    },
    createChartData() {
      if (!this.process || !this.record || !this.lf) return;
      this.lf.render(createProcessData(this.process, this.record));
    },
    render(data){
      if (!data|| !this.lf) return;
      this.lf.render(data);
    }
  },
  watch: {
    process: {
      handler() {
        this.createChartData();
      },
      deep: true
    },
    record: {
      handler() {
        this.createChartData();
      },
      deep: true
    },
    process_id: {
      handler() {
        this.process_id && this.getProcess();
      },
      immediate:true,
      deep: true
    },
    orderCode: {
      handler() {
        this.orderCode && this.getRecord();
      },
      immediate:true,
      deep: true
    }
  }
};
</script>


<style scoped>
.container {
  width: 100%;
  height: 650px;
}

.container > .lf {
  width: 100%;
  height: 100%;
}
</style>
