<template>
    <div class="nus_funicon"
        @click="_onClick($event)"
        @tap="_onTap($event)">
        <slot>
            <div
                class="nu_fun-icon"
                v-if="imgUrl">
                <nu-imgc
                    :aspect="true"
                    :imgUrl="imgUrl"
                    :isLazy="isLazy"
                    :lazyOptions="lazyOptions">
                    <slot name="hook_ext"></slot>
                </nu-imgc>
            </div>
            <nu-icon
                class="nu_fun-icon"
                v-else-if="icon"
                :icon="icon"
                :iconClass="iconClass">
                <template slot="hook_ext">
                    <slot name="hook_ext"></slot>
                </template>
            </nu-icon>
        </slot>
        <slot name="hook_nameText">
            <nu-tag
                class="nu_text"
                v-if="nameText"
                :nameText="nameText">
            </nu-tag>
        </slot>
    </div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
import NuIcon from '../icon';
import NuImgc from '../img/imgc';
import NuTag from '../tag';
export default {
    extends: WidgetTmp,
    name: 'NuFunicon',
    components: {
        NuIcon,
        NuImgc,
        NuTag
    },
    props: {
        /**
         * 懒加载参数
         */
        lazyOptions: {
            type: Object
        },
        /**
         * 是否需要lazy
         */
        isLazy: {
            type: Boolean,
            default: true
        },
        /**
         * 图标
         */
        icon: {
            type: String
        },
        /**
         * icon的字体class
         */
        iconClass: {},
        /**
         * 图片
         */
        imgUrl: {
            type: String
        },
        /**
         * 文字
         */
        nameText: {
            type: String
        }
    }
};
</script>

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

.nus_funicon{
    display: inline-block;
    text-align: center;
    .nu_fun-icon{
        font-size: 1.4em;
        width: 1em;
        line-height: 1;
        display: block;
        margin: 0 auto;
        .nus_imgc{
            display: block;
        }
        img {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
    }
    .nu_text{
        padding-top: 2px;
        display: block;
        border-color:transparent;
        color:inherit;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
