<template>
    <label :class="[$style.inputWrap,isFocus&&$style.focus,required&&$style.required,plain&&$style.plain,disabled&&$style.disabled]">
        <div :style="{paddingRight:type=='number'?'4PX':null}">
            <div :class="$style.prefix">
                <slot name="prefix"/>
            </div>
            <input
                :class="$style.input"
                :name="name"
                :type="origin2native"
                :step="defaultOption.step"
                :placeholder="placeholder"
                :value="value"
                :disabled="disabled"
                :max="defaultOption.max"
                :min="defaultOption.min"
                :maxlength="defaultOption.maxlength"
                :minlength="defaultOption.minlength"
                @input="input"
                @focus="focus"
                @blur="blur"
                autocomplete="new-password"
            />
            <div :class="$style.suffix">
                <slot name="suffix"/>
            </div>
        </div>
    </label>
</template>

<script>
    const getDefaultOption=function(){
        let options={};
        switch(this.type){
            case 'price':
            case 'PRICE':
                options.max=10000000;
                options.step=0.1;
                options.min=0;
                break;
            case 'discount':
            case 'DISCOUNT':
                options.max=10;
                options.step=1;
                options.min=0;
                break;
            case 'piece':
            case 'PIECE':
                options.max=10000000;
                options.step=1;
                options.min=0;
                break;
            case 'integer':
            case 'INTEGER':
                options.step=1;
                options.min=0;
                break;
        }
        for(let item of ['step','maxlength','minlength','max','min']){
            let v=Number(this[item]),obj={};
            if(!v&&v!==0){
                continue;
            }
            obj[item]=v;
            options={
                ...options,
                ...obj
            };
        }
        return options;
    };
    export default {
        name: "Input",
        props:{
            value:{},
            name:{
                type:String,
                default:''
            },
            type:{
                type:String,
                default:'text'
            },
            placeholder:{
                type:String,
                default:''
            },
            required:{
                type:Boolean
            },
            plain:{
                type:Boolean
            },
            disabled:{
                type:Boolean,
                default:false
            },
            step:{},
            maxlength:{},
            minlength:{},
            max:{},
            min:{},
            forceBlurReset:{
                type:Boolean,
                default:false
            },

            allowEmpty:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                isFocus:false
            }
        },
        computed:{
            origin2native(){
                switch(this.type){
                    case 'price':
                    case 'PRICE':
                    case 'piece':
                    case 'PIECE':
                    case 'integer':
                    case 'INTEGER':
                    case 'discount':
                    case 'DISCOUNT':
                        return 'text';
                    default:
                        return this.type;
                }
            },
            defaultOption(){
                return getDefaultOption.call(this);
            }
        },
        methods:{
            focus(e){
                this.$emit('focus',e);
                this.isFocus=true;
            },
            blur(e){
                this.$emit('blur',e);
                this.isFocus=false;
                let value=e.target.value;
                if(!this.forceBlurReset&&(value===''||value===null)){
                    return;
                }
                let options=getDefaultOption.call(this);
                switch(this.type){
                    case 'discount':
                    case 'DISCOUNT':
                        value=Number(isNaN(value)?options.max||9:value).toFixed(1);
                        break;
                    case 'price':
                    case 'PRICE':
                        value=Number(isNaN(value)?options.min||0:value).toFixed(2);
                        break;
                    case 'piece':
                    case 'PIECE':
                    case 'integer':
                    case 'INTEGER':
                        value=Number(isNaN(value)?options.min||0:value).toFixed(0);
                        break;
                    default:
                        break;
                }
                if(options.max!==undefined&&Number(value)>Number(options.max)){
                    value=options.max;
                }
                else if(options.min!==undefined&&Number(value)<Number(options.min)){
                    value=options.min;
                }
                this.$emit('input',value);
            },
            input(e){
                let value=e.target.value;
                switch(this.type){
                    case 'discount':
                    case 'DISCOUNT':
                    case 'price':
                    case 'PRICE':
                    case 'piece':
                    case 'PIECE':
                    case 'integer':
                    case 'INTEGER':
                        debugger;
                        if(
                            (
                                !/\d|\./.test(e.data)
                                ||(
                                    /\./.test(e.data)
                                    &&this.value.match(/\./)
                                    &&this.value.match(/\./).length>=1
                                )
                            )
                            &&!this.allowEmpty){
                            value=this.value;
                        }
                        break;
                    default:
                        break;
                }
                this.$emit('input',value);
            }
        }
    }
</script>

<style module lang="scss">
    @value FormItemBorderColor,FormItemBorderColor_Focus,FormItemTextColor from '../../cssInjection/stylization.scss';
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';
    .inputWrap{
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        width: 200px;
        min-width: 60PX;
        max-width: 100%;
        height: 2.5em;
        border: 1PX solid FormItemBorderColor;
        border-radius: 0PX;
        background-color: #FFF;
        &.required{
            border-left: 2PX solid #FF0000;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        &.focus{
            border: 1PX solid FormItemBorderColor_Focus !important;
            border-radius: 4PX !important;
        }
        &.plain{
            border-radius: 0px !important;
            height: 2em;
        }
        >div{
            width: 100%;
            height: 100%;
            @extend %FlexRowBetweenCenter;
            padding: 0 14px;
            >.input{
                font-size: 1em;
                display: flex;
                flex: 1;
                border: none;
                box-shadow: none;
                outline: none;
                color: FormItemTextColor;
                max-width: 100%;
                @include InputPlaceholderStyle();
            }
            >div{
                &.prefix,&.suffix{
                    color: #333333;
                    font-size: 18px;
                    @extend %FlexRowCenter;
                    &:empty{
                        display: none;
                    }
                }
                &.prefix{
                    margin-left: 14px;
                }
                &.suffix{
                    margin-right: 14px;
                }
            }
        }

    }
</style>