<template>
  <div class="ibps-cell-wrapper">
    <van-field
      ref="input"
      :label="label"
      :name="name"
      :size="size"
      :border="border"
      :disabled="disabled"
      :required="required"
      :clearable="clearable"
      :clickable="clickable"
      :is-link="isLink"
      :error="error"
      :error-message="errorMessage"

      :arrow-direction="arrowDirection"
      :label-class="labelClass"
      :label-width="labelWidth"
      label-align="left"
      input-align="right"
      :error-message-align="errorMessageAlign"
      :autosize="autosize"
      :left-icon="leftIcon"
      :right-icon="rightIcon"
      :icon-prefix="iconPrefix"
      :rules="editable?rules:null"
      readonly
    >
      <template #label>
        {{ label }}<van-icon v-if="desc && descPosition==='lableIcon'" name="warning" class="ibps-dialog-icon" @click="$action.descDialog({ title:label, message:desc })" />
      </template>
      <template #input>
        <van-button size="mini" color="#D6EAFE" @click="onClick('zoomReset')">
          <span style="color:#3396FB">还原</span>
        </van-button>
        <van-button size="mini" color="#FFE5CC" @click="onClick('zoomIn')">
          <span style="color:#FF7C00">放大</span>
        </van-button>
        <van-button size="mini" color="#FCDDDB" @click="onClick('zoomOut')">
          <span style="color:#F0574A">缩小</span>
        </van-button>

        <!-- <van-button size="mini" type="primary" @click="onClick('zoomReset')">
          还原
        </van-button>
        <van-button size="mini" type="warning" @click="onClick('zoomIn')">
          放大
        </van-button>
        <van-button size="mini" type="danger" @click="onClick('zoomOut')">
          缩小
        </van-button> -->
      </template>
    </van-field>
    <flow-diagram
      ref="flowDiagram"
      :def-id="defId"
      :task-id="taskId"
      :inst-id="instId"
      :biz-key="bizKey"
      :auto-height="true"
      :toolbar="false"
      init
    />
  </div>
</template>
<script>
import FieldMixin from '@/mixins/field'
import FlowDiagram from './index'

export default {
  name: 'ibps-flow-diagram',
  components: {
    FlowDiagram
  },
  mixins: [FieldMixin],
  props: {
    title: String,
    defId: String,
    taskId: String,
    instId: String,
    bizKey: String
  },
  methods: {
    onClick(action) {
      if (action === 'zoomReset') {
        this.$refs.flowDiagram.zoomReset()
      } else if (action === 'zoomIn') {
        this.$refs.flowDiagram.zoomIn()
      } else if (action === 'zoomOut') {
        this.$refs.flowDiagram.zoomOut()
      }
    }
  }
}
</script>

