import React, {Component} from 'react'
import {Toast} from "antd-mobile"
import {HeaderBar} from '@/common'
import {browser, http, getParam, wxShare} from '@/utils'
import './index.scss'
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
import scoreIconL from '@assets/image/score_icon-l.png'
import scoreIconR from '@assets/image/score_icon-r.png'
import scoreReportBg from '@assets/image/scoreReport_bg.png'

class scoreReport extends Component {

    constructor(props) {
        super(props)
        this.state = {
            tab: ['当前成绩', '今日最佳', '本月最佳'],
            cutIndex: 0,
            myRankList: '',
            imgUrl: '',
            codeSrc: ''
        }
    }

    componentDidMount() {
        this.handleFetchInfo(0)
        this.getCodeWe()
    }


    getCanvas() {
        let _this = this
        var canvas2 = document.createElement("canvas")
        let _canvas = document.getElementsByClassName('score-list')[0]
        var w = parseInt(window.getComputedStyle(_canvas).width)
        var h = parseInt(window.getComputedStyle(_canvas).height)
        var scale = window.devicePixelRatio
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * scale
        canvas2.height = h * scale

        var context = canvas2.getContext("2d")
        context.scale(1, 1)
        html2canvas(document.getElementsByClassName('score-list')[0], {canvas: canvas2}).then(function (canvas) {
            // document.body.appendChild(canvas);

            let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
            _this.setState({
                imgUrl: imgUrl,
            })
        })
    }

// 获取二维码
    getCodeWe() {
        let _this = this
        let qrCodeLink = 'www.julyedu.com'
        return new Promise(resolve => {
            QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
                _this.setState({
                    codeSrc: url
                })
            })
            resolve()
        })
    }

    handleFetchInfo = (index) => {
        http.get(`${API.home}/sys/at/user_score/${index}`).then(res => {
            const {code, data} = res.data
            if (code === 200) {
                this.setState({
                    myRankList: data
                })
                this.getCanvas()
            }
        })
    }

    change = (index) => {
        this.setState({
            cutIndex: index
        })
        this.handleFetchInfo(index)
    }


    render() {
        const {tab, cutIndex, myRankList, codeSrc, imgUrl, isshow} = this.state
        return (
            <>
                <HeaderBar
                    title='成绩报告'
                    arrow={true}
                    home={false}
                />

                <div className={'score-report'}>
                    <ul className={'tab-list'}>
                        {
                            tab.map((item, index) => {
                                return (
                                    <li key={index} className={cutIndex === index ? 'active' : ''}
                                        onClick={() => this.change(index)}>{item}</li>
                                )
                            })
                        }
                    </ul>


                    <div className="score-list-box">

                        <div className={'score-list'} style={{backgroundImage: `url(${scoreReportBg})`}}>
                            <div className="title">
                                <img src={scoreIconL} alt=""/>
                                成绩报告
                                <img src={scoreIconR} alt=""/>
                            </div>

                            <table border="0" cellSpacing="0" cellPadding="0">
                                <thead>
                                <tr>
                                    <td>分数</td>
                                    <td>用时</td>
                                    <td>排名</td>
                                </tr>
                                </thead>
                                <tbody>
                                {
                                    myRankList.r_id !== 0 &&
                                    <tr className={'has'}>
                                        <td>{myRankList.score}分</td>
                                        <td>{myRankList.cost_time}</td>
                                        <td className={'rank'}>{myRankList.rank}</td>
                                    </tr>
                                }
                                {
                                    myRankList.r_id == 0 &&
                                    <tr>
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                    </tr>
                                }

                                </tbody>
                            </table>

                            <div className="comment text-overflow-4">
                                {myRankList && myRankList.title && myRankList.title.comment}
                            </div>

                            <div className="code">
                                <img src={codeSrc} alt=""/>
                                <p>AI水平测试</p>
                            </div>
                        </div>


                        <img className={'imgUrl'} src={imgUrl} alt=""/>
                    </div>

                    <div className="tip">长按图片分享给好友，或保存后分享到朋友圈</div>

                </div>
            </>
        )
    }
}


export default scoreReport