<template>
  <div class="input-class">
    <div class="wrapper-label" v-if="label">
      <label class="input-label"> {{label}} </label>
      <span class="error" v-if="showError">{{error}}</span>
    </div>
    <slot>
      <input ref="input" class="wrapper-input" :placeholder="placeHolder" :value="inputValue" @input="onInputChange" @blur="validate"/>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'CInput',
  props: {
    value: {
      type: [String, Number],
      default() {
        return '';
      }
    },
    label: {
      type: String,
      default() {
        return '';
      }
    },
    placeHolder: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      inputValue: this.value,
      error: '不能为空',
      showError: false
    };
  },
  methods: {
    onInputChange() {
      this.inputValue = this.$refs.input.value;
      this.$emit('input', this.$refs.input.value);
    },
    setShowError(status = true) {
      this.showError = status;
    },
    validate() {
      if (!this.inputValue) {
        this.showError = true;
        return false;
      } else {
        this.showError = false;
        return true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>

.input-label {
  font-size: 36px;
  display: inline-block;
  font-weight: bold;
}

.wrapper-label {
  margin-bottom: 30px;
}

.wrapper-input {
  font-size: 28px;
  width: 100%;
  line-height: 1;
}

.error {
  margin-left: 12px;
  color: #d0021b;
}

::-webkit-input-placeholder {
  color: #aaa;
}

</style>