<template>
  <div class="vuc-buttonedit">
    <Input ref="btnEditInput"
           :placeholder="showBtn?placeholder:'请输入'"
           :readonly="!editable && !disabled"
           :disabled="disabled"
           :autofocus="autofocus"
           :maxlength="maxlength"
           :auto-select="autoSelect"
           v-model="localValue"
           @on-change="handleInputChange"
           @on-blur="handleInputBlur"
           @mouseover.native="handleOver"
           @mouseout.native="handleOut"
           @click.native="handleBtnMoreClick(false)">
    <Icon type="ios-more"
          slot="suffix"
          v-if="showBtn"
          @click.stop="handleBtnMoreClick(true)" />
    </Input>
    <Icon v-if="showHide"
          class="btn-clear"
          type="md-close"
          @click.stop="handleBtnClearClick"
          @mouseover.native.stop="handleOver"
          @mouseout.native.stop="handleOut" />

  </div>

</template>

<script>
import VucTextarea from './vuc-textarea.vue'
export default {
  name: 'VucButtonedit',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    autoSelect: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number
    },
    options: {
      type: Object,
      default: () => {
        return {
          title: '请选择',
          width: 800,
          height: 400,
          resize: true,
          showFooter: true,
          escClosable: true
        }
      }
    },
    showBtnMethod: Function
  },
  data () {
    return {
      localValue: '',
      tmpValue: '',
      showClear: false,
      timeId: null,
      showBtn: true
    }
  },
  computed: {
    showHide () {
      return this.localValue !== '' && this.showClear && !this.disabled && this.clearable
    }
  },
  watch: {
    value () {
      if (this.localValue !== this.value) {
        this.localValue = this.value
      }
    }
  },
  methods: {
    handleOver () {
      if (this.timeId) {
        clearTimeout(this.timeId)
      }
      this.showClear = true
    },
    handleOut () {
      this.timeId = setTimeout(() => {
        this.showClear = false
      }, 300)
    },
    handleInputChange () {
      this.$emit('input', this.localValue)
      this.$emit('on-change', this.localValue)
    },
    handleInputBlur () {
      this.$emit('on-blur', this.localValue)
    },
    handleBtnMoreClick (isBtn) {
      /*       if (!this.showBtn) {
        return false
      } */
      if (this.disabled || (!isBtn && this.editable)) return false
      this.showModal()
    },
    handleBtnClearClick () {
      if (this.disabled) return false
      this.localValue = ''
      this.$emit('input', this.localValue)
      this.$emit('on-change', { value: this.localValue, itemData: { value: '' } })
    },

    showModal () {
      const _this = this
      let { options } = this
      if (!options.customComponent) {
        options.customComponent = VucTextarea
        options.showFooter = false
        // options.escClosable = true
      }

      let opt = {
        message: '',
        title: options.title || '请选择',
        resize: true,
        showFooter: options.showFooter,
        escClosable: true,
        events: {
          zoom: function ({ $modal, $custom }, event) {
            const modalBoxElem = $modal.getBox()
            if (modalBoxElem) {
              const height = modalBoxElem.style.height.replace('px', '') - 120
              const width = modalBoxElem.style.width.replace('px', '')
              if ($custom && $custom.resize) {
                $custom.resize(height, width)
              } else {
              }
              _this.$emit('on-zoom', { $modal, $custom, height, width, event })
            }
          },
          show ({ $modal, $custom }, event) {
            if ($custom.openModal) {
              $custom.openModal()
            }
            _this.$emit('on-show', { $modal, $custom, event })
          },
          hide ({ $modal, $custom }, event) {
            if ($custom.hideModal) {
              $custom.hideModal()
            }
            _this.$emit('on-hide', { $modal, $custom })
          }
        },
        slots: {
          default: ({ $modal, $custom }, h) => {
            return [
              h(options.customComponent, {
                props: { ...options.customProps, value: _this.value },
                on: Object.assign({}, options.customEvents, {
                  close () {
                    $modal.close()
                  },
                  input (val) {
                    _this.tmpValue = val
                    _this.localValue = val
                    if ((options.hasOwnProperty('showFooter') && !options.showFooter) || $custom.close) {
                      _this.$emit('input', val)
                    }
                  },
                  'on-change' (val) {
                    _this.$emit('on-change', val)
                  }
                })
              })
            ]
          }
        }
      }
      if (!options.hasOwnProperty('showFooter') || options.showFooter) {
        opt.slots.footer = ({ $modal, $custom }, h) => {
          return [
            h('Button', {
              props: {
                type: 'default'
              },
              style: 'margin-right:15px;',
              on: {
                click () {
                  $modal.close()
                }
              }
            }, ['取消']),
            h('Button', {
              props: { type: 'primary' },
              on: {
                click () {
                  // 如果组件内有close,则调用组件内close
                  if ($custom.close) {
                    $custom.close()
                  } else {
                    _this.$emit('input', _this.tmpValue)
                    $modal.close()
                  }
                }
              }
            }, ['确定'])
          ]
        }
      }
      if (options.width) {
        opt.width = options.width
      }
      if (options.height) {
        opt.height = options.height
      }
      if (options.minWidth) {
        opt.minWidth = options.minWidth
      }
      if (options.minHeight) {
        opt.minHeight = options.minHeight
      }
      if (options.hasOwnProperty('resize')) {
        opt.resize = options.resize
      }
      if (options.hasOwnProperty('showFooter')) {
        opt.showFooter = options.showFooter
      }
      if (options.hasOwnProperty('escClosable')) {
        opt.escClosable = options.escClosable
      }
      if (options.hasOwnProperty('title')) {
        opt.title = options.title
      }
      if (options.id) {
        opt.id = options.id
      }
      this.$modal(opt)
    }

  },
  created () {
    if (this.showBtnMethod) {
      this.showBtn = this.showBtnMethod(this.options)
    }
  },
  mounted () {
    this.localValue = this.value
    if (this.autofocus) {
      setTimeout(() => {
        this.$refs.btnEditInput.focus()
      }, 300)
    }
  }
}
</script>

<style lang="less" scoped>
@import './vuc-buttonedit.less';
</style>
