<!--
 * @Description:图片组件-(1,居中大图，2,通栏长图）
 * @Date: 2020-06-30 13:47:39
 * @LastEditTime: 2020-10-10 14:42:59
 * @LastEditors: 李璕
-->
<template>
    <div
        class="see-image-normal"
        v-if="isShow"
        ref="wrapper"
        :class="{
            'see-image-normal--empty': !imageSrc,
            'see-image-normal--tips': imageTips && !isMobile,
        }"
        :style="{
            height: wrapperHeight,
        }"
        :data-tips="imageTips"
    >
        <template v-if="!imageSrc && isDesign">
            <div class="see-image-normal--empty__main">
                <div class="see-image-normal--empty__main__title">
                    {{ emptyTitle }}
                </div>
                <div class="see-image-normal--empty__main__desc">
                    {{ emptyDesc }}
                </div>
            </div>
        </template>

        <div
            v-if="isLong && !isDesign"
            :src="imageSrc"
            ref="longImg"
            class="see-image-normal__image--long"
            :data-tips="imageTips"
            :class="{
                'see-image-normal--tips': imageTips && !isMobile,
            }"
            :style="{
                width: screenWidth + 'px',
                height: isMobile ? wrapperHeight : '400px',
                left: longPosLeft + 'px',
                'background-image': 'url(' + imageSrc + ')',
            }"
        ></div>
        <img v-else :src="imageSrc" class="see-image-normal__image" />
        <div
            v-if="isLong && imageTips"
            class="see-image-normal__image--long"
            :style="{
                width: screenWidth + 'px',
                left: longPosLeft + 'px',
                height: wrapperHeight,
            }"
        >
            {{ imageTips }}
        </div>
    </div>
</template>

<script>
import permissionMixin from "./permission-mixin";
export default {
    name: "see-image-normal",
    mixins: [permissionMixin],
    components: {},

    props: {
        componentData: {
            required: false,
        },
    },
    data() {
        return {
            item: {},
            longPosLeft: 0,
            wrapperHeight: "auto",
            screenWidth: screen.width - 18,
        };
    },
    computed: {
        isMobile() {
            return this.componentData.commonVariable.isMobile;
        },
        isDesign() {
            return this.componentData.commonVariable.pageType === "design";
        },
        imageSrc() {
            if (this.componentData && this.componentData.src) {
                return this.componentData.src;
            }
            return "";
        },
        imageTips() {
            if (this.componentData && this.componentData.tips) {
                return this.componentData.tips;
            }
            return "";
        },
        imageType() {
            if (this.componentData && this.componentData.showType === 2) {
                return 2;
            }
            return 1;
        },
        emptyTitle() {
            if (this.componentData && this.componentData.showType === 2) {
                return "通栏长图";
            }
            return "居中大图";
        },
        emptyDesc() {
            if (
                this.componentData &&
                this.componentData.showType === 2 &&
                !this.isMobile
            ) {
                return "首屏banner尺寸固定为：1920*440，支持拓展名：.png .jpg .gif .bmp";
            }
            return "支持扩展名：.png .jpg .gif .bmp";
        },

        //是否是通栏长图
        isLong() {
            return this.imageType == 2 && !this.isDesign;
        },

        //通栏长图下，父组件高度
        // async wrapperHeight() {
        //     if (this.isLong) {
        //         return "auto";
        //     }
        //     let imageInfo = await this.getImgInfo(this.imageSrc);
        //     return (
        //         (imageInfo.width / this.screenWidth) * imageInfo.height + "px"
        //     );
        // }
    },
    watch: {
        componentData: {
            immediate: true,
            handler: async function (newV, oldV) {
                if (!this.imageSrc) {
                    this.wrapperHeight = "200px";
                    return;
                }
                if (
                    oldV &&
                    oldV.src === newV.src &&
                    oldV.showType === newV.showType
                ) {
                    return;
                }

                //仅在非设计模式且模式为通栏长图模式下，计算高度
                if (!this.isDesign && this.imageType === 2) {
                    this.relCalHeight();
                } else {
                    this.wrapperHeight = "auto";
                }
            },
        },
    },
    created() {},
    mounted() {
        this.$nextTick(() => {
            if (this.isMobile) {
                this.longPosLeft = 0;
            } else {
                if (this.$refs["longImg"]) {
                    this.longPosLeft = -this.$refs[
                        "longImg"
                    ].getBoundingClientRect().left;
                }
                // this.longPosLeft = -this.$el.getBoundingClientRect().left;
            }
        });
    },
    methods: {
        async getImgInfo(imgSrc) {
            return new Promise((resolve, reject) => {
                let image = new Image();
                image.src = imgSrc;
                image.onload = () => {
                    resolve(image);
                };
            });
        },
        async relCalHeight() {
            if (!this.isDesign && this.imageType === 2) {
                if (this.isMobile) {
                    this.wrapperHeight = "100px";
                    this.screenWidth = window.innerWidth;
                    let imageInfo = await this.getImgInfo(this.imageSrc);
                    this.wrapperHeight =
                        (this.screenWidth / imageInfo.width) *
                            imageInfo.height +
                        "px";
                } else {
                    this.wrapperHeight = "440px";
                }
            } else {
                this.wrapperHeight = "auto";
            }
        },
    },
    destroyed() {},
};
</script>

<style lang="scss">
.see-image-normal {
    width: 100%;
    border-radius: 4px;
    .see-image-normal__image {
        width: 100%;
        border-radius: 4px;
    }
    .see-image-normal__image--long {
        position: absolute;
        max-width: initial;
        background-size: cover;
        height: 440px;
        background-position: center;
        border-radius: 0px;
    }

    .see-image-normal__image--long + div {
        opacity: 0;
    }
    .see-image-normal__image--long + div:hover {
        display: block;
        opacity: 0.6;
        border-radius: 4px;
        background: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        color: white;
    }
}
.see-image-normal--empty {
    background: rgba(204, 204, 204, 0.14);
    border: 1px solid rgba(0, 0, 0, 0.14);

    .see-image-normal--empty__main {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .see-image-normal--empty__main__title {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
        }
        .see-image-normal--empty__main__desc {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.65);
        }
    }
}

.see-image-normal--tips {
    position: relative;
    cursor: pointer;
}
.see-image-normal--tips:hover::before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: 4px;
    content: attr(data-tips);
    padding: 20px;
    color: white;
    background: red;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background: #000000;
    font-size: 14px;
    line-height: 23px;
}

// .see-img {
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: center;
//     min-height: 360px;
// }

// .see-img.m {
//     width: 100%;
//     min-height: 190px;
// }
</style>
