<template>
    <div class="nus_comimg"
        v-if="list && list.length > 0"
        :style="{width: list.length === 4 ? '70%' : ''}">
        <nu-colview
            class="nu_img-layoutcol"
            :gap="'5'"
            :list="list"
            :col="(list.length === 1 || list.length === 4)? '2' : '3'">
            <template slot-scope="{ itemData, index }">
                <nu-imgc
                    class="nu_com-img"
                    :key="index"
                    :imgUrl="itemData"
                    :aspect="1"
                    @click="_onItemClick(itemData, index, $event)">
                </nu-imgc>
            </template>
        </nu-colview>
    </div>
</template>

<script>
import NuImgc from '../../../../widget/img/imgc';
import NuColview from '../../../../layout/colview';
import { EVENT_TYPE } from '../../constants';
export default {
    props: {
        /**
         * 图片列表
         */
        list: {
            type: Array
        }
    },
    components: {
        NuImgc,
        NuColview
    },
    methods: {
        /**
         * 图片被点击的回调方法
         * @param {Object} item 当前被点击项的数据
         * @param {Number} index 索引
         * @param {Event} evt 事件对象
         */
        _onItemClick (item, index, evt) {
            const _that = this;
            _that.$emit(EVENT_TYPE.IMG_CLICK, {
                Event: evt,
                data: {
                    index: index,
                    item: item,
                    list: _that.list
                }
            });
        }
    }
};
</script>

<style lang="scss">
@import '../../../../../_assets/style/_iconFont.scss';
@import '../../../../../_assets/style/_var.scss';
@import '../../../../../_assets/style/_mixin.scss';
.nus_comimg {
    text-align: left;
    margin-top: 11px;
    .nu_com-img {
        cursor: pointer;
        // width: 70px;
        // height: 70px;
        // margin-right: 5px;
        // &:last-child {
        //     margin-right: 0;
        // }
        overflow: hidden;
        .nu_imgc-img {
            min-width: 100%;
            min-height: 100%;
        }
    }
}
</style>
