<template>
    <div class="nus_operate"
        v-if="list && list.length > 0">
        <operate-options
            class="nu_operate-item"
            v-for="(item, index) in list"
            :key="index"
            :list="filterItem(item)"
            @click="_onClick"
            @tap="_onTap"
            @confirmChange="_confirm">
        </operate-options>
    </div>
</template>

<script>
import OperateTmp from './_comm/OperateTmp';
import OperateOptions from './operateoptions/OperateOptions';

export default {
    extends: OperateTmp,
    name: 'NuOperate',
    components: {
        OperateOptions
    },
    props: {
        /**
         * 数据列表(二维数组)
         * [{text: 'xxx', className: 'xxxxx'}]
         */
        list: {
            type: Array
        }
    },
    methods: {
        /**
         * 过滤子列表
         * @param {*} item 子列表
         * @returns {Array}
         */
        filterItem(item) {
            if (item) {
                if (!(item instanceof Array)) {
                    item = [item];
                }
            }
            return item;
        }
    }
};
</script>

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

.nus_operate {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    color: $nuoperate-color;
    font-weight: 500;
    user-select: none;
    border-color: $nuoperate-br-color;
    font-size: $nuoperate-font-size;
    .nu_operate-item {
        border-color: inherit;
        background: $nuoperate-item-bg;
        margin: $nuoperate-options-margin;
        border-radius: $nuoperate-radius-width;
        overflow: hidden;
    }
}
</style>
