<template>
  <view v-if="isFromReadonly" class="ml-amount-input is-readonly" :class="[className || '', {'is-right': align === 'right'}]">
    <view class="ml-amount-input-readonly-content">￥{{ amountLabel }}</view>
  </view>
  <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-amount-input not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
    <view class="ml-amount-input-simulate">
      <text v-if="inpVal">{{ inpVal }}</text>
      <text v-else class="ml-amount-input-placeholder">{{ placeholder }}</text>
    </view>
  </view>
  <view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border, 'is-disabled': disabled, 'is-clear': clearable && inpVal}, className]">
    <view class="ml-amount-input-warpper">
      <input
        v-model="inpVal"
        type="digit"
        class="ml-amount-input-inp"
        autocomplete="off"
        :placeholder="placeholder"
        :maxlength="maxLength"
        :disabled="disabled"
        @blur="blurEvent"
        @input="inputEvent" />
      <view v-if="clearable && !disabled && inpVal" class="ml-amount-input-clear-icon" @click.stop="clearEvent">
        <ml-icon name="delete-filling"></ml-icon>
      </view>
    </view>
    <view v-if="showTip" class="ml-amount-tip">{{ currAmountLabel }}</view>
  </view>
</template>

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

function eqEmptyNull (value) {
  return value === '' || XEUtils.eqNull(value)
}

export default {
  name: 'MlAmountInput',
  options: {
    virtualHost: true
  },
  props: {
    value: [String, Number],
    align: String,
    border: Boolean,
    min: [Number, String],
    max: {
      type: [Number, String],
      default: 9999999999
    },
    maxLength: {
      type: Number,
      default: 12
    },
    simplify: Boolean,
    digits: {
      type: [Number, String],
      default: 2
    },
    negative: Boolean,
    placeholder: {
      type: String,
      default: '请输入'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    },
    showTip: Boolean,
    clearable: Boolean,
    className: String
  },
  inject: {
    form: {
      from: 'mlForm',
      default: null
    }
  },
  data () {
    return {
      platformEnv: MaliUtils.getPlatformEnv(),
      inpVal: ''
    }
  },
  computed: {
    isFromReadonly () {
      return this.form ? this.form.readonly : false
    },
    currAmountNum () {
      return this.value === '' ? '' : Number(this.value || 0)
    },
    amountLabel () {
      if (this.simplify) {
        return MaliUtils.toWanAmountString(this.value)
      }
      return MaliUtils.toAmountString(this.value)
    },
    minNum () {
      if (XEUtils.isNumber(this.min) || this.min) {
        return Number(this.min || 0)
      }
      if (this.negative) {
        return -9999999999
      }
      return 0
    },
    maxNum () {
      if (XEUtils.isNumber(this.max) || this.max) {
        return Number(this.max)
      }
      return null
    },
    currAmountLabel () {
      return this.currAmountNum === '' ? '' : MaliUtils.toNumMoneyToChinese(this.currAmountNum)
    }
  },
  watch: {
    value (val) {
      if (!this.updateModel) {
        this.inpVal = val
      }
      this.updateModel = false
    },
    min () {
      this.checkValue()
    },
    max () {
      this.checkValue()
    }
  },
  created () {
    this.updateValue(this.value)
  },
  methods: {
    updateValue (value) {
      this.inpVal = eqEmptyNull(value) ? '' : XEUtils.toFixed(XEUtils.toNumber(value), this.digits)
    },
    checkValue  () {
      const numVal = XEUtils.toNumber(this.inpVal)
      if (this.minNum !== null && (numVal < this.minNum)) {
        this.updateModel = true
        this.updateValue(this.minNum)
        this.$emit('input', this.minNum)
        return { status: false, value: this.minNum }
      }
      if (this.maxNum !== null && (numVal > this.maxNum)) {
        this.updateModel = true
        this.updateValue(this.maxNum)
        this.$emit('input', this.maxNum)
        return { status: false, value: this.maxNum }
      }
      // 如果是空值，则不处理
      if (eqEmptyNull(this.inpVal) && eqEmptyNull(this.value)) {
        return { status: false, value: this.inpVal }
      }
      const val = XEUtils.floor(numVal, this.digits)
      if (`${val}` !== `${this.value}`) {
        this.updateModel = true
        this.updateValue(val)
        this.$emit('input', val)
        return { status: false, value: val }
      }
      return { status: true, value: numVal }
    },
    blurEvent () {
      const rest = this.checkValue()
      if (rest.status) {
        this.$nextTick(() => {
          this.updateValue(rest.value)
        })
      }
      this.$emit('blur', { value: this.inpVal })
    },
    inputEvent () {
      const value = this.inpVal
      this.$emit('input', value)
      this.$emit('change', { value })
    },
    clearEvent () {
      this.inpVal = ''
      this.inputEvent()
      this.$emit('clear', { value: this.inpVal })
    }
  }
}
</script>

<style lang="scss">
.ml-amount-input {
  position: relative;
  flex-grow: 1;
  .ml-amount-input-placeholder {
    color: $ml-input-color-placeholder;;
  }
  .ml-amount-input-readonly-content {
    padding: 20rpx 4rpx;
  }
  .ml-amount-input-simulate {
    padding: 0 10rpx;
    height: 70rpx;
    line-height: 70rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #ffffff;
  }
  &.is-right {
    .ml-amount-input-inp,
    .ml-amount-input-simulate {
      text-align: right;
    }
  }
  &.is-border {
    .ml-amount-input-clear-icon {
      border: 1px solid #e5e5e5;
      border-left: 0;
    }
    .ml-amount-input-inp,
    .ml-amount-input-simulate {
      border: 1px solid #e5e5e5;
      border-radius: $ml-border-radius;
    }
  }
  .ml-amount-tip {
    padding: 0 10rpx;
    font-size: $ml-describe-font-size;
  }
  .ml-amount-input-warpper {
    display: flex;
    flex-direction: row;
  }
  .ml-amount-input-inp {
    outline: 0;
    border: 0;
  }
  .ml-amount-input-inp,
  .ml-amount-input-simulate {
    font-size: $ml-base-font-size;
    width: 100%;
    height: 70rpx;
    padding: 0 10rpx;
  }
  .ml-amount-input-inp::-webkit-outer-spin-button,
  .ml-amount-input-inp::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .ml-amount-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;
  }
  &.is-clear {
    .ml-amount-input-inp {
      padding-right: 0;
      border-right: 0;
    }
  }
}
</style>
