<template>
  <div :class="isMobile ? 'mobile-flow-chart' : ''">
    <el-dialog
      v-if="showFlowChart && dialog"
      width="80%"
      title="流程图"
      :visible.sync="showFlowChart"
      :close-on-click-modal="false"
      append-to-body
      :custom-class="customClass"
    >
      <ChartMain
        :def-id="defId"
        :inst-id="instId"
        :bpmn-inst-id="bpmnInstId"
        :custom-class="customClass"
      />
    </el-dialog>
    <ChartMain
      v-if="!dialog"
      :def-id="defId"
      :inst-id="instId"
      :bpmn-inst-id="bpmnInstId"
      :custom-class="customClass"
    />
  </div>
</template>

<script>
  import ChartMain from './ChartMain.vue'
  import mobileMode from '@/mixins/mobileMode.js'

  export default {
    name: 'HtFlowChart',
    components: { ChartMain },
    mixins: [mobileMode],
    props: {
      defId: {
        type: String,
        default: '',
      },
      instId: {
        type: String,
        default: '',
      },
      bpmnInstId: {
        type: String,
        default: '',
      },
      customClass: {
        type: String,
        default: '',
      },
      dialog: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        showFlowChart: false,
      }
    },
    methods: {
      handleOpen() {
        this.showFlowChart = true
      },
    },
  }
</script>

<style lang="scss" scoped>
  .mobile-flow-chart {
    height: 100%;
  }
  div ::v-deep.el-dialog__body {
    padding: 30px 20px;
  }
</style>
