<template>
  <div>
    <h1>待办事项</h1>

    <div class="input-wrapper">
      <input
        placeholder="请输入您的待办事项，按下回车后即可添加"
        v-model.trim="newTodo"
        @keyup.enter="addNewTodo"
      />
    </div>

    <p v-show="isShowMsg" style="color: red">
      最多输入{{ countLimit }}个字符！！！
    </p>
  </div>
</template>

<script>
const WORD_COUNT_LIMIT = 50;

export default {
  data() {
    return {
      newTodo: "",
      countLimit: WORD_COUNT_LIMIT,
    };
  },

  computed: {
    isShowMsg() {
      return this.newTodo.length > WORD_COUNT_LIMIT;
    },
  },

  methods: {
    addNewTodo() {
      if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
        return;
      }

      this.$emit("addTodo", this.newTodo);
      this.newTodo = "";
    },
  },
};
</script>

<style scoped>
h1 {
  color: #409eff;
  text-align: center;
  margin-bottom: 20px;
}

input {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #409eff;
  border-radius: 6px;
  outline: none;
  display: block;
  box-sizing: border-box;
}

input {
  -webkit-text-size-adjust: 100%;
}

.input-wrapper {
  display: flex;
  justify-content: center;
}

input:focus {
  border-color: #409eff;
  box-shadow: 0 0 4px rgba(64, 158, 255, 0.5);
}

p {
  margin-top: 8px;
  color: red;
  font-size: 14px;
  text-align: center;
}
</style>
