<template>
    <ImageDownloadPreviewSlot class="ImageDownloadPreviewSlot">
        <template slot="image">
            <el-image
                    :preview-src-list="imgUrlList"
                    :src="smallImgUrl"
                    :style="imageStyle"
                    class="my-image-Preview">
            </el-image>
        </template>
        <template slot="deleteBtn">
            <el-button @click="handleDownload" type="text" v-if="btnIsShow">
                <i :style="btnStyle" class="el-icon-download myDownloadBtn"></i>
            </el-button>
        </template>
    </ImageDownloadPreviewSlot>
</template>

<script>
    /**
     * @summary 业务层组件 提供缩略图预览与下载功能
     * @author wxy
     * @date 2020/3/27
     */
    import ImageDownloadPreviewSlot from './ImageDownloadPreviewSlot';

    export default {
        name:       'ImgageDownloadPreviewBase',
        props:      {
            /**
             * 业务识别字段
             */
            typeCode:   {
                type:     String,
                required: true,
            },
            /**
             * 数据结构 【smallImgUrl: string, imgUrlList: array】
             */
            myData:     {
                type:      Object,
                validator: function (value) {
                    // 这个值必须匹配下列字符串中的一个
                    return (value.hasOwnProperty('smallImgUrl') && value.hasOwnProperty('imgUrlList') && value.hasOwnProperty('btnIsShow'));
                },
                require:   true,
            },
            /**
             * 下载按钮样式
             */
            btnStyle:   {
                type:    Object,
                default: () => ({}),
            },
            /**
             * 缩略图图片样式
             */
            imageStyle: {
                type:    Object,
                default: () => ({}),
            },
        },
        components: {
            [ImageDownloadPreviewSlot.name]: ImageDownloadPreviewSlot,
        },
        data() {
            return {
                smallImgUrl: '',
                imgUrlList:  [],
                btnIsShow:   true,
            };
        },
        watch:      {
            myData: {
                handler(a, b) {
                    this.smallImgUrl = a.smallImgUrl;
                    this.imgUrlList = a.imgUrlList;
                    this.btnIsShow = a.btnIsShow;
                },
                immediate: true,
                deep:      true,
            },
        },
        methods:    {
            /**
             * 下载 业务功能触发 推送
             */
            handleDownload() {
                this.$emit('download', this.smallImgUrl);
            },
        },
    };
</script>

