//流程图
<template>
  <div>
    <div
      v-if="showPage"
      class="flowChart"
      :style="{
        '--outHeight': `${outHeight}px`,
      }"
    >
      <ht-flow-chart
        ref="flowChart"
        :inst-id="instId"
        :bpmn-inst-id="bpmnInstId"
        :dialog="false"
      />
    </div>
    <van-popup
      v-else
      v-model="showoptions"
      round
      :close-on-click-overlay="false"
      safe-area-inset-bottom
      position="bottom"
      style="min-height: 60%; max-height: 80%"
    >
      <van-nav-bar
        title="流程图"
        left-text="关闭"
        @click-left="showoptions = false"
        class="popup_header_fixed"
        style="position: relative"
      />
      <ht-flow-chart
        class="popup_header_margin"
        ref="flowChart"
        :inst-id="instId"
        :def-id="defId"
        :bpmn-inst-id="bpmnInstId"
        :dialog="false"
      />
    </van-popup>
  </div>
</template>

<script>
  export default {
    props: ['bpmnInstId', 'instId', 'outHeight', 'showPage', 'defId'],
    data() {
      return {
        showoptions: false,
      }
    },
    methods: {
      showPop() {
        this.showoptions = true
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/matterButton.scss';
  * {
    font-size: 14px !important;
  }

  .van-popup {
    display: flex;
    flex-direction: column;
  }
  .popup_header_margin {
    margin: 0 !important;
    flex: 1;
    display: flex;
  }
  ::v-deep {
    .van-cell {
      padding: 0;
    }
    [class*='van-hairline']::after {
      border: none !important;
    }
    .van-cell::after {
      border: none !important;
    }
    .van-collapse-item__content {
      padding: 9px 0 0;
    }
  }
  .flowChart {
    background: #fff;
    overflow: auto;
    padding: 16px 2px;
    height: calc(#{$vh} - var(--outHeight) - 32px);
    ::v-deep {
      .flow-chart {
        margin: 0;
        overflow: visible;
      }
    }
  }
  .popup_header_margin {
    padding: 0 12px;
  }
  ::v-deep .flow-chart {
    min-height: 300px !important;
  }
</style>