<template>
  <div class="nus_cell"
    :class="[isShowMore && 'nu_cell-more',isJustify && 'nu_cell-justify']"
    @click="_onClick"
    @tap="_onTap">
    <slot :itemData="itemData"></slot>
    <div
        class="nu_more-wrap"
        v-if="isShowMore"
        @click="_clickMore">
        <slot name="hook_more">
            <nu-icon
            class="nu_more-icon"
            :icon="icon"
            :iconClass="iconClass">
            </nu-icon>
        </slot>
    </div>
  </div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
import NuIcon from '../icon';

export default {
    name: 'NuCell',
    extends: WidgetTmp,
    components: {
        NuIcon
    },
    props: {
        /**
         * 数据
         */
        itemData: {},
        /**
         * 两端对齐
         */
        isJustify: {
            type: Boolean,
            default: true
        },
        /**
         * 显示更多按钮
         */
        isMore: {
            type: Boolean
        },
        /**
         * 更多按钮图标
         */
        icon: {
            default: '\ue602'
        },
        /**
         * icon的class名
         */
        iconClass: {

        }
    },
    computed: {
        isShowMore() {
            let _that = this;
            let _slot = _that.$slot || {};
            return !!_that.isMore && (_that.icon || _slot.hook_more);
        }
    },
    methods: {
        /**
         * 点击更多按钮事件
         * @param {Event} evt 事件对象
         */
        _clickMore(evt) {
            this.$emit('more', evt);
        }
    }
};
</script>

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

.nus_cell{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 15px;
    white-space: nowrap;
    vertical-align: middle;
    min-height: 44px;
    line-height: 44px;
    &.nu_cell-justify{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    &.nu_cell-more{
        padding-right: 30px;
    }
    .nu_more-wrap{
        user-select: none;
        position: absolute;
        cursor: pointer;
        color: $nucell-arrow-color;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        line-height: 0;
        @include iconPadding();
    }
    .nu_more-icon{
        line-height: 1;
    }
}
</style>

