<template>
  <!-- 自定义输入框（待完善） -->
    <div class="flex-spaceB assetpkgmgr-box" style="position：relative">
        <el-input v-if="btnDisplay" v-model="currentValue" :disabled="disabled" :placeholder="placeholder">
          <template slot="append">
            <el-button type="primary" @click="handleClick" size="medium">{{buttonText}}</el-button>
          </template>
        </el-input>
        <el-input v-else v-bind="$attrs" v-model="currentListeners" ref="refInput" :disabled="disabled" :placeholder="placeholder" :maxlength="maxlength"></el-input>
        <div :style="[{position:'absolute',right:'4px'}]">
          <div id="appendBody" v-if="!btnDisplay">
            {{precision}}
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'formBandButton',
  props: {
    // 按钮名称
    buttonText: {
      type: [String],
      default: '检测'
    },
    // 最大输入限制
    maxlength: {
      type: [String],
      default: ''
    },
    // 按钮名称
    placeholder: {
      type: [String],
      default: ''
    },
    // 表单值
    value: {
      type: [String, Number],
      default: ''
    },
    // 是否显示按钮
    btnDisplay: {
      type: [Boolean],
      default: false
    },
    // 表单尾部内容
    precision: {
      type: [String],
      default: ''
    },
    // 表单尾部内容
    disabled: {
      type: [Boolean],
      default: false
    }
  },
  data () {
    return {
      // 表单尾部内容间距
      right: 0
    }
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
    currentListeners: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.setVal(value)
      }
    }
  },
  mounted () {
    // 表单尾部内容间距
    this.$nextTick(() => {
      const appendBodyWidth = document.getElementById('appendBody').getBoundingClientRect().width
      // console.log(appendBody.width)
      this.right = -(appendBodyWidth || 0) + 'px'
    })
  },
  methods: {
    // 使input获取焦点
    focus () {
      this.$refs.refInput.focus()
    },
    // 使input失去焦点
    blur () {
      this.$refs.refInput.blur()
    },
    // 选中input中的文字
    select () {
      this.$refs.refInput.select()
    },
    setVal (val) {
      // 金额
      let reg = /^(([1-9][0-9]*(,\d{3})*)|0)(\.\d{1,2})?$/.test(Number(val))
      if (val.indexOf('.') > -1) {
        let arr = val.split('.')[1]
        if (arr.length > 2) {
          return
        }
      }
      if (reg) {
        // 去除前后空格
        val = val.replace(/(^\s*)|(\s*$)/g, '')
        this.$emit('input', val)
      }
    },
    // 点击
    handleClick () {
      this.$emit('otherData')
    }
  }
}
</script>
