<template>
  <!-- <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" /> -->
  <process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
    v-loading="designerData.loading" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form"
    @save="onSaveDesigner" />

</template>

<script>
  import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
  // import ProcessViewer from '@/components/ProcessViewer/index.vue'

  export default {
    name: "Model",
    components: {
      ProcessDesigner,
      // ProcessViewer,
    },
    data() {
      return {
       
        designerOpen: false,
        designerData: {
          loading: false,
          bpmnXml: '',
          modelId: null,
          form: {
            processName: null,
            processKey: null
          }
        },
        designerModelId: null,
        processView: {
          title: '',
          open: false,
          index: undefined,
          xmlData: "",
        },
        
        
      };
    },
    created() {

    },
    methods: {
      /** 查看流程图 */
      handleProcessView(row) {
        let modelId = row.modelId;
        this.processView.title = "流程图";
        this.processView.index = modelId;
        // 发送请求，获取xml
        getBpmnXml(modelId).then(response => {
          this.processView.xmlData = response.data;
        })
        this.processView.open = true;
      },
      /** 设计按钮操作 */
      handleDesigner(row) {
        this.designerData.bpmnXml =  '';
        this.designerData.title = "流程设计 - " + row.modelName;
        // this.designerData.modelId = row.modelId;
        // this.designerData.form = {
        //   processName: row.modelName,
        //   processKey: row.modelKey
        // }
        // if (row.modelId) {
        //   this.designerData.loading = true;
        //   getBpmnXml(row.modelId).then(response => {
        //     this.designerData.bpmnXml = response.data || '';
        //     this.designerData.loading = false;
        //     this.designerOpen = true;
        //   })
        // }
      },
      onSaveDesigner(bpmnXml) {
        console.log(bpmnXml)
        // this.bpmnXml = bpmnXml;
        // let dataBody = {
        //   modelId: this.designerData.modelId,
        //   bpmnXml: this.bpmnXml
        // }
        // this.$confirm("是否将此模型保存为新版本？", "提示", {
        //   distinguishCancelAndClose: true,
        //   confirmButtonText: '是',
        //   cancelButtonText: '否'
        // }).then(() => {
        //   this.confirmSave(dataBody, true)
        // }).catch(action => {
        //   if (action === 'cancel') {
        //     this.confirmSave(dataBody, false)
        //   }
        // })
      },
    }
  };
</script>