<template>
    <div class="nus_search">
        <form action @submit="_onSubmit">
            <div class="nu_search-wrap">
                <nu-input
                    class="nu_search-input"
                    v-model="myValue"
                    v-bind="$props"
                    v-on="$listeners"
                    :type="'search'"
                    @focus="_onFocus"
                    @blur="_onBlur">
                </nu-input>
            </div><div class="nu_search-btn"
                v-if="btnText"
                ref="hook_btn"
                :style="btnStyle"
                @click="_clickBtn">
                <div class="nu_btn-text">{{ btnText }}</div>
            </div>
        </form>
    </div>
</template>

<script>
import { getStyle } from 'nimble-lib';
import vModel from '../../../Mixins/vModel';
import FormTmp from '../_comm/FormTmp';
import NuInput from '../input';
import confirm from '../../../Mixins/confirm';

export default {
    extends: FormTmp,
    name: 'NuSearch',
    components: {
        NuInput
    },
    props: {
        /**
         * 是否自动聚焦
         */
        autofocus: {
            default: false
        },
        /**
         * 底纹字
         */
        placeholder: {
            default: '搜索'
        },
        /**
         * 取消的文案
         */
        btnText: {
            default: '取消'
        },
        /**
         * 前缀icon
         */
        icon: {
            type: String,
            default: '\ue612'
        },
        /**
         * 后缀图标
         */
        sufIcon: {
            type: String
        },
        /**
         * 文本框名称
         */
        controlName: {
            type: String
        },
        /**
         * 是否固定按钮一直显示
         */
        fixed: {
            type: Boolean,
            default: false
        },
        /**
         * 点击按钮是否清除值
         */
        isBtnClear: {
            type: Boolean,
            default: true
        }
    },
    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 (_maxLen && !_islen) {
                _nowval = _nowval.slice(0, _maxLen);
            }
            if (_nowval != nowVal) {
                _that.myValue = _nowval;
                return false;
            } else {
                return true;
            }
        }
    }), confirm()],
    data () {
        return {
            focused: false, // input是否处于focus状态
            btnWidth: 45 // 按钮的宽度
        };
    },
    computed: {
        /**
         * 按钮样式
         * @returns {String} 返回按钮的样式
         */
        btnStyle () {
            const _that = this;
            let _res = (_that.fixed || _that.focused) ? 0 : -(_that.btnWidth || 0);
            return `marginRight: ${_res}px`;
        }
    },
    mounted () {
        const _that = this;
        _that._initCom();
    },
    methods: {
        /**
         * 初始化组件
         */
        _initCom () {
            const _that = this;
            const _el = _that.$refs.hook_btn;
            const _btnWidth = (_el && _el.offsetWidth) || -32;
            let _marginRight = parseInt(getStyle(_el, 'margin-left'), 10) || -9;
            _that.btnWidth = _btnWidth + _marginRight + 3;
        },
        /**
         * focus的时候回调
         * @param {Event} evt 事件对象
         */
        _onFocus (evt) {
            const _that = this;
            _that.focused = true;
            _that.$emit('focus', evt);
        },
        /**
         * 失去焦点的回调
         * @param {Event} evt 事件对象
         */
        _onBlur (evt) {
            const _that = this;
            this.focused = false;
            _that.$emit('blur', evt);
        },
        /**
         * 点击按钮的回调方法
         * @param {Event} evt 事件对象
         */
        _clickBtn (evt) {
            const _that = this;
            if (_that.isBtnClear) {
                _that.myValue = '';
            }
            _that.$emit('clickBtn', {
                Event: evt,
                data: _that.myValue
            });
        },
        /**
         * 取消表单提交
         * @param {Event} evt 事件对象
         * @returns {Boolean} 返回是否提交成功
         */
        _onSubmit(evt) {
            const _that = this;
            evt.preventDefault();
            let el = document.activeElement;
            el && el.blur();
            _that.$emit('submit', {
                Event: evt,
                data: _that.myValue
            });
            _that._confirm({
                Event: evt,
                data: _that.myValue
            });
            return false;
        }
    }
};
</script>

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

.nus_search {
    overflow: hidden;
    width: 100%;
    height: 32px;
    border-color: $nusearch-input-br-color;
    * {
        border-color: inherit;
    }
    form {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .nu_search-wrap {
        flex: 1;
        height: 100%;
    }
    .nu_search-input {
        height: 100%;
        border-radius: 3px;
        transition: all .3s;
        border: {
            style: solid;
            width: 1px;
        };
        background: $nusearch-input-bg-color;
    }
    .nu_search-btn {
        display: table;
        font-size: 1em;
        height: 100%;
        transition: all .3s;
        margin: 0 -45px 0 9px;
        user-select: none;
    }
    .nu_btn-text {
        display: table-cell;
        vertical-align: middle;
    }
}
</style>
