
<template>
    <as-cell
        class="as-field"
        :required="required"
        :is-vertical="isVertical"
        align-item-center
        :label="label">
        <input
            @input="handleInput"
            @blur="handleBlur"
            @compositionstart="handleCompositionStart"
            @compositionend="handleCompositionEnd"
            class="as-field-input"
            :disabled="disabled"
            :value="value"
            :type="computedInputTypeAndMode.type"
            :inputmode="computedInputTypeAndMode.inputmode"
            :maxlength="maxlength"
            :placeholder="placeholder"
        />
        <van-icon
            v-if="computedShowClear"
            class="as-field-clear"
            name="clear"
            @touchstart="handleClear"
        />
        <span
            v-if="unit"
            class="as-field-unit"
        >{{ unit }}</span>
    </as-cell>
</template>

<script>
    import { Icon } from 'vant'
    import AsCell from '../as-cell'
    import { isNotEmpty } from '../../../plugins/utils/validator'
    import { filters } from '../../../plugins/filters'
    import { resetScroll } from 'vant/lib/utils/dom/reset-scroll'
    export default {
        name: 'AsField',
        props: {
            disabled: { type: Boolean, default: false },
            required: { type: Boolean, default: false },
            clearable: { type: Boolean, default: false },
            isVertical: { type: Boolean, default: false },
            fractionDigits: { type: [String, Number], default: '2' },
            label: { default: '' },
            pattern: { default: '' },
            value: { default: '' },
            type: { default: 'text' },
            maxlength: { default: '9999' },
            placeholder: { default: '请输入' },
            unit: { type: String, default: '' }
        },
        computed: {
            computedShowClear () {
                return isNotEmpty(this.value) && !this.disabled && this.clearable
            },
            computedInputTypeAndMode () {
                let result = { type: this.type, inputmode: this.type }
                if (this.type === 'digit')
                    result = { type: 'text', inputmode: 'decimal' }
                else if (this.type === 'number')
                    result = { type: 'tel', inputmode: 'numeric' }
                return result
            },
        },
        methods: {
            handleCompositionStart (e) {
                e.target.composing = true
            },
            handleCompositionEnd(e){
                e.target.composing = false
                this.handleInput(e)
            },
            handleInput (e) {
                if (e.target.composing) return
                let value = e.target.value
                value = isNotEmpty(value) ? String(value) : ''
                const { type, fractionDigits, pattern } = this
                // const { maxlength, type, fractionDigits, pattern } = this
                // if (isNotEmpty(maxlength) && value.length > maxlength) {
                //     value = value.slice(0, maxlength)
                // }
                if (type === 'number') {
                    // 数字
                    value = value.replace(/[^\d]/g, '')
                } else if (type === 'digit') {
                    // 小数
                    const reg = new RegExp(`^([1-9]\\d*|0)(\\.?\\d{0,${fractionDigits}})`, 'g')
                    const v = value.match(reg)
                    value = v ? v[0] : ''
                    if (value.startsWith('00')) value = +value
                }
                if (pattern) {
                    const typeOfPattern = typeof pattern
                    if (typeOfPattern === 'function')
                        value = pattern(value, this.value)
                    else if (typeOfPattern === 'object')
                        value = value.replace(typeOfPattern, '')
                    else if (typeOfPattern === 'string' && filters[pattern])
                        value = filters[pattern](value)
                }
                e.target.value = value
                if (value !== this.value) {
                    this.$emit('input', value)
                    this.$emit('change', value)
                }
            },
            handleBlur () {
                resetScroll()
            },
            handleClear (event) {
                event.preventDefault()
                this.$emit('input', '')
                this.$emit('change', '')
            },
        },
        components: {
            AsCell,
            VanIcon: Icon,
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-field{
        &-input{
            @extend %tar;
            @extend %c3;
            @extend %df1;
            font-size: j(14);
            border: none;
            //line-height: j(30);
            word-break: normal;
            background-color: transparent;
        }
        &-clear{
            @extend %df;
            @extend %aic;
            @extend %cp;
            @extend %jcc;
            margin-right: j(-8);
            color: #ccc;
            height: j(30);
            padding: 0 j(8);
            font-size: j(16);
        }
        &-unit{
            @extend %c3;
            margin-left: j(4);
        }
    }
</style>
