<template>
  <div class="bpmn-page">
    <Bpmn v-if="xml" :xml="xml" @save="handleSave" @edit="handleEdit" />
  </div>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";
import Bpmn from "@/components/bpmn";

export default {
  components: { Bpmn },
  data() {
    return {
      xml: "",
    };
  },
  created() {
    // 获取xml
    const { id } = this.$route.query;
    id &&
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/flowable/model/xml/${id}`)
        .then((res) => {
          this.xml = res.data.data;
        });
  },
  methods: {
    handleSave(xml) {
      const { id, newVersion } = this.$route.query;
      this.$axios
        .put(`${ApiConstant.PREFIX_CORE}/api/flowable/model`, {
          editor: xml,
          id,
          newVersion,
        })
        .then(() => {
          this.$message.success(this.$t("EDIT_SUCCESS"));
          this.$router.push({
            path: "/flowable/model",
          });
        });
    },
    handleEdit(xml) {
      this.xml = xml;
    },
  },
};
</script>

<style lang="less" scoped>
.bpmn-page {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
