<template>
    <div class="nus_keyboard">
        <nu-layercb
            :confirmbarType="themeType"
            :isConfirm="type !== 'pre'"
            @cancelChange="_onCancel"
            @confirmChange="_onConfirm">
            <div class="nu_keyboard-cont" v-if="myList && myList.length">
                <keyboard-group
                    v-for="(item, index) in myList"
                    :key="index"
                    :item-data="item"
                    :validata="validata"
                    :style-name="styleName"
                    :max-line-num="maxLineNum"
                    @keypress="_onKeypress">
                </keyboard-group>
            </div>
        </nu-layercb>
    </div>
</template>

<script>
import { callFn } from 'nimble-lib';
import {POPUP_EVENT} from '../../../_commons/constant';
import NuLayercb from '../../widget/layer/layercb';
import KeyboardGroup from './keyboardGroup/KeyboardGroup';
export default {
    name: 'NuKeyboard',
    components: {
        NuLayercb,
        KeyboardGroup
    },
    props: {
        /**
         * 验证
         */
        validata: {},
        type: {
            type: String // suf|pre
        },
        themeType: { // 风格
            type: String // 'confirmbars'
        },
        /**
         * 列表数据
         */
        list: {
            type: Array
        },
        /**
         * 每行的展示风格(默认等分)
         */
        styleName: {
            type: String,
            default: 'divide'
        },
        /**
         * 选择的回调
         */
        keypress: {
            type: Function
        }
    },
    data () {
        return {
            myList: null,
            maxLineNum: 0, // 每行最多展示的数量
            myValue: null // 选中的值
        };
    },
    mounted () {
        this._initCom();
    },
    watch: {
        /**
         * 监听列表项的变化
         * @param {Array} nowVal 变化后的列表数据
         */
        list () {
            const _that = this;
            _that._filterList();
            _that._getMaxLineNum();
        }
    },
    methods: {
        /**
         * 初始化组件
         */
        _initCom () {
            const _that = this;
            _that._filterList();
            _that._getMaxLineNum();
        },
        /**
         * 过滤展示列表
         */
        _filterList () {
            const _that = this;
            let list = _that.list || [];
            list = list.map((item) => {
                if (item && item instanceof Array) {
                    return {
                        list: item
                    };
                }
                return item;
            });
            _that.myList = list;
        },
        /**
         * 获取每行展示的最大数量
         */
        _getMaxLineNum () {
            const _that = this;
            const _myList = _that.myList;
            let _maxLen = 0;
            _myList.forEach((item) => {
                if (item && item.list && item.list.length > _maxLen) {
                    _maxLen = item.list.length;
                }
            });
            _that.maxLineNum = _maxLen;
        },
        /**
         * 取消的回调方法
         * @param {Event} evt 事件对象
         */
        _onCancel (evt) {
            const _that = this;
            _that.$emit(POPUP_EVENT.CANCEL, evt);
        },
        /**
         * 确定的回调方法
         * @param {Event} evt 事件对象
         */
        _onConfirm (evt) {
            const _that = this;
            let valid = callFn(_that.validata, ['confirm', _that.myValue]);
            if (valid) {
                return;
            }
            _that.$emit(POPUP_EVENT.CONFIRM, {
                data: _that.myValue,
                Evt: evt
            });
        },
        /**
         * 选中值的回调
         * @param {Object} evt 选中数据
         */
        _onKeypress (evt) {
            const _that = this;
            _that.myValue = evt.data;
            callFn(this.keypress, [evt]);
        }
    }
};
</script>
<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_keyboard{
    .nus_layercb{
        .nu_layer-cont{
            background: $nukeyboard-bg-color;
        }
    }
}
</style>
