<!--
 * @Description: 图片组-平铺组件
 * @Date: 2020-06-29 11:32:32
 * @LastEditTime: 2020-10-10 14:41:11
 * @LastEditors: 李璕
--> 
<template>
    <div class="see-image-tile" v-if="isShow">
        <div class="see-image-tile-pc" ref="cascade"></div>
    </div>
</template>
<script>
import permissionMixin from "./permission-mixin";
export default {
    name: "see-image-tile",
    mixins: [permissionMixin],
    components: {},
    props: {
        componentData: {
            required: false
        }
    },
    data() {
        return {
            items: [],
            boxMarginRight: 0,
            colHeightList: [],
            colLeftList: []
        };
    },
    computed: {
        imageList() {
            return this.componentData.group;
        },
        boxMarginBottom() {
            if (this.isMobile) {
                return 10;
            }
            return 20;
        },

        imageWidth() {
            if (this.isMobile) {
                if (this.componentData.commonVariable.pageType === "design") {
                    return 180;
                } else {
                    let wrapperWidth = parseInt(
                        getComputedStyle(this.$refs.cascade).width
                    );
                    return (wrapperWidth - 10) / 2;
                }
            }

            let wrapperWidth = parseInt(
                getComputedStyle(this.$refs.cascade).width
            );
            return (wrapperWidth - 40) / 3;
        },
        colCount() {
            if (this.isMobile) {
                return 2;
            }
            return 3;
        },
        isMobile() {
            return this.componentData.commonVariable.isMobile;
        },
        isDesign() {
            return this.componentData.commonVariable.pageType === "design";
        }
    },
    watch: {
        componentData: {
            immediate: true,
            handler: function(newVal, oldVal) {
                if (
                    !oldVal ||
                    this.isImagesChange(newVal.group, oldVal.group)
                ) {
                    if (new Date() - this.date > 1000 || !this.date) {
                        this.$nextTick(() => {
                            this.refreshComponents();
                        });
                        this.date = new Date();
                    }
                }
            }
        }
    },
    created() {},
    methods: {
        refreshComponents() {
            if (this.$refs.cascade) {
                this.boxMarginRight =
                    (parseInt(getComputedStyle(this.$refs.cascade).width) -
                        this.imageWidth * this.colCount) /
                    (this.colCount - 1);

                this.waterfall(this.$refs.cascade);
            }
        },

        async waterfall(container) {
            if (!container) {
                return;
            }
            container.innerHTML = "";
            this.colHeightList = [];
            this.colLeftList = [];

            let cols = this.colCount;
            let boxBorder = 0;
            let boxPadding = 0;
            let colHeightList = this.colHeightList;
            let colLeftList = this.colLeftList;
            let boxMarginRight = this.boxMarginRight;
            let boxMarginBottom = this.boxMarginBottom;
            container.style.width = "100%";
            let imgInfoList = this.imageList;
            var boxHeight;
            var fragment = document.createDocumentFragment(); // 创建文档碎片
            for (let i = 0; i < imgInfoList.length; i++) {
                if (i < cols) {
                    // 只加载第一行
                    let img = await this.getImgInfo(imgInfoList[i].src);
                    var oImgBox = document.createElement("div");
                    oImgBox.className = "img-box";

                    var oImg = document.createElement("img");
                    this.setNoImgBlock(oImg, oImgBox, imgInfoList[i]);
                    // oImg.setAttribute("alt", "");
                    // if (!imgInfoList[i].src) {
                    //     oImg.style.display = "inline-block";
                    //     oImgBox.classList.add("img-box-empty");
                    //     oImgBox.appendChild(this.getEmptyFragment());
                    // }
                    oImg.src = imgInfoList[i].src;
                    let boxWidth = this.imageWidth; //图片展示高度
                    oImgBox.appendChild(oImg);

                    boxHeight = parseFloat(
                        (img.height * (boxWidth / img.width)).toFixed(2)
                    );
                    oImgBox.style.top = 0;
                    oImgBox.style.left =
                        (i === 0 ? 0 : (boxWidth + boxMarginRight) * i) + "px";

                    fragment.appendChild(oImgBox);
                    oImg.height = boxHeight;
                    oImg.width = boxWidth;

                    this.setImgTipsAndLink(oImgBox, imgInfoList[i]);
                    colHeightList.push(boxHeight);
                    colLeftList.push(
                        i === 0 ? "0px" : (boxWidth + boxMarginRight) * i + "px"
                    );
                } else {
                    break;
                }
            }
            container.appendChild(fragment);
            this.fallImages(container, imgInfoList.slice(cols)); // 排列余下的元素
        },
        async fallImages(container, imgInfoList) {
            var fragment = document.createDocumentFragment();
            let colHeightList = this.colHeightList;
            let colLeftList = this.colLeftList;
            let boxMarginRight = this.boxMarginRight;
            let boxMarginBottom = this.boxMarginBottom;
            var minColHeight, minIndex, boxHeight;
            for (var i = 0; i < imgInfoList.length; i++) {
                // 创建img-box
                let img = await this.getImgInfo(imgInfoList[i].src);

                var oImgBox = document.createElement("div");
                oImgBox.className = "img-box";
                var oImg = document.createElement("img");
                this.setNoImgBlock(oImg, oImgBox, imgInfoList[i]);
                oImg.src = imgInfoList[i].src;
                oImgBox.appendChild(oImg);
                let boxWidth = this.imageWidth; //图片展示高度
                boxHeight = parseFloat(
                    (img.height * (boxWidth / img.width)).toFixed(2)
                );
                // 获取最短列高及对应的下标
                minColHeight = Math.min.apply(Math, colHeightList);
                minIndex = colHeightList.indexOf(minColHeight);
                oImgBox.style.top = minColHeight + boxMarginBottom + "px";
                oImgBox.style.left = colLeftList[minIndex];
                oImgBox.style.height = boxHeight + "px";
                this.setImgTipsAndLink(oImgBox, imgInfoList[i]);
                fragment.appendChild(oImgBox);

                oImg.height = boxHeight;
                oImg.width = boxWidth;
                // 更新列高
                colHeightList[minIndex] += boxMarginBottom + boxHeight;
            }

            container.appendChild(fragment);

            container.style.height = Math.max.apply(Math, colHeightList) + "px";
        },
        setImgTipsAndLink(imgDom, imgInfo) {
            if (imgInfo.tips) {
                imgDom.className += " img-tips";
                imgDom.setAttribute("data-tips", imgInfo.tips);
            }
            if (imgInfo.link && !this.isDesign) {
                imgDom.className += " img-link";
                imgDom.addEventListener("click", () => {
                    window.open(imgInfo.link);
                });
            }
        },

        setNoImgBlock(oImg, oImgBox, imgInfo) {
            oImg.setAttribute("alt", "");
            if (!imgInfo.src) {
                oImg.style.display = "inline-block";
                oImgBox.classList.add("img-box-empty");
                oImgBox.appendChild(this.getEmptyFragment());
            }
        },
        async getImgInfo(imgSrc) {
            if (!imgSrc) {
                if (!this.isMobile) {
                    return {
                        width: 206,
                        height: 118
                    };
                }
                if (this.isMobile) {
                    return {
                        width: 166,
                        height: 118
                    };
                }
            }

            return new Promise((resolve, reject) => {
                let image = new Image();
                image.src = imgSrc;
                image.onload = () => {
                    resolve(image);
                };
            });
        },
        //图片为空时的代码片段
        getEmptyFragment() {
            let fragment = document.createDocumentFragment();
            let box = document.createElement("div");
            box.classList.add("img-box-empty-main");
            let boxTitle = document.createElement("div");
            boxTitle.innerText = "图片";
            boxTitle.classList.add("img-box-empty-main--title");
            let boxDesc = document.createElement("div");
            boxDesc.innerText = "建议上传相同比例图片";
            boxDesc.classList.add("img-box-empty-main--desc");

            if (this.isDesign) {
                box.appendChild(boxTitle);
                box.appendChild(boxDesc);
            }

            fragment.appendChild(box);
            return fragment;
        },
        isImagesChange(imgList1, imgList2) {
            if (imgList1.length !== imgList2.length) {
                return true;
            }
            for (let i = 0; i < imgList1.length; i++) {
                if (imgList1[i].src !== imgList2[i].src) {
                    return true;
                }
            }
            return false;
        }
    },
    mounted() {
        window.addEventListener("resize", this.refreshComponents);
    },

    destroyed() {
        window.removeEventListener("resize", this.refreshComponents);
    }
};
</script>

<style lang="scss" >
.see-image-tile {
    .see-image-tile-pc {
        width: 100%;
        position: relative;
        .img-box {
            position: absolute;
            border-radius: 4px;
            img {
                border-radius: 4px;
            }
        }
        .img-tips:hover:before {
            display: flex;
            align-items: center;
            border-radius: 4px;
            justify-content: center;
            position: absolute;
            content: attr(data-tips);
            padding: 20px;
            color: white;
            width: 100%;
            height: 100%;
            opacity: 0.6;
            background: #000000;
            font-size: 14px;
            line-height: 23px;
        }
        .img-link {
            cursor: pointer;
        }
    }

    .see-image-tile__item {
        // width: 206px;
        height: 100px;
        min-height: 100px;
        border-radius: 4px;
        // opacity: 0.15;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        background: #cccccc;
        border: 1px solid #000000;
        margin-right: 30px;
        margin-bottom: 10px;
    }
}

.img-box-empty {
    position: relative;

    img {
        opacity: 0.15;
        background: #cccccc;
        border: 1px dashed #000000;
    }

    .img-box-empty-main {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .img-box-empty-main--title {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
        }
        .img-box-empty-main--desc {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.35);
        }
    }
}
</style>

