<template>
    <div class="nus_keyboardgroup"
        v-if="itemData && itemData.list && itemData.list.length > 0"
        :class="_getLineClass(itemData)">
        <div class="nu_key-item"
            v-for="(item, index) in itemData.list"
            :class="[item && item.className, item === value && 'nu_active']"
            :style="[widthStyle, item && item.styleName]"
            :key="index"
            @touchstart.prevent="_onTouch(item, $event)"
            @mousedown.prevent="_onTouch(item, $event)">
            <span class="nu_icon">
                {{ _getText(item) }}
            </span>
            <span v-if="_getText(item)" class="nu_key-tips">{{_getText(item)}}</span>
        </div>
    </div>
</template>

<script>
import { callFn, initEventListener } from 'nimble-lib';

export default {
    props: {
        /**
         * 验证
         */
        validata: {},
        /**
         * 列表数据
         */
        itemData: {
            type: Object
        },
        /**
         * 每行展示的最多数量
         */
        maxLineNum: {
            type: Number
        },
        /**
         * 每行的展示风格(默认等分) left:左对齐center:居中对齐right:右对齐divide:等分
         */
        styleName: {
            type: String,
            default: 'divide'
        },

        /**
         * 过滤展示数据
         */
        filterText: {
            type: Function
        }
    },
    data () {
        return {
            value: null // 选中的值
        };
    },
    computed: {
        /**
         * 获取每个item项的宽度
         * @returns {String} 返回宽度
         */
        widthStyle () {
            const _that = this;
            const _num = _that.maxLineNum || 1;
            const _width = (parseFloat(100 / _num)).toFixed(2);
            return `width: ${_width}%`;
        }
    },
    mounted () {
        const _that = this;
        initEventListener(window, ['touchend', 'mouseup'], _that._onEnd);
    },
    beforeDestroy () {
        const _that = this;
        initEventListener(window, ['touchend', 'mouseup'], _that._onEnd, 'remove');
    },
    methods: {
        /**
         * 获取每行的样式
         * @param {Object} item 每行列表数据
         * @returns {String} 返回每行的样式
         */
        _getLineClass (item) {
            const _that = this;
            let _styleName = (item && item.styleName) || _that.styleName;
            return [_styleName && ('nu_line-' + _styleName), item && item.className];
        },
        /**
         * 获取每行的展示文案
         * @param {Object} item 每行列表数据
         * @returns {String} 返回每行的展示文案
         */
        _getText (item) {
            const _that = this;
            let _res = '';
            _res = callFn(_that.filterText, [item], _that);
            if (typeof _res !== 'string') {
                _res = item.text || item;
            }
            return _res;
        },
        /**
         * 触摸每项item结束的回调方法
         */
        _onEnd () {
            this.value = null;
        },
        /**
         * 开始触摸每项item的回调方法
         * @param {Object} item 每项的值
         * @param {Event} evt 事件对象
         */
        _onTouch (item, evt) {
            const _that = this;
            let _type = _that._touchType || evt.type;
            _that._touchType = _type;

            if (evt.type !== _type) {
                return;
            }
            let valid = callFn(_that.validata, ['keypress', item]);
            if (valid) {
                return;
            }
            if (item && !item.isPopUnable) {
                _that.value = item;
            }
            _that.$emit('keypress', {
                data: item,
                Evt: evt
            });
        }
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nus_keyboardgroup {
    display: inline-block;
    height: 40px;
    color: $nukeyboard-color;
    border-color: $nukeyboard-br-color;
    width: 100%;
    user-select: none;
    *,::before{
        border-color: inherit;
    }
    &.nus_keyboard-split{
        margin-bottom: 8px;
    }
    &.nu_line{
        @at-root #{&}-{
            &left {
                text-align: left;
            }
            &right {
                text-align: right;
            }
            &center {
                text-align: center;
            }
            &divide {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .nu_key-item {
                    flex: 1;
                }
            }
        }
    }
    .nu_key-item {
        width: 10%;
        height: 100%;
        line-height: 40px;
        display: inline-block;
        position: relative;
        text-align: center;
        &::before {
            content: ' ';
            position: absolute;
            border: {
                width: 1px;
                style: solid;
            };
            left: -1px;
            top: -1px;
            bottom: 0;
            right: 0;
        }
    }
    .nu_key-tips {
        display: none;
        text-align: center;
        position: absolute;
        color: $nukeyboard-active-color;
        background: $nukeyboard-pop-bg-color;
        border: 1px solid $nukeyboard-active-color;
        box-shadow: 0px 0px 4px 0 $nukeyboard-active-color;
        border-radius: 3px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        top: -45px;
        left: 50%;
        transform: translateX(-50%);
    }
    .nu_active {
        color: $nukeyboard-active-color;
        .nu_key-tips {
            display: block;
        }
    }
}
</style>
