<template>
  <van-popup
    v-model="dialogVisible"
    position="bottom"
    class="ibps-fullscreen-popup"
    @opened="getFormData"
  >
    <div class="ibps-fixed-top">
      <van-nav-bar
        title="流程图"
        fixed
        @click-left="closeDialog"
      >
        <template #left>
          <van-icon name="cross" class="ibps-nav-bar__close-icon" />
        </template>
      </van-nav-bar>
      <flow-diagram
        v-if="dialogVisible"
        ref="flowDiagram"
        v-bind="$props"
      />
    </div>
  </van-popup>
</template>

<script>
import FlowDiagram from './index'

export default {
  components: {
    FlowDiagram
  },
  props: {
    visible: Boolean,
    defId: String,
    taskId: String,
    instId: String,
    bizKey: String,
    toolbar: {
      type: Boolean,
      default: true
    },
    height: Number,
    width: Number,
    autoHeight: Boolean,
    id: {
      type: String,
      default: function() { // 随机个id避免一个页面多个流程图
        return 'ibps-flow-diagram' + Date.parse(new Date()) / 1000
      }
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
      },
      immediate: true
    }
  },
  methods: {
    getFormData() {
      this.$nextTick(() => {
        this.$refs.flowDiagram.getFormData()
      })
    },
    closeDialog() {
      this.$emit('close', false)
    }
  }
}
</script>

