<template>
    <div class="page">
        <ul class="list">
            <li class="item" @click="jump('/pages/bd/profit')">
                <div class="name">我的收益</div>
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image>
            </li>
            <li class="item" @click="jump('/pages/bd/chief')">
                <div class="name">我的团长</div>
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image>
            </li>
            <li class="item" @click="qrCode()">
                <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 class="c-share" v-if="show" @click="close">
            <div class="c-share__content" @click.stop="">
                <div class="qr-img">
                    <div class="qr-name">{{ user.userName }}的邀请码</div>
                    <img :src="canvasImgPath" mode="widthFix" alt="" />
                </div>
                <div class="c-share__division">邀请好友一起推广</div>
                <ul class="c-list">
                    <li class="c-list__item">
                        <button class="button" open-type="share">
                            <div class="c-list__content">
                                <img
                                    class="c-list__icon"
                                    src="/static/share/icon_2.jpg"
                                    alt=""
                                />
                                <div class="c-list__text">发送给微信好友</div>
                            </div>
                        </button>
                    </li>
                    <li class="c-list__item" @click="saveQrCode()">
                        <div class="c-list__content">
                            <img
                                class="c-list__icon"
                                src="/static/share/icon_3.jpg"
                                alt=""
                            />
                            <div class="c-list__text">保存图片到相册</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

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

    // 数据
    data() {
        return {
            curShop: {},
            canvasShow: false,
            show: false,
            canvasImgPath: "",
            share: {
                title: "手机管理端",
                path: "/pages/index/register",
                imageUrl:
                    "https://oss.ixiaokejia.com/images/common/share_login.jpg",
            },
        };
    },

    onLoad() {},
    async onShow() {},
    // 函数
    methods: {
        // 复制
        copy(val) {
            const self = this;

            uni.setClipboardData({
                data: val,
                success: () => {
                    self.fn.showToast("邀请码复制成功");
                },
            });
        },
        qrCode() {
            if (!this.user.inviteCode) {
                return this.fn.showToast("当前账号无邀请码");
            }
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            const self = this;
            const ctx = uni.createCanvasContext("canvas", self);

            Promise.all([
                self.api
                    .get("/Share/GetQRCode", {
                        path: "pages/index/register",
                        paremeters: JSON.stringify({
                            inviteCode: this.user.inviteCode,
                        }),
                        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, 350, 350);
                }

                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 () {},
                            // });
                            self.open();
                        },
                    });
                }, 100);
            });
        },
        // 关闭海报
        closeCanvas() {
            const self = this;

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

            self.show = true;
        },

        // 关闭
        close() {
            const self = this;

            self.show = false;
        },

        // 分享处理
        saveQrCode() {
            const self = this;
            uni.saveImageToPhotosAlbum({
                filePath: self.canvasImgPath,
                success: function () {
                    self.fn.showToast("保存成功");
                },
                complete: function () {},
            });
        },
    },

    // 数据计算
    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);
        }
    }
}
.copy {
    display: inline-block;
    font-size: px(32);
    line-height: px(44);
    padding: 0 px(10);
    border: 1px solid #4395ff;
    color: #4395ff;
    background-color: #fff;
    margin-left: px(20);
    border-radius: px(5);
    transform: translate(0, -1px);
}
.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: 350px;
        height: 350px;
        background-color: #fff;
    }
}
.c-share {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 995;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    .qr-img {
        margin-bottom: px(60);
        background-color: #fff;
        padding-top: px(80);
        img {
            width: 60%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    }
    .qr-name {
        font-size: px(48);
        text-align: center;
        margin-bottom: px(60);
    }
    &__content {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        background-color: #fff;
        border-radius: px(16) px(16) 0 0;
    }

    &__box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(230);
        height: px(230);
        margin-top: px(-115);
        border-radius: 50%;
        background-color: #ef4a37;
    }

    &__icon {
        width: px(137);
        height: px(134);
    }

    &__title {
        margin-top: px(80);
        font-size: px(42);
        color: #333;
    }

    &__price {
        margin-top: px(70);
    }

    &__division {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: px(60);
        font-size: px(34);
        color: #999;

        &:before,
        &:after {
            content: "";
            display: block;
            width: px(350);
            height: px(3);
            background-color: #e7e7e7;
        }
    }
}

.c-price {
    display: flex;
    align-items: baseline;

    &__sign {
        font-size: px(26);
        color: #f8662a;
    }

    &__text {
        font-size: px(54);
        color: #f8662a;
    }
}

.c-list {
    display: flex;
    justify-content: space-around;
    height: px(345);
    padding-top: px(70);

    &__item {
        flex: 1;
    }

    &__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__icon {
        width: px(100);
        height: px(100);
        margin-bottom: px(20);
    }

    &__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: px(32);
        color: #999;
    }
}
</style>