<template>
  <view class="zui-input">
    <input class="input" v-model="model" :type="type" :disabled="disabled" :placeholder="placeholder"
      :maxlength="maxlength" placeholder-class="zui-input__placeholder" @input="onInput" @blur="onBlur" @focus="onFocus" :style="{backgroundColor
      : flag && !disabled ? '#f5f7fa' : '',borderRadius
      : flag && !disabled ? '5px' : ''}"/>
    <view v-if="clearable && !disabled && ![undefined, null, ''].includes(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, Number],
      type: {
        type: String,
        default: 'text'
      },
      placeholder: {
        type: String,
        default: '请输入'
      },
      clearable: Boolean,
      disabled: Boolean,
      maxlength: {
        type: Number,
        default: 99
      },
      flag: {
        type: Boolean,
        default: false
      }
    },
    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);
      },
      onBlur: function(e) {
        const value = e.detail.value;
        this.$emit('blur', value);
      },
      onClear: function() {
        this.model = '';
        this.$emit('input', '');
        this.$emit('clear');
      },
      onFocus: function() {
        this.$emit('focus')
      }
    }
  }
</script>

<style lang="scss">
  .zui-input {
    display: flex;
    width: 100%;

    .input {
      flex: auto;
      width: 100%;
      font-size: inherit;
    }

    &__placeholder {
      color: $color-text-placeholder;
      font-weight: normal;
    }

    &__close {
      padding-left: $padding-xs;
      color: $color-text-minor;
      display: inline-flex;
      align-items: center;
    }
  }
</style>
