<template>
  <div class="mt-show-input">
    <input
      ref="input"
      :class="inputTypeClass"
      v-model="value"
      :readonly="!isEdit"
      :placeholder="placeholder"
      @click="handleClick"
      @blur="handleBlur"
    />
    <div class="icon" @click="handleIconClick">
      <slot name="icon"></slot>
    </div>
  </div>



</template>

<script>
  export default {
    name: 'mt-show-input',
    data() {
      return {
        isEdit: false,
        value: this.text
      }
    },
    props: ['text', 'placeholder'],
    model: {
      prop: 'text',
      event: 'change'
    },
    computed: {
      inputTypeClass() {
        return {
          'text': !this.isEdit,
          'has-icon': this.$slots.icon
        }
      }
    },
    watch: {
      text(newVal) {
        this.value = newVal
      },
      value(newVal) {
        this.$emit('change', newVal)
      }
    },
    methods: {
      toggleInputType(e) {
        this.isEdit = !this.isEdit
        console.log('toggleInputType', e)
        if (e.type === 'blur') {
          this.$emit('blur')
        }
      },
      handleClick() {
        if (!this.isEdit) {
          this.isEdit = !this.isEdit
        }
      },
      handleIconClick() {
        if (!this.isEdit) {
          this.isEdit = !this.isEdit
        }
        this.$refs.input.focus()
      },
      handleBlur() {
        this.isEdit = false
        this.$emit('blur')
      }
    },
    mounted() {
      console.log('mt-show-input', this.$scopedSlots, this.$slots)
    }
  }
</script>

<style scoped>
  .mt-show-input {
    position: relative;
  }
  input {
    border: none;
    border-bottom: black 1px solid;
  }
  input:focus {
    border: none;
    border-bottom: black 1px solid;
    outline-offset: 0;
    outline: none;
  }
  .text {
    /*background-color: black;*/
    border: none;
  }
  .has-icon{
    padding-right: 35px;
  }

  .text:focus {
    /*background-color: black;*/
    outline-offset: 0;
    outline: none;
  }
  .icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    cursor: pointer;
  }
</style>
