<template>
  <div class="vnp-input-box">
    <ul>
      <li
        v-for="(item, index) in val"
        :key="index"
        :class="{ active: activeIndex === index }"
        @click="handleClickItem(index)"
      >
        <span>{{ item }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    editable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      val: ["", "", "", "", "", "", "", ""],
      activeIndex: this.editable ? 0 : undefined,
    };
  },
  watch: {
    activeIndex() {
      this.$emit("activeChange", this.activeIndex);
    },
    value: {
      immediate: true,
      handler() {
        if (this.val.join("") === this.value) {
          return;
        }
        const val = this.value.split("");
        if (this.editable) {
          this.activeIndex = val.length;
        }
        while (val.length < 8) {
          val.push("");
        }
        this.val = val;
      },
    },
    val() {
      this.$emit("input", this.val.join(""));
    },
  },
  methods: {
    handleClickItem(index) {
      if (!this.editable) {
        return;
      }
      this.activeIndex = index;
    },
    setValue(val) {
      this.$set(this.val, this.activeIndex, val);
      if (this.activeIndex < 7) {
        this.activeIndex += 1;
      }
    },
    del() {
      this.$set(this.val, this.activeIndex, "");
      if (this.activeIndex > 0) {
        this.activeIndex -= 1;
      }
    },
  },
}
</script>

<style lang="less" scoped>
  .vnp-input-box {
    padding: 10px 0;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    color: #8d8d8d;
    font-size: 15px;
    text-align: center;

    ul {
      display: flex;
    }
    li {
      flex: 1;
      border-right: 1px solid #eaeaea;
      height: 28px;
      line-height: 28px;

      &:first-child {
        border-color: #a6a6a6;
        flex: 1.3;
      }
      &:last-child {
        border: none;
      }
      &.active {
        color: #1989fa;

        > span {
          height: 100%;
          width: 20px;
          display: inline-block;
          border-bottom: 1px solid #1989fa;
        }
      }
    }
  }
</style>
