<template>
    <Modal
        title="调用图片服务"
        :width="600"
        v-model="model"
        @on-ok="modalOK" 
        @on-cancel="modalCancel"
        ok-text="确定">
        <div class="image-skn-image">
            <div
                class="image" 
                v-for="image in imageList"
                :key="image.id"
                :class="{'selected': image.selected}"
                @click="selected(image)">
                <img :src="image.fileName" alt="" />
            </div>
            <div class="no-data" v-if="!imageList.length">
                未获取到图片
            </div>
        </div>
    </Modal>
</template>

<script>
import _ from 'lodash';
import ProductService from 'services/product/product-service';

export default {
    name: 'modal-skn-image',
    props: ['value', 'skn'],
    data() {
        return {
            model: this.value,
            imageList: [],
        };
    },
    created() {
        this.productService = new ProductService();
    },
    methods: {
        modalOK() {
            let image = _.find(this.imageList, img => img.selected);

            if (!image) {
                this.$Message.error('请选择图片');
                return;
            }
            this.$emit('selected', image.fileName);
            this.$emit('input', this.model);
        },
        modalCancel() {
            this.$emit('input', this.model);
        },
        selected(img) {
            let current = img.selected;

            _.each(this.imageList, image => {
                image.selected = false;
            });
            img.selected = !current;
        },
    },
    watch: {
        value(val) {
            this.model = this.value;
            if (val && this.skn) {
                this.productService.getProductPhotoList(this.skn).then(data => {
                    if (data.code === 200) {
                        let imgs = _.get(data, 'data.list', []);

                        _.each(imgs, img => {
                            img.selected = false;
                        });
                        this.imageList = imgs;

                    }
                });
            }
        }
    },
};
</script>
<style lang="scss">
.image-skn-image {
    overflow: auto;
    height: 200px;

    .image {
        float: left;
        margin: 5px;
        overflow: hidden;
        width: 100px;
        height: 100px;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        border: 1px solid #e8e8e8;
        background: #fff;
        cursor: pointer;

        &.selected {
            border: 1px solid #2d8cf0;
            box-shadow: 0 0 5px #2d8cf0;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .no-data {
        font-size: 14px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #bbbec4;
    }
}
</style>