import { View, Image, Text } from "@tarojs/components"
import backNav from '@/images/backNav.png'
import inviteBg from '@/images/inviteBg.png'
import share from '@/images/share.png'
import wechat from '@/images/wechat.png'
import qrcode from '@/images/qrcode.png'
import './index.scss'
import { backTo, errorNotice, successNotice } from "../../utils/utils"
import { userDetail } from "../../utils/api"
import { useState } from "react"
import jrQrcode from 'jr-qrcode'
import { useEffect } from "react"
import { Button } from "@nutui/nutui-react-taro"
import config from "../../config/config"
import Taro from "@tarojs/taro"
import html2canvas from 'html2canvas';


const Index = () => {

    const [user, setUser] = useState({})
    const [code, setCode] = useState('')

    useEffect(() => {
        userDetail().then(rs => {
            if (!rs) return
            setUser(rs)
            const img = jrQrcode.getQrBase64(window.location.origin + '/#/pages/index/index?code=' + rs.invite_code)
            setCode(img)
        })

    }, [])

    const backFn = () => {
        backTo()
    }

    const genImage = () => {
        const canvas = document.createElement("canvas")
        let canvasBox = document.getElementById('imageWrapper')
        const width = canvasBox.offsetWidth
        const height = canvasBox.offsetHeight
        canvas.width = width * 3
        canvas.height = height * 3

        const options = {
            backgroundColor: '#F67952',
            canvas: canvas,
            useCORS: true,
            y: 66,
            allowTaint: true,
            onrendered: (x) => {
                console.log(x, "CCC")
            }
        };

        html2canvas(canvasBox, options).then((canvas) => {
            let dataURL = canvas.toDataURL("image/png");
            //下载
            downloadImage(dataURL);
            //显示
        })
    }

    const downloadImage = (url) => {
        let link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "邀请码.png");
        link.click();
    }

    const shareFn = async () => {
        genImage()
    }

    return <View className="invite-container" id="imageWrapper">
        <View className='addr-detail-title invite-header '>
            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
            邀请好友
        </View>
        <View className="invite-body relative flex-center" >

            <View className="flex-col items-center invite-content">
                <Text className="invite-body-title">邀请好友，福利多多</Text>
                <Image src={code} className="invite-code-img mt18" />
                <View className="invite-code-help">邀请码：{user.invite_code}</View>
                <Button className="invite-btn" onClick={shareFn}>立即邀请</Button>
            </View>
            <Image src={inviteBg} className="invite-body-bg" id='invite-body-bg' />
        </View>
        <View className="invite-footer flex-between items-start ">
            <View className="invite-action flex-col  items-center">
                <Image src={share} className="invite-action-icon" />
                <View>点击分享二维码</View>
            </View>
            <View className="invite-action flex-col  items-center">
                <Image src={wechat} className="invite-action-icon" />
                <View className="mt6">分享至微信</View>
            </View>
            <View className="invite-action flex-col  items-center">
                <Image src={qrcode} className="invite-action-icon" />
                <View>好友扫码加入</View>
            </View>
        </View>
    </View>
}


export default Index