<template>
  <van-popup
    v-model="dialogVisible"
    class="ibps-fullscreen-popup"
    position="bottom"
    @opened="loadFormData"
  >
    <van-nav-bar
      :title="title"
      fixed
      @click-left="closeDialog"
    >
      <template #left>
        <van-icon name="cross" class="ibps-nav-bar__close-icon" />
      </template>
    </van-nav-bar>
    <bpmn-formrender
      ref="bpmnFormrender"
      :def-id="defId"
      :pro-inst-id="proInstId"
      :task-id="taskId"
      :inst-id="instId"
      :task-change-id="taskChangeId"
      :copy-flow="copyFlow"
      @close="closeDialog"
      @callback="handleCallback"
    />
  </van-popup>
</template>
<script>
import BpmnFormrender from './index'
export default {
  name: 'bpmn-formrender-dialog',
  components: {
    BpmnFormrender
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defId: { // 流程定义ID
      type: String
    },
    proInstId: { // 草稿流程实例ID
      type: String
    },
    instId: { // 流程实例ID
      type: String
    },
    taskId: { // 流程任务ID
      type: String
    },
    taskChangeId: { // 转办代理任务ID
      type: String
    },
    copyFlow: { // 是否复制流程
      type: Boolean,
      default: false
    },
    title: String
  },
  data() {
    return {
      dialogVisible: this.visible
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
      },
      immediate: true
    }
  },
  methods: {
    loadFormData() {
      this.$nextTick(() => {
        this.$refs.bpmnFormrender.loadFormData()
      })
    },
    handleCallback(data) {
      this.$emit('callback', data)
    },
    // 关闭当前窗口
    closeDialog() {
      this.$emit('close', false)
    }
  }
}
</script>>
