<template>
  <view class="zui-input">
    <input v-model="model" :type="type" :disabled="disabled" :placeholder="placeholder" placeholder-class="zui-input__placeholder" @input="onInput" />
    <view v-if="clearable && model" class="zui-input__close" @click="onClear">
      <zui-icon name="close"></zui-icon>
    </view>
  </view>
</template>

<script>
import ZuiIcon from '../icon/index.vue';

export default {
  components: {
    ZuiIcon,
  },
  props: {
    value: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    clearable: Boolean,
    disabled: Boolean,
  },
  data: function() {
    return {
      model: this.value,
    }
  },
  watch: {
    value: function(val) {
      this.model = val;
    }
  },
  methods: {
    onInput: function(e) {
      const value = e.detail.value;
      this.$emit('input', value);
    },
    onClear: function() {
      this.model = undefined;
      this.$emit('input', undefined);
      this.$emit('clear');
    }
  }
}
</script>

<style lang="scss">
.zui-input {
  display: flex;
  width: 100%;
  input {
    flex: auto;
    width: 100%;
  }
  &__placeholder {
    color: $color-border;
  }
  &__close {
    padding-left: $v-gap-sm;
    color: $color-text-minor;
  }
}
</style>
