<template>
  <view class="cv-input-text">
    <input
      class="cv-input__content"
      placeholder-class="cv-input__placeholder"
      v-model="localVal"
      type="idcard"
      :maxlength="maxlength"
      :disabled="disabled"
      :placeholder="placeholder"
      @input="funcOnInput"
      @blur="onBlur"
    />
    <!-- 输入框右侧信息 -->
    <view class="cv-input__right">
      <!-- 清空 -->
      <view class="cv-input__clear" @click="onEmpty" v-if="clearable == true && localVal != ''">X</view>
    </view>
  </view>
</template>
<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvInputIdcard',
  emits: ['input', 'update:modelValue'],
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    modelValue: {
      type: [Number, String],
      default: ''
    },
    placeholder: {
      type: [String],
      default: '请输入身份证'
    },
    disabled: {
      type: [Boolean],
      default: false
    },
    clearable: {
      type: [Boolean],
      default: false
    },
    maxlength: {
      type: [Number, String],
      default: -1
    }
  },
  data() {
    return {
      localStyle: '',
      localVal: ''
    };
  },
  watch: {
    value(newVal) {
      this.localVal = newVal;
    },
    modelValue(newVal) {
      this.localVal = newVal;
    }
  },
  created() {
    this.localVal = this.doValueGet();
  },
  mounted() {
    this._itemStyle();
  },
  methods: {
    doValueGet() {
      if (this.value === '') return this.modelValue;
      if (this.modelValue === '') return this.value;
      return this.value;
    },
    _itemStyle() {
      /* 计算输入框右侧预留空间 */
      let paddingRight = 0;
      if (this.$slots['append']) {
        paddingRight += 20;
      }
      if (this.clearable) {
        paddingRight += 30;
      }
      this.localStyle = 'margin-right:' + paddingRight + 'px;';
    },
    onBlur(e) {
      this.localVal = e.detail.value;
      this.funcOnInput();
    },
    funcOnInput(e) {
      this.$emit('input', this.localVal);
      this.$emit('update:modelValue', this.localVal);
    },
    /* 监听自己清除按钮点击事件 */
    onEmpty() {
      this.localVal = '';
      this.funcOnInput();
    }
  }
};
</script>
<style>
@import '../cv-input-text/input.css';
</style>
