<template>
    <div class="nus_cell-list" v-if="itemData && itemData.list">
        <div class="nu_cell-list-label"
            v-if="_filterItemTitle">
            {{_filterItemTitle}}
        </div>
        <nu-cellgroup
            class="nu_cell-list-bd">
            <nu-cell
                class="nu_cell-list-item"
                v-for="(item, index) in itemData.list"
                :key="index"
                :isJustify="false"
                :itemData="_filterItem(item, index)"
                @click="_onClick"
                @tap="_onTap">
                <template slot-scope="{itemData}">
                    <nu-funicon
                        class="nu_cell-list-icon"
                        v-if="itemData.imgUrl"
                        :lazyOptions="lazyOptions"
                        :isLazy="isLazy"
                        :imgUrl="itemData.imgUrl">
                    </nu-funicon><span
                        class="nu_cell-list-text"
                        v-if="itemData.text">
                        {{itemData.text}}
                    </span>
                </template>
            </nu-cell>
        </nu-cellgroup>
    </div>
</template>

<script>
import { callFn } from 'nimble-lib';
import BaseTmp from '../_comm/BaseTmp';
import NuCellgroup from '../../widget/cellgroup';
import NuCell from '../../widget/cell';
import NuFunicon from '../../widget/funicon';

export default {
    extends: BaseTmp,
    name: 'NuCelllist',
    components: {
        NuCellgroup,
        NuCell,
        NuFunicon
    },
    props: {
        /**
         * 当前索引
         */
        itemIndex: {

        },
        /**
         * 当前项数据
         */
        itemData: {
            type: Object
        },
        /**
         * 索引的key
         */
        itemKey: {},
        /**
         * 过滤Label名称
         * @returns {String}
         */
        filterItemTitle: {
            type: Function
        },
        /**
         * 过滤item数据
         * @returns {String}
         */
        filterItemData: {
            type: Function
        },
        /**
         * 懒加载参数
         */
        lazyOptions: {
            type: Object
        },
        /**
         * 是否需要lazy
         */
        isLazy: {
            type: Boolean,
            default: true
        }
    },
    computed: {

        /**
         * 过滤Label名称
         * @returns {String}
         */
        _filterItemTitle() {
            let _that = this;
            let itemKey = _that.itemKey || '';
            let itemData = _that.itemData || {};
            return callFn(_that.filterItemTitle || itemData.text || itemKey, [itemData, itemKey, _that.itemIndex]);
        }
    },
    methods: {
        _filterItem(item, index) {
            return callFn(this.filterItemData || item, [item, index]) || item;
        },
        _click(evt, item) {
            this.$emit('confirmchange', item);
            this._onClick(evt);
        },
        _tap(evt, item) {
            this.$emit('confirmchange', item);
            this._onTap(evt);
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';
.nus_cell-list{
    .nu_cell-list-bd{
        padding-left: 15px;
    }
    .nu_cell-list-item{
        &:active{
            background: $nuindexlist-active-bg-color;
        }
    }
    .nu_cell-list-icon, .nu_cell-list-text{
        display: inline-block;
        vertical-align: middle;
    }
    .nu_cell-list-icon{
        margin-right: 15px;
    }
}
</style>
