
<template>
  <div class="ibps-cell-wrapper">
    <van-field
      ref="input"
      v-model="inputValue"
      :label="label"
      :name="name"
      :size="size"
      :border="false"
      :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="labelAlign"
      :input-align="inputAlign"
      :error-message-align="errorMessageAlign"
      :autosize="autosize"
      :left-icon="leftIcon"
      :right-icon="rightIcon"
      :icon-prefix="iconPrefix"
      :rules="editable?rules:null"
      readonly
      @click-input="onClick"
    >
      <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 #right-icon>
        <slot>
          <van-icon
            v-if="showClear"
            name="clear"
            class="van-field__clear"
            @click.native.stop="onRightIconClick"
          />
        </slot>
      </template>
      <template #input>
        <input
          :value="showClear?' ':''"
          type="text"
          readonly="readonly"
          :name="name"
          :placeholder="placeholder"
          class="van-field__control"
        >
      </template>
    </van-field>
    <van-cell
      :style="{width:width,height:((height?height:150)+'px')}"
      class="ibps-signature__image"
      @click="onClick"
    >
      <img :src="showValue" style="width:100%;height:100%;">
    </van-cell>
    <ibps-field-desc :desc="desc" :desc-position="descPosition" />
    <van-popup
      v-if="editable"
      v-model="showPopup"
      position="bottom"
      @opened="openedPopup"
      @close="handleClose"
    >
      <div style="overflow:hidden;width:100%" :style="{height:(signatureHeight+40) +'px'}">
        <vue-signature
          ref="signature"
          :sig-option="option"
          :width="width"
          :height="signatureHeight+'px'"
        />
        <ibps-picker-toolbar
          :title="undoable?undoButtonText || $t('common.button.undo'):''"
          :cancel-button-text="cancelButtonText"
          :confirm-button-text="confirmButtonText"
          @cancel="onCancel"
          @title="onUndo"
          @confirm="onConfirm"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import { isDef } from 'vant/lib/utils'
import FieldMixin from '@/mixins/field'
import VueSignature from './vue-signature'
import IbpsPickerToolbar from '@/components/ibps-picker-toolbar'
// 透明图片
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

export default {
  name: 'ibps-signature',
  components: {
    IbpsPickerToolbar,
    VueSignature
  },
  mixins: [FieldMixin],
  props: {
    option: Object,
    height: {
      type: Number,
      default: 200,
      validator(val) {
        return val >= 100
      }
    },
    width: String,
    zIndex: {
      type: Number,
      default: 99
    },
    autoHeight: {
      type: Boolean,
      default: true
    },
    undoable: Boolean,
    cancelButtonText: String,
    undoButtonText: String,
    confirmButtonText: String
  },
  data() {
    return {
      showPopup: false
    }
  },
  computed: {
    showClear() {
      return this.clearable && this.$utils.isNotEmpty(this.value) && isDef(this.value) && this.editable
    },
    signatureHeight() {
      return this.height ? this.height : 200
    },
    showValue() {
      if (this.$utils.isNotEmpty(this.value)) {
        return this.transformData(this.value, true)
      }
      return BLANK
    }
  },
  watch: {
    value: {
      handler(val, oldVal) {
        this._setInputValue()
      },
      immediate: true
    }
  },
  methods: {
    onClick() {
      if (!this.editable) { return }
      this.showPopup = true
    },
    getEl() {
      return this.$refs.signature
    },
    openedPopup() {
      if (this.$refs.signature) {
        this.getEl().fromDataURL(this.transformData(this.value, true))
      }
    },
    handleClose() {
      this.showPopup = false
      this.getEl().clear()
    },
    onRightIconClick() {
      this.showClear ? this.onClear() : this.onClick()
    },
    onClear() {
      this.$emit('input', '')
      this.getEl().clear()
    },
    onUndo() {
      this.getEl().undo()
    },
    onConfirm() {
      this.showPopup = false
      this.$emit('input', this.transformData(this.getEl().getData(), false))
    },
    onCancel() {
      this.showPopup = false
    },
    /**
     * value:值
     * hasData 是否必须有 data：
     */
    transformData(value, hasData) {
      if (this.$utils.isEmpty(value)) { return '' }
      if (hasData) {
        if (value.indexOf('data:') > -1) {
          return value
        } else {
          return 'data:' + value
        }
      } else {
        if (value.indexOf('data:') > -1) {
          return value.substring(5)
        } else {
          return value
        }
      }
    }
  }
}
</script>
<style lang="scss">
  .ibps-signature{
     .ibps-signature__image{
        border: 1px dashed #bbb;
        margin: 0 10px;
     }
  }
</style>

