<template>
    <div class="page">
        <ul class="list">
            <li class="item" @click="homePoster()">
                <div class="name">首页海报</div>
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image>
            </li>
            <li class="item" @click="jump('/pages/manage/poster/good-list')">
                <div class="name">今日特价</div>
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image>
            </li>
        </ul>

        <div
            class="canvas"
            v-show="canvasShow"
            @touchmove.stop=""
            @click="closeCanvas"
        >
            <div class="canvas__content">
                <div class="canvas__close">
                    <img
                        class="canvas__img"
                        src="/static/live/close.png"
                        alt=""
                    />
                </div>
                <canvas
                    class="canvas__box"
                    canvas-id="canvas"
                    :disable-scroll="true"
                    @click.stop="viewImg()"
                ></canvas>
            </div>
        </div>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            curShop: {},
            shopConfig: {},
            canvasShow: false,
            canvasImgPath: "",
        };
    },

    onLoad() {
        this.getConfig();
    },
    async onShow() {},
    // 函数
    methods: {
        getConfig() {
            this.api.get("/Shop/GetConfig").then((res) => {
                let data = JSON.parse(res.data);
                this.shopConfig = data;
            });
        },
        // 首页海报
        homePoster() {
            this.qrCode();
        },

        qrCode() {
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            const self = this;
            const ctx = uni.createCanvasContext("canvas", self);
            let bg = "https://oss.ixiaokejia.com/images/common/home.png";
            let appLogo = this.shopConfig.logoUrl;
            let appName = this.shopConfig.siteTitle;
            let description =
                "欢迎您光顾本店，相遇就是缘分~本店为你提供最优质的产品与服务，希望您购物愉快。";

            Promise.all([
                uni.getImageInfo({
                    src: bg,
                }),
                uni.getImageInfo({
                    src: appLogo,
                }),
                self.api
                    .get("/Share/GetQRCode", {
                        path: "pages/index/index",
                        paremeters: JSON.stringify({
                            storeId: this.user.storeId,
                        }),
                        width: 355,
                    })
                    .then((res) => {
                        return uni.getImageInfo({
                            src: res.data,
                        });
                    }),
            ]).then((resList) => {
                console.log(resList);
                // 背景
                // ctx.setFillStyle("#fff");
                // ctx.fillRect(0, 0, 750, 1000);
                if (resList[0][1].path) {
                    ctx.drawImage(resList[0][1].path, 0, 0, 750, 1000);
                }

                // appLogo
                if (resList[1][1].path) {
                    ctx.drawImage(resList[1][1].path, 148, 112, 82, 82);
                }

                // // qrcode
                if (resList[2][1].path) {
                    ctx.drawImage(resList[2][1].path, 200, 240, 350, 350);
                }

                // appName
                ctx.setFontSize(44);
                ctx.setFillStyle("#010101");
                if (appName.length > 8) {
                    let name1 = appName.substr(0, 8);
                    let name2 = appName.substr(8, 7);
                    if (appName.length > 15) {
                        name2 += "...";
                    }
                    ctx.fillText(name1, 250, 145);
                    ctx.fillText(name2, 250, 195);
                } else {
                    ctx.fillText(appName, 250, 170);
                }

                // description
                ctx.setFontSize(30);
                ctx.setFillStyle("#010101");
                let lineNum = 17;
                // 判断首行  并缩进两个
                if (description.length > lineNum - 2) {
                    let name1 = description.substr(0, lineNum - 2);
                    ctx.fillText(name1, 180, 750);
                    let surplus = description.substr(lineNum - 2);
                    // 判断第二行
                    if (surplus.length > lineNum) {
                        let name2 = surplus.substr(0, lineNum);
                        ctx.fillText(name2, 125, 790);
                        let surplus2 = surplus.substr(lineNum);
                        // 第三行
                        if (surplus2.length > lineNum) {
                            let name3 = surplus2.substr(0, lineNum - 1) + "...";
                            ctx.fillText(name3, 125, 830);
                        } else {
                            let name3 = surplus2.substr(0, lineNum);
                            ctx.fillText(name3, 125, 830);
                        }
                    } else {
                        let name2 = surplus.substr(0, lineNum);
                        ctx.fillText(name2, 125, 790);
                    }
                } else {
                    let name1 = description.substr(0, lineNum);
                    ctx.fillText(name1, 180, 750);
                }

                ctx.stroke();

                ctx.draw();
                self.canvasShow = true;
                // 生成临时路径
                setTimeout(() => {
                    uni.canvasToTempFilePath({
                        canvasId: "canvas",
                        fileType: "jpg",
                        success: function (res) {
                            self.canvasShow = false;
                            uni.hideLoading();
                            self.canvasImgPath = res.tempFilePath;
                            uni.previewImage({
                                urls: [self.canvasImgPath],
                                longPressActions: true,
                            });
                            // 保存到相册
                            uni.saveImageToPhotosAlbum({
                                filePath: self.canvasImgPath,
                                success: function () {
                                    self.fn.showToast("海报保存成功");
                                },
                                complete: function () {
                                },
                            });
                        },
                    });
                }, 100);
            });
        },
        // 关闭海报
        closeCanvas() {
            const self = this;

            self.canvasShow = false;
        },
        viewImg() {
            let self = this;
            //查看图片
            uni.previewImage({
                urls: [self.canvasImgPath],
                longPressActions: true,
            });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background-color: #fff;
}
.list {
    border-top: 1px solid #f1f1f1;
    .item {
        height: px(120);
        padding: 0 px(35);
        font-size: px(44);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
    }
    .arrow {
        width: px(40);
        height: px(40);
        flex-shrink: 0;
        transform: rotate(180deg);
        /deep/ img {
            width: px(40);
            height: px(40);
        }
    }
}
.canvas {
    position: fixed;
    top: -1000%;
    left: -1000%;
    z-index: -11;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    &__content {
        position: relative;
        width: 100%;
        height: 100%;
        padding: px(200) px(80) 0;
        z-index: 10;
    }

    &__close {
        position: absolute;
        top: px(50);
        right: px(120);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(100);
        height: px(100);
        border-radius: 50%;
        border: solid px(3) #fff;

        &:after {
            content: "";
            position: absolute;
            top: px(100);
            left: 50%;
            z-index: 1;
            display: block;
            width: px(3);
            height: px(50);
            transform: translateX(-50%);
            background-color: #fff;
        }
    }

    &__img {
        width: px(60);
        height: px(60);
    }

    &__box {
        width: 750px;
        height: 1000px;
        background-color: #fff;
    }
}
</style>