<template>
    <div>
        <!--大图-->
        <big-pic :item="data[0]" :showType="showType" :showTitle="showTitle" :isShowPrice="isShowPrice"
                 :siteUnitName="siteUnitName"></big-pic>
        <!--小图-->
        <ul class="goods-small-ul">
            <template v-for="item in smallgoods">
                <small-pic :item="item" :showType="showType" :showTitle="showTitle" :isShowPrice="isShowPrice"
                           :siteUnitName="siteUnitName"></small-pic>
            </template>
        </ul>
    </div>
</template>
<style>
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>
<script>
    import smallPic from '../goods/smallPic.vue';
    import bigPic from '../goods/bigPic.vue';
    import Lazyload from 'mint-ui';
    import {formatImg}  from '../../utils/commonUtil';
    export default {
        props: {
            data: '',
            showType: '',
            showTitle: '',
            isShowPrice: '',
            siteUnitName: ''
        },
        data() {
            return {};
        },
        computed: {
            imgsrc(){
                return formatImg.formatSRC(this.data[0].image, 400, 400);
            },
            smallgoods(){
                return this.data.slice(1);
            },
        },
        components: {
            smallPic,
            bigPic
        }
    };
</script>