<!-- *******************  输入框  *******************  -->
<template>
  <view :style="{ width: fieldsWidth }" class="input-view-class">
    <view class="tip-span" v-if="showTip">({{placeholderText}})</view>
    <u-input
      :type="type"
      class="input-item"
      v-model="dataValue"
      @input="valueChange"
      :placeholder="placeholderText"
      :placeholder-style="placeholderStyle"
      :custom-style="customStyle"
      :clearable="false"
      :border="border"
      border-color="#ECECEC"
      :maxlength="maxlength"
      :cursor-spacing="10"
      :disabled="isDisabled"
      hold-keyboard
      @blur="showTip=isESerialNum && dataValue.length < maxlength"
    />
    <view class="content" v-if="slotContent">
      <text class="txt">{{ slotContent }}</text>
    </view>
  </view>
</template>

<script>
import stringMixin from './stringMixin'
export default {
  name: 'XhInput', // 新建 input
  components: {},
  mixins: [stringMixin],
  props: {
    placeholder: {
      type: String,
      default: '请输入',
    },
    item: {
      type: Object,
      default() {
        return {}
      },
    },
    type: {
      type: String,
      default: 'text',
    },
    slotContent: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      inputType: 'text',
      showTip: false,
    }
  },
  computed: {
	isDigit() {
		return this.type == 'digit'
	},
    maxlength() {
      return this.isDigit ? 9 : (this.isESerialNum ? 8 : 140)
    },
    fieldsWidth() {
      return this.item.fieldsWidth ? this.item.fieldsWidth + 'rpx' : '100%'
    },
    placeholderStyle() {
      return 'color:#999999;font-size:26rpx'
    },
    customStyle() {
      return {
        'background-color': this.backgroundColor,
        'border-radius': '12rpx',
        color: '#333333',
        'padding-left': this.textarea ? '0rpx' : '20rpx',
        'font-size': '26rpx',
        height: '76rpx',
      }
    },
    border() {
      return this.textarea
    },
    textarea() {
      return this.inputType == 'textarea'
    },
    backgroundColor() {
      return this.textarea ? 'transparent' : '#F4F5F7'
    },
    isDisabled() {
      return this.item.fieldsName === 'pipeAmount' || this.disabled
        ? true
        : false
    },
	isESerialNum() { // 输入框是交易流水号
		return this.item.fieldsName === 'eSerialNum'
	},
	placeholderText() {
		return this.isESerialNum ? '请填写交易单号后8位' : this.placeholder
	}
  },
  watch: {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.input-view-class {
  position: relative;
.input-item {
  background: #f4f5f7;
}
.content {
  padding-top: 20rpx;
  line-height: 45rpx;
  .txt {
    font-size: 24rpx;
    color: #999;
  }
}
.tip-span {
position: absolute;
    font-size: 28rpx;
    color: #FA5A49;
    left: 190rpx;
    top: -74rpx;
}
}

</style>
