<template>
  <view v-if="isFromReadonly" class="ml-input is-readonly" :class="[className || '', {'is-right': align === 'right'}]" @tap="tapEvent">
    <view class="ml-input-readonly-content">{{ inpVal }}</view>
  </view>
  <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-input not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-disabled': isFormDisabled}]" @tap="tapEvent">
    <view class="ml-input-simulate">
      <text v-if="inpVal">{{ inpVal }}</text>
      <text v-else class="ml-input-placeholder">{{ translate(placeholder) }}</text>
    </view>
  </view>
  <view v-else class="ml-input" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-prefix': hasPrefix || type === 'search', 'is-suffix': hasSuffix, 'is-disabled': isFormDisabled, 'is-clear': clearable && inpVal}]">
    <view v-if="hasPrefix || type === 'search'" class="ml-input-prefix-icon">
      <slot name="prefix">
        <ml-icon v-if="prefixIcon" :name="prefixIcon"></ml-icon>
        <ml-icon v-else name="search"></ml-icon>
      </slot>
    </view>
    <input
      v-model="inpVal"
      class="ml-input-inp"
      :autocomplete="autocomplete"
      :type="type"
      :confirm-type="type === 'search' ? 'search' : 'done'"
      :placeholder="translate(placeholder)"
      :maxlength="maxlength"
      :disabled="isFormDisabled"
      @tap="tapEvent"
      @input="inputEvent"
      @focus="focusEvent"
      @blur="blurEvent"
      @confirm="confirmEvent"/>
    <view v-if="clearable && !isFormDisabled && inpVal" class="ml-input-clear-icon" @click.stop="clearEvent">
      <ml-icon name="delete-filling"></ml-icon>
    </view>
    <view v-if="hasSuffix" class="ml-input-suffix-icon">
      <slot name="suffix">
        <ml-icon :name="suffixIcon"></ml-icon>
      </slot>
    </view>
  </view>
</template>

<script>
import MaliUtils from '../../../utils'
import MaliI18n from '../../../i18n/i18n'
import XEUtils from 'xe-utils'

export default {
  name: 'MlInput',
  options: {
    styleIsolation: 'shared',
    virtualHost: true
  },
  props: {
    value: [Number, String],
    type: {
      type: String,
      default: 'String'
    },
    align: String,
    border: Boolean,
    disabled: Boolean,
    prefixIcon: String,
    suffixIcon: String,
    clearable: Boolean,
    readonly: Boolean,
    autocomplete: {
      type: String,
      default: 'off'
    },
    editable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: 'ml.base.pleaseInput'
    },
    maxlength: {
      type: [String, Number],
      default: 100
    },
    className: String
  },
  inject: {
    form: {
      from: 'mlForm',
      default: null
    },
    formItem: {
      from: 'mlFormItem',
      default: null
    }
  },
  data () {
    return {
      platformEnv: MaliUtils.getPlatformEnv(),
      inpVal: ''
    }
  },
  computed: {
    isFromReadonly () {
      if (this.readonly) {
        return true
      }
      return this.form ? this.form.readonly : false
    },
    isFormDisabled () {
      if (this.disabled) {
        return true
      }
      return this.formItem ? this.formItem.isFormDisabled : false
    },
    hasSuffix () {
      return this.$slots.suffix || this.suffixIcon
    },
    hasPrefix () {
      return this.$slots.prefix || this.prefixIcon
    }
  },
  watch: {
    value (val) {
      this.inpVal = XEUtils.toValueString(val)
    }
  },
  created () {
    this.inpVal = XEUtils.toValueString(this.value)
  },
  methods: {
    translate: MaliI18n.t,
    inputEvent () {
      const value = this.inpVal
      this.$emit('input', value)
      this.$emit('change', { value })
    },
    tapEvent () {
      this.$emit('tap', {})
      this.$emit('click', {})
    },
    focusEvent () {
      this.$emit('focus', { value: this.inpVal })
    },
    blurEvent () {
      this.$emit('blur', { value: this.inpVal })
    },
    confirmEvent () {
      const value = this.inpVal
      this.$emit('confirm', { value })
    },
    clearEvent () {
      this.inpVal = ''
      this.inputEvent()
      this.$emit('clear', { value: this.inpVal })
    }
  }
}
</script>

<style lang="scss">
.ml-input {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  .ml-input-placeholder {
    color: $ml-input-color-placeholder;
  }
  &.is-disabled {
    color: $ml-disabled-color;
    .ml-input-placeholder {
      color: $ml-disabled-color;
    }
  }
  .ml-input-simulate {
    padding: 0 10rpx;
    height: 70rpx;
    line-height: 70rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #ffffff;
  }
  .ml-input-readonly-content {
    padding: 20rpx 4rpx;
  }
  .ml-input-inp {
    outline: 0;
    border: 0;
  }
  .ml-input-inp,
  .ml-input-simulate {
    padding: 0 10rpx;
    height: 70rpx;
    width: 100%;
    font-size: $ml-base-font-size;
  }
  .ml-input-clear-icon {
    width: 60rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: $ml-input-clear-icon-color;
    font-size: $ml-input-clear-icon-font-size;
    border-radius: 0 $ml-border-radius $ml-border-radius 0;
  }
  .ml-input-prefix-icon,
  .ml-input-suffix-icon {
    min-width: 70rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 34rpx;
    color: rgba(0, 0, 0, 0.4);
    ::v-deep .ml-button.type-button {
      height: 67rpx !important;
      line-height: 67rpx !important;
      border: none;
    }
  }
  .ml-input-prefix-icon {
    border-right: 0;
  }
  .ml-input-suffix-icon {
    border-left: 0;
  }
  &.is-right {
    .ml-input-inp,
    .ml-input-simulate {
      text-align: right;
    }
  }
  &.is-border {
    .ml-input-clear-icon {
      border: 1px solid #e5e5e5;
      border-left: 0;
    }
    .ml-input-inp,
    .ml-input-simulate {
      border: 1px solid #e5e5e5;
      border-radius: $ml-border-radius;
    }
  }
  &.is-prefix {
    &.is-border {
      .ml-input-prefix-icon {
        border: 1px solid #e5e5e5;
        border-right: 0;
      }
    }
    .ml-input-prefix-icon {
      border-radius: $ml-border-radius 0 0 $ml-border-radius;
    }
    .ml-input-inp {
      border-left: 0;
      border-radius: 0 $ml-border-radius $ml-border-radius 0;
    }
  }
  &.is-suffix {
    &.is-border {
      .ml-input-suffix-icon {
        border: 1px solid #e5e5e5;
        border-left: 0;
      }
    }
    .ml-input-clear-icon {
      border-radius: 0;
      border-right: 0;
    }
    .ml-input-suffix-icon {
      border-radius: 0 $ml-border-radius $ml-border-radius 0;
    }
    .ml-input-inp {
      border-right: 0;
      border-radius: $ml-border-radius 0 0 $ml-border-radius;
    }
  }
  &.is-clear {
    .ml-input-inp {
      padding-right: 0;
      border-right: 0;
    }
  }
  &.is-prefix.is-suffix {
    .ml-input-inp {
      border-radius: 0;
    }
  }
}
</style>
