<template>
  <div class="dialog_input">
    <input
      :value="value"
      type="text"
      class="input"
      :class="{ 'js-input_error': errorShowing && value.length === 0 }"
      @input="handleInput"
      v-bind="$attrs"
      maxlength="10"
    />
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class DialogInput extends Vue {
  @Prop({ type: String, required: true }) value!: string;
  @Prop({ type: Boolean, default: false }) errorShowing!: boolean; // 当前显示错误 todo 改为sync
  public handleInput(e: any) {
    const val = e.target.value;
    this.$emit("input", val);
  }
}
</script>
<style scoped>
.dialog_input {
  display: inline-block;
}
.input {
  box-sizing: border-box;
  padding: 0 26px;
  width: 500px;
  height: 44px;
  border: 1px solid #e2e2e2;
  outline: none;
  font-size: 18px;
  color: #797d84;
}
.js-input_error {
  border: 1px solid rgba(208, 2, 27, 0.5);
}
.input::placeholder {
  color: #c0c6d2;
}
</style>
