<template>
    <div class="nus_input"
        :class="[type==='textarea' && 'nus_textarea']"
        @click="_onClick"
        @tap="_onTap">
        <div class="nu_input-wrap"
            :class="[icon && 'nu_show-preIcon', myValue && sufIcon && 'nu_show-sufIcon']">
            <i class="nu_pre-icon"
                :class="[iconClass]"
                v-if="icon">
                {{ icon }}
            </i>
            <input
                class="nu_input"
                autocomplete="off"
                v-if="type !== 'textarea'"
                v-model="myValue"
                v-focus="{autofocus: autofocus}"
                v-bind="$props"
                v-on="$listeners"
                :name="controlName"
                @blur="_onBlur"
                @keydown="_onKeydown"/>
            <template v-else>
                <textarea
                    autocomplete="off"
                    class="nu_input"
                    v-model="myValue"
                    v-focus="{autofocus: autofocus}"
                    v-bind="$props"
                    v-on="$listeners"
                    :name="controlName"
                    @blur="_onBlur"
                    @keydown="_onKeydown">
                </textarea>
            </template>
            <i class="nu_suf-icon"
                :class="[iconClass]"
                v-if="!readonly && myValue && sufIcon"
                @click.stop="_onClear">
                {{ sufIcon }}
            </i>
            <!-- 车型库车入车牌在用 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { callFn, deviceInfo } from 'nimble-lib';
import FormTmp from '../_comm/FormTmp';
import vModel from '../../../Mixins/vModel';
import vueUse from '../../../_commons/helpers/vueUse';
import focus from '../../../Directives/focus';

export default {
    extends: FormTmp,
    name: 'NuInput',
    props: {
        /**
         * 最大长度
         */
        maxLen: {
            type: Number
        },
        /**
         * 是否自动聚焦
         */
        autofocus: {
            type: Boolean,
            default: false
        },
        /**
         * 前缀图标
         */
        icon: {
            type: String
        },
        /**
         * 图标class
         */
        iconClass: {
            type: String,
            default: 'nu_icon'
        },
        /**
         * 后缀图标
         */
        sufIcon: {
            type: String,
            default: '\ue606'
        },
        /**
         * 底纹字
         */
        placeholder: {
            type: String,
            default: ''
        },
        /**
         * 是否为只读
         */
        readonly: {
            type: Boolean,
            default: false
        },
        /**
         * 文本框类型
         */
        type: {
            type: String,
            default: 'text'
        },
        /**
         * 文本框名称
         */
        controlName: {
            type: String,
            default: ''
        },
        /**
         * 是否强制为数字
         */
        isNumber: {
            type: Boolean,
            default: false
        },
        /**
         * 按键过滤器
         */
        keyDownFilter: {
            type: Function
        }
    },
    mixins: [vModel({
        /**
         * 监听表单的值
         * @param {String} nowVal 表单值
         * @returns {Boolean}
         */
        myValueChange(nowVal) {
            let _that = this;
            let _nowval = nowVal;
            let _maxLen = _that.maxLen;
            let _islen = _maxLen && (_maxLen >= (nowVal || '').length);
            // 防止粘贴
            if (_that.isNumber && _nowval !== '-' && !/\d*\.\d*/.test(_nowval)) {
                _nowval = parseFloat(_nowval);
                if (isNaN(_nowval)) {
                    _nowval = '';
                } else {
                    _nowval += '';
                }
            }
            // 防止粘贴
            if (_maxLen && !_islen) {
                _nowval = _nowval.slice(0, _maxLen);
            }
            if (_nowval != nowVal) {
                _that.myValue = _nowval;
                return false;
            } else {
                return true;
            }
        }
    })],
    beforeCreate() {
        vueUse(this.constructor, focus);
    },
    methods: {
        /**
         * 清除内容
         */
        _onClear () {
            const _that = this;
            _that.myValue = '';
            _that.$emit('clear', _that.myValue);
        },
        /**
         * 失去焦点
         * @param {Event} evt 事件对象
         */
        _onBlur (evt) {
            const _that = this;
            const _target = evt && evt.target;
            if (deviceInfo.ios) {
                setTimeout(() => {
                    callFn(_target.scrollIntoViewIfNeeded || _target.scrollIntoView, [], _target);
                    let scrollTop = document.documentElement.scrollTop;
                    document.documentElement.scrollTop = 0;
                    setTimeout(() => {
                        document.documentElement.scrollTop = scrollTop;
                    });
                }, 20);
            }
            _that.$emit('blur', evt);
        },
        /**
         * 按键按下事件
         * @param {Event} evt 事件对象
         */
        _onKeydown (evt) {
            const _that = this;
            let _maxLen = _that.maxLen;
            let _val = (_that.myValue || '') + '';
            let _islen = _maxLen && (_maxLen > _val.length);
            let _keyCode = evt.keyCode;
            let _minus = (_that.isNumber || _that.type === 'number') && (_keyCode === 109 || _keyCode === 189);
            let _decimal = _that.isNumber && (_keyCode === 110 || _keyCode === 190);
            let _isNumber = (_keyCode >= 48 && _keyCode <= 57) || (_keyCode >= 96 && _keyCode <= 105) || _decimal;
            let _isCtrlBtn = (_keyCode >= 8 && _keyCode <= 46) || (_keyCode !== 110 && _keyCode >= 106 && _keyCode <= 137);
            let _isDecimal = _decimal && ((_val.match(/\.|\./g) || []).length > 0 || (!_val && _val !== 0));
            let _isMinus = _minus && ((!isNaN(parseFloat(_val)) && parseFloat(_val) <= 0) || !/^-/.test(_val));
            if (((!_isMinus || (_that._tempValueMinus && _minus)) && !_isCtrlBtn && ((_maxLen && !_islen) ||
                ((_that.type === 'number' || _that.isNumber) && (!_isNumber || _isDecimal)))) ||
                callFn(_that.keyDownFilter, [{
                    isNumber: !!_isNumber, // 是数字
                    isCtrl: _isCtrlBtn, // 是控制键
                    isDecimal: _isDecimal, // 是小数点
                    isMinus: _isMinus, // 是负号
                    keyCode: _keyCode
                }])) {
                evt.preventDefault();
            }
            _that._tempValueMinus = _minus;
            _that.$emit('keydown', evt);
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_input {
    width: 100%;
    height: $nuinput-height;
    display: inline-block;
    &.nus_textarea {
        height: 90px;
    }
    .nu_input-wrap,.nu_input {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .nu_input {
        box-sizing: border-box;
        background: none;
        border: none;
        resize: none;
        padding: 6px 8px;
        line-height: 26px;
        &[type="search"]{
            -webkit-appearance: none;
            &::-webkit-search-cancel-button{
                display: none;
            }
        }
        &[type="number"]{
            -moz-appearance:textfield;
            -webkit-appearance: none;
            appearance: none;
            &::-webkit-outer-spin-button,&::-webkit-inner-spin-button{
                -webkit-appearance: none;
                appearance: none;
                margin: 0;
            }
        }
    }
    .nu_show-preIcon {
        .nu_input {
            padding-left: 30px;
        }
    }
    .nu_show-sufIcon {
        .nu_input {
            padding-right: 20px;
        }
    }
    .nu_pre-icon, .nu_suf-icon {
        position: absolute;
        display: inline-block;
        user-select: none;
        top: 50%;
        transform: translateY(-50%);
        color: $nuinput-icon-color;
        cursor: pointer;
        @include iconPadding()
    }
    .nu_pre-icon {
        left: 5px;
        pointer-events: none;
    }
    .nu_suf-icon {
        right: 2px;
    }
}
</style>
