<template>
    <view class="container">
        <div @click="gomy" class="iconfont fanhui" :style="{top:topHight+'px'}">&#xe633;</div>
        <view class="invi_img">
            <swiper class="swiper_box" circular="true" duration="1000" indicator-dots="true" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#d7a54c" @change="swiperchange">
                <block>
                    <swiper-item v-for="(item, index) in bgImgList" :key="index">
                        <image :src="item" v-if="item && item != ''" class="slide-image" mode="widthFix" lazy-load />
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <view class="invi_tops"><text space="nbsp">新用户扫二维码识别小程序 / 授权登录即可成功绑定关系</text></view>
        <view class="btn_group disFlex_goodsBox flex_hor_between" v-if="bgImgList && bgImgList.length > 0">
            <view class="btn_tab" @tap="getImg" v-if="flag">生成专属海报</view>
        </view>
        <canvas class="myCanvas" canvas-id="myCanvas" :style="'width:' + WIDTH + 'px;height:' + HEIGHT + 'px;'"></canvas>
    </view>
</template>
<script>
let app = getApp();
var appEv = app.$vm.$options;
import { post } from "@/request/api.js";

export default {
    data() {
        return {
            WIDTH: 1080,
            HEIGHT: 1848,
            E_WIDTH: 290,
            flag: true,
            imgUrl: "",
            bgImgList: [],
            bgSrc: "",
            sybgSrc: "",
            userInfo: {},
            Url: "",
            userImg: "",
            topHight: 50,
        };
    },
    onLoad: function(options) {
        this.loadData();
    },
    onShow: function() {
        let menuButtonObject = uni.getMenuButtonBoundingClientRect();
        this.topHight = menuButtonObject.top;
        // let app = uni.getSystemInfoSync()
        // let topHight = app.statusBarHeight
        // let navHeight = menuButtonObject.height + (menuButtonObject.top - topHight) * 2;
        // this.topHight = topHight;
        // console.log(menuButtonObject);
        // console.log('顶部安全距离',topHight)
        // console.log('按钮高度',navHeight)
    },
    methods: {
        loadData() {
            uni.showLoading({ mask: true });
            post("v1/user/xcxqrcode").then((res) => {
                uni.hideLoading();
                if (res.code === 0) {
                    this.bgImgList = res.data.data.list;
                    this.bgSrc = this.bgImgList[0];
                    this.userImg = res.data.data.userImg;
                } else {
                    appEv.errTips(res.msg || "");
                }
            });
        },
        swiperchange: function(e) {
            var current = e.detail.current || 0;
            this.bgSrc = this.bgImgList[current];
        },
        getImg(e) {
            uni.showLoading({
                title: "图片保存中...",
            });
            this.save();
        },

        save() {
            var bgSrc = this.bgSrc,
                that = this;
            uni.getImageInfo({
                src: bgSrc,
                success: function(ret) {
                    var path = ret.path;
					that.createImg(path);
                },
                fail: (err) => {
                    console.log(err);
                },
            });
        },

        createImg(bgSrc, avatar) {
            let imgUrl = this.userImg,
                WIDTH = this.WIDTH,
                HEIGHT = this.HEIGHT,
                E_WIDTH = this.E_WIDTH,
                that = this;
            var path;
            uni.getImageInfo({
                src: imgUrl,
                success: function(ret) {
                    path = ret.path;
                    const ctx = uni.createCanvasContext("myCanvas");
                    let EWM_Y = HEIGHT - E_WIDTH - 15 - 128;

                    ctx.save();
                    ctx.drawImage(bgSrc, 0, 0, WIDTH, HEIGHT);
                    ctx.drawImage(path, (WIDTH - E_WIDTH) / 2, EWM_Y, E_WIDTH, E_WIDTH);
                    ctx.restore();

                    ctx.draw(false, function(e) {
                        // 保存到本地
                        uni.canvasToTempFilePath({
                            canvasId: "myCanvas",
                            quality: 1,
                            fileType: "jpg",
                            success: function(res) {
                                let pic = res.tempFilePath;
                                that.saveImage(pic);
                            },
                        });
                    });
                },
                fail: (err) => {
                    console.log(err);
                },
            });
        },

        saveImage(path = appEv.parameter("path")) {
            var that = this;
            uni.getSetting({
                success: (res) => {
                    //如果没有相册权限
                    console.log(res.authSetting); //授权信息
                    if (!res.authSetting["scope.writePhotosAlbum"]) {
                        console.log("没有授权，调用授权！");
                        //向用户发起授权请求
                        uni.authorize({
                            scope: "scope.writePhotosAlbum",
                            success: () => {
                                console.log("授权成功！");
                                that.savefun(path);
                            },
                            fail: (res) => {},
                        });
                    } else {
                        console.log("已授权。直接保存");
                        that.savefun(path);
                    }
                },
                fail: (res) => {},
            });
        },

        savefun(path) {
            uni.saveImageToPhotosAlbum({
                filePath: path,
                success(result) {
                    uni.showToast({
                        title: "保存成功",
                        icon: "success",
                        duration: 1200,
                    });
                    // 预览图片
                    uni.previewImage({
                        current: path, // 当前显示图片的http链接
                        urls: [path], // 需要预览的图片http链接列表
                    });
                },
                fail(result) {
                    this.flag = false;
                    appEv.errTips("保存失败");
                },
            });
        },

        gomy(){
            uni.switchTab({ url: "/pages/my/index" });
        }
    },
};
</script>
<style lang="scss">
page {
    background-color: #2f323b;
    color: #fff;
}
.fanhui{
    position: absolute;
    left: 0;
    top: 100rpx;
    color: #fff;
    font-size: 66rpx;
}

.container {
    width: 600rpx;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
	padding-top: 190rpx;
}

.myCanvas {
    position: absolute;
    top: 150%;
    left: 50%;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translate(-50%, 50%);
}

.invi_img {
    margin: 5% 0 24rpx;
    overflow: hidden;
    border: 16rpx solid #fff;
}

.invi_img .image {
    width: 100%;
    display: block;
}

.invi_img .swiper_box,
.invi_img .slide-image {
    width: 100%;
    height: 970rpx !important;
    overflow: hidden;
}

.invi_tops {
    list-style: 1.2;
    font-size: 24rpx;
    opacity: 0.8;
    text-align: center;
    width: 640rpx;
    margin-left: -20rpx;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform-origin: top center;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    -ms-transform-origin: top center;
}

.btn_group {
    padding-top: 6rpx;
    padding-bottom: 42rpx;
}

.btn_group .btn_tab {
    /* min-width: calc((100% - 32rpx) / 2); */
    min-width: 100%;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 20rpx;
    text-align: center;
    color: #fff;
    background-color: #c9ab79;
    margin-top: 32rpx;
    /* width: 100%; */
}

.btn_group .btn_tab .button {
    border: 0;
    padding: 0;
    margin: 0;
}

.btn_group .btn_tab,
.btn_group .btn_tab .button {
    color: #fff;
    line-height: 1.4;
    font-size: 28rpx;
}
</style>