<template>
    <Cn-page :loading="loading" noPadding beforeRender>
        <view slot="body" class="transfer">
            <!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
            <Cn-htmlToImg domId="content" @renderFinish="renderFinish" style="display: flex">
                <view class="content" id="content">
                    <view class="content-title">灿能物联</view>
                    <view class="content-des">寻电能质量之因</view>
                    <view class="content-des">解电能质量之惑</view>
                    <view class="content-des ">治电能质量之本</view>
                    <view class="user-info "
                          style="margin-top:200rpx;margin-bottom: 0;background: #fff;padding:20rpx;border-radius: 12rpx;overflow: hidden">
                        <uqrcode size="60" ref="uqrcode" canvas-id="qrcode" :value="content"
                                 @complete="complete"
                                 :loading="false"></uqrcode>
                        <view class="right ml20">
                            <view class="user-info-name" style="font-size: 28rpx">{{
                                    userInfo.nickname
                                }}向你分享了{{ number }}台设备，请打开灿能物联APP扫码查看
                            </view>
                        </view>
                    </view>
                </view>
            </Cn-htmlToImg>
            <view class="transfer-text">
                <!--            <view>换个样式</view>-->
                <view @click="save">保存图片</view>
            </view>
            <!-- <view class="transfer-btn">
                <button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
                    返回
                </button>
                <button class="transfer-btn-item ml20" @click="home">转移成功</button>
            </view> -->
        </view>
    </Cn-page>
</template>
<script>
// import QRCode from 'qrcodejs2'
// import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';

import {base64ToPath} from "image-tools";
import setting from "@/pages/engineering/setting.vue";

export default {
    data() {
        return {
            loading: true,
            content: '',
            img: '',
            userInfo: {},
            number: 0
        }
    },
    computed: {
        roleName() {
            let roleName = ''
            switch (this.userInfo.authorities) {
                case 'tourist':
                    roleName = '游客'
                    break
                case 'engineering_user':
                    roleName = '工程用户'
                    break
                case 'app_vip_user':
                    roleName = 'VIP用户'
                    break
                case 'market_user':
                    roleName = '营销用户'
                    break
                case 'operation_manager':
                    roleName = '运维管理员'
                    break
            }
            return roleName
        },
    },
    methods: {
        complete() {
            console.log('图片渲染完成')
            this.loading = false
        },
        renderFinish(e) {
            this.img = e
        },
        save() {
            if (!this.img) {
                setTimeout(() => {
                    this.save()
                }, 500)
            }
            base64ToPath(this.img).then((res) => {
                console.log(res)
                uni.saveImageToPhotosAlbum({
                    filePath: res,
                    success: () => {
                        this.$util.toast('已保存到系统相册')
                    },
                    fail: function (err) {
                        console.log(err)
                    },
                });
            })
        }
    },
    onLoad(options) {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        this.content = JSON.stringify({
            type: 'shareDevice',
            id: options.id,
        })
        this.number = options.id.split(',').length
        console.log(this.content)
    },
}
</script>
<style lang="scss">
.content {
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url('data:image/png;base64,[encoded data, 118600 characters]');
    background-size: cover;

    .content-title {
        font-size: 40rpx;
        color: #fff;
        margin-bottom: 100rpx;
    }

    .content-des {
        margin-bottom: 20rpx;
        color: #Fff;
        fons-size: 28rpx;
    }
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 50rpx;
    width: 260px;

    .avatar {
        margin-right: 20rpx;
        height: 100rpx;
        width: 100rpx;
        flex-shrink: 0;
        border-radius: 8rpx;
    }

    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .user-info-name {
            font-size: 32rpx;
            color: #333333;
        }

        .user-info-role {
            margin-top: 10rpx;
            font-size: 28rpx;
            color: #999999;
        }
    }
}

.transfer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    box-sizing: border-box;
    padding: 100rpx 0;

    .transfer-img {
    }

    .transfer-text {
        display: flex;
        font-size: 28rpx;
        color: rgb(122, 126, 153);
    }

    .transfer-btn {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 100rpx;
        width: 100%;

        .transfer-btn-item {
            flex: 1;
            height: 80rpx;
            border-radius: 12rpx;
            background-color: $uni-theme-color;
            font-size: 28rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
