<template>
  <section class="AiEditInput" :class="{[align]:true,error}">
    <el-input v-if="edit" size="small" v-model="content" @change="handleChange" @blur="cancel" clearable autofocus/>
    <div class="valueText" v-else v-text="value" @click="edit=true"/>
  </section>
</template>

<script>
export default {
  name: "AiEditInput",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {default: ""},
    align: {default: ""},
    error: Boolean
  },
  data() {
    return {
      edit: false,
      content: ""
    }
  },
  methods: {
    cancel() {
      this.edit = false
    },
    handleChange(v) {
      this.$emit('change', v)
      this.$emit('update:error', false)
    }
  },
  watch: {
    edit(v) {
      v && (this.content = this.$copy(this.value))
    }
  }

}
</script>

<style lang="scss" scoped>
:deep(.AiEditInput ){
  &.error {
    background: rgba(#f46, .2);
  }

  input {
    text-align: center;
  }

  .valueText {
    width: 100%;
    height: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &.left {
    input {
      text-align: left
    }

    .valueText {
      justify-content: flex-start;
    }
  }
}
</style>
