<template>
    <view class="invitation">
        <view class="invitation-refund" v-if="!canSave">
            <view class="invitation-refund-btn" @click="onBack">
                <uni-icons type="back" color="white" size="24"></uni-icons>
            </view>
        </view>
        <image class="invitation-back" src="@/static/img/code_back.png" mode="aspectFill"></image>
        <view class="invitation-content">
            <view class="invitation-lay">
                <image class="invitation-code" :src="code"></image>
                <view class="invitation-text">
                    <view class="invitation-text-code" @click="copyInvite"><text>{{invite}}</text><block v-if="!canSave">点击复制</block></view>
                    <view class="invitation-text-sub">扫码下载共力生态App</view>
                    <view class="invitation-text-sub">邀请好友增加共力分增长</view>
                </view>
            </view>
            <button class="invitation-btn" @click="onShare" v-if="!canSave">分享邀请</button>
        </view>
        <!-- 分享 -->
        <uni-popup ref="popupShare" type="share" background-color="#fff">
            <uni-popup-share title="分享到" @select="select" :isDowImg="true"></uni-popup-share>
        </uni-popup>
    </view>
</template>

<script>
    import {
        invitationCode
    } from '@/apis/interfaces/user.js'
    export default {
        data() {
            return {
                invite: '',
                code: '',
                canSave: false,
            };
        },
        created() {
            invitationCode().then(res => {
                this.invite = res[0].invite
                this.code = res[0].code
            })
        },
        methods: {
            // 返回
            onBack() {
                this.$Router.back()
            },
            // 复制邀请码
            copyInvite() {
                uni.setClipboardData({
                    data: this.invite,
                    success() {
                        uni.showToast({
                            title: '邀请码已复制',
                            icon: 'none'
                        })
                    }
                })
            },
            // 分享
            onShare() {
                this.$refs.popupShare.open();
            },
            // 分享选项
            select(e) {
                switch (e.item.name) {
                    case 'wxchum':
                        uni.share({
                            provider: 'weixin',
                            scene: 'WXSceneSession',
                            type: 0,
                            href: 'https://invite.gongli.vip?invitation_code=' + this.invite,
                            title: '共力生态',
                            summary: '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
                            imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
                            fail(err) {
                                uni.showToast({
                                    title: err.errMsg,
                                    icon: 'none'
                                })
                            }
                        })
                        break;
                    case 'wxcircle':
                        uni.share({
                            provider: 'weixin',
                            scene: 'WXSceneTimeline',
                            type: 0,
                            href: 'https://invite.gongli.vip?invitation_code=' + this.invite,
                            summary: '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
                            imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
                            fail(err) {
                                uni.showToast({
                                    title: err.errMsg,
                                    icon: 'none'
                                })
                            }
                        })
                        break;
                    case 'download':
                        this.canSave = true
                        uni.showLoading({
                            title: '保存中'
                        })
                        this.down()
                        break;
                }
            },
            down() {
                setTimeout(() => {
                    let pages = getCurrentPages();
                    let page = pages[pages.length - 1];
                    let ws = page.$getAppWebview();
                    let bitmap = new plus.nativeObj.Bitmap('drawScreen');
                    // 将webview内容绘制到Bitmap对象中  
                    ws.draw(bitmap, () => {
                        // 保存图片到本地  
                        bitmap.save("_doc/drawScreen.jpg", {
                            overwrite: true
                        }, res => {
                            uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
                                filePath: res.target, //图片文件路径
                                success: () => {
									this.canSave = false;
									uni.showToast({
										title: '保存图片成功，赶紧去转发给好友吧~',
										icon : 'none'
									})
                                },
                                fail: function(e) {
                                    uni.showModal({
                                        title: '温馨提示',
                                        content: '保存图片失败，重新再试试~',
                                        showCancel: false,
                                        confirmColor: "#34CE98",
                                        confirmText: '知道了',
                                        success: () => {
                                            this.canSave = false;
                                        }
                                    })
                                    uni.hideLoading()
                                }
                            });

                            bitmap.clear(); // 清除Bitmap对象  
                        }, error => {
                            uni.showModal({
                                title: '温馨提示',
                                content: '保存图片失败，重新再试试~',
                                showCancel: false,
                                confirmColor: "#34CE98",
                                confirmText: '知道了',
                                success: () => {
                                    this.canSave = false;
                                }
                            })
                            uni.hideLoading()
                            bitmap.clear(); // 清除Bitmap对象  
                        });
                        // bitmap.clear(); // 清除Bitmap对象  
                    }, error => {
                        uni.showModal({
                            title: '温馨提示',
                            content: '保存图片失败，重新再试试~',
                            showCancel: false,
                            confirmColor: "#34CE98",
                            confirmText: '知道了',
                            success: () => {
                                this.canSave = false;
                            }
                        })
                        uni.hideLoading()
                    }, {
                        check: true, // 设置为检测白屏  
                    });
                }, 2000)
            }
        }
    }
</script>

<style lang="scss">
    .invitation {
        position: relative;
        background: #1c2472;
        min-height: 100vh;

        .invitation-refund {
            @extend .ios-top;
            position: absolute;
            top: 30rpx;
            left: $margin*2;
            z-index: 9;

            .invitation-refund-btn {
                border-radius: 50%;
                line-height: 58rpx;
                width: 58rpx;
                height: 58rpx;
                text-align: center;
                font-weight: bold;
                background: rgba(0, 0, 0, .5);
            }
        }

        .invitation-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    .invitation-content {
        padding: $padding*2;
        position: absolute;
        bottom: 5vh;
        width: 100%;
        box-sizing: border-box;

        .invitation-lay {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background: rgba(0, 0, 0, .5);
            border-radius: $radius;
            padding: $padding;
            margin-bottom: $margin;
            color: white;

            .invitation-code {
                width: 168rpx;
                height: 168rpx;
                background: white;
            }

            .invitation-text {
                width: calc(100% - 198rpx);

                .invitation-text-code {
                    font-size: 26rpx;
                    line-height: 50rpx;

                    text {
                        font-weight: bold;
                        font-size: 40rpx;
                        margin-right: 10rpx;
                        text-decoration: underline;
                    }
                }

                .invitation-text-sub {
                    font-size: 26rpx;
                    line-height: 50rpx;
                }
            }
        }

        .invitation-btn {
            height: 90rpx;
            line-height: 90rpx;
            border-radius: 45rpx;
            font-size: 32rpx;
            font-weight: bold;
            background: #5a0399;
            color: white;

            &::after {
                display: none;
            }
        }
    }
</style>
