<template>
    <div class="good-images">
        <Row v-for="(good, goodIndex) in productGoods"
             :key="goodIndex">
            <Col span="4">
                <div class="color-item-title">
                    <span>{{good.goodsName}}({{good.factoryGoodsName}})</span>
                </div>
            </Col>

            <Col span="4" v-for="(image, imageIndex) in good.goodsImage" :key="imageIndex">
                <div class="upload-item">
                    <div class="upload-item-img">
                        <img v-if="imageIndex === 0 && image.imageUrl" :src="image.imageUrl"
                                alt=""
                                width="120px"
                                height="122px">
                        <drag-file-upload v-if="imageIndex > 0" 
                            :default-file="image.imageUrl"
                            :id="{goodIndex, imageIndex}"
                            @success="uploadImageSuccess"
                            @remove="uploadImageRemove">
                        </drag-file-upload>
                    </div>
                    <div class="upload-item-title">
                        {{imagesTitles[imageIndex]}}
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'image-goods-main',
    props: {
        value: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            productGoods: this.value,
            imagesTitles: ['商品正面图*', '商品反面图', '模特图', '男生频道封面图', '女生频道封面图']
        };
    },
    methods: {
        uploadImageSuccess(data, file) {
            this.productGoods[data.goodIndex].goodsImage[data.imageIndex].imageUrl = file.url;
            this.$emit('input', this.productGoods);
        },
        uploadImageRemove(data) {
            this.productGoods[data.goodIndex].goodsImage[data.imageIndex].imageUrl = '';
            this.$emit('input', this.productGoods);
        }
    },
    watch: {
        value: {
            handler(val) {
                this.productGoods = val;
            },
            deep: true
        }
    }
};
</script>

<style>

.upload-item {
    display: inline-block;
    height: 180px;
    width: 130px;
    text-align: center;
    margin: 10px 0;
}

.color-item-title {
    text-align: center;
    margin: 50px 0;
}

.upload-item {
    display: inline-block;
    height: 200px;
    width: 130px;
    text-align: center;
    margin: 30px 0;
}

.upload-item-img {
    display: inline-block;
    height: 126px;
    width: 124px;
    border: 2px solid #e8e8e8;
    box-sizing: border-box;
}
</style>