<template>
  <div class="name_editor">
    <input
      ref="name_input_dom"
      class="input_text"
      type="text"
      placeholder="请输入存证名称"
      :readonly="!operation"
      :value="value"
      maxlength="50"
      @input="emitChange"
      @keyup.enter="$event.target.blur()"
      :class="{ noMsg: value.trim().length === 0 }"
      :style="getWidth"
    />
    <i
      class="iconfont icon_edit iconpen"
      v-if="operation"
      @click="startEdit"
    ></i>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class NameEditor extends Vue {
  @Prop() value!: string;
  @Prop() operation!: Boolean;
  public inputW: string = "177px";
  get getWidth() {
    return {
      width: this.inputW,
    };
  }
  @Watch("value")
  public onChange(newVal: number, oldVal: number) {
    if (this.value.length === 0) {
      this.inputW = "177px";
    }
    // else if (localStorage.getItem("bootPage") === "show2") {
    //   this.inputW = "240px";
    // }
    else {
      if (this.inputW === "250px") return false;
      this.inputW = this.value.length * 25 + "px";
    }
  }
  created() {
    this.startEdit();
  }

  public startEdit() {
    this.$nextTick(() => {
      (this.$refs.name_input_dom as HTMLInputElement).focus();
    });
  }
  public emitChange(e: any) {
    this.$emit("input", e.target.value);
  }
}
</script>

<style scoped lang="less">
.name_editor {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
}
.icon_edit {
  vertical-align: middle;
  margin-left: 13px;
  color: #e1e1e1;
  font-size: 18px;
  cursor: pointer;
}

.noMsg {
  caret-color: #c4c4c4;
}
.input_text {
  vertical-align: middle;
  color: #000;
  font-family: inherit;
  border: none;
  padding: 0;
  outline: none;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    text-indent: 6px;
    color: #c4c4c4;
    font-size: 24px;
    font-weight: 600;
    color: rgba(196, 196, 196, 1);
  }
  &:-moz-placeholder {
    text-indent: 6px;
    color: #c4c4c4;
    font-size: 24px;
    font-weight: 600;
    color: rgba(196, 196, 196, 1);
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */

    text-indent: 6px;
    color: #c4c4c4;
    font-size: 24px;
    font-weight: 600;
    color: rgba(196, 196, 196, 1);
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */

    text-indent: 6px;
    color: #c4c4c4;
    font-size: 24px;
    font-weight: 600;
    color: rgba(196, 196, 196, 1);
  }
}
</style>
