import React, { useEffect, useState } from 'react'

import { View, Image, Text , Canvas} from '@tarojs/components'

import Taro from '@tarojs/taro'

import NavBar from '@/components/NavBar'

import { AtIcon } from 'taro-ui'

import './index.scss'
import Tip from '@/utils/tip'

const imgUrl = require('@/assets/AuthResult/zhengshu.jpg')

// {
//     "website": "91110105MA00BL6M2J",
//     "address": "北京市,北京市,房山区",
//     "filePath": "https://agent-crm.luojigou.vip/crm-api/20210721/Flv4ikdcbhDqQ4G68w8Jr7EudMid.jpg",
//     "detailAddress": "北京市房山区218路88888",
//     "company": "北京呵呵小哥科技有限公司",
//     "faren": "呵呵大哥",
//     "startTime": '2021年09月08日',
//     "endTime": '2021年09月08日',
//     "No": 'jx20200622001'
// }

const AuthResult: React.FC = () => {
    
    const [ result, setResult ] = useState<Record<string, any>>({})

    const [ canvasUrl, setCanvasUrl ] = useState<string>('')
    
    useEffect(() => { 
      const _result = JSON.parse(decodeURIComponent(Taro.getCurrentInstance().router?.params.result as string)) 
      setResult(_result)
      console.log(_result, 'result');
      
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    Taro.useReady( () => {

        setTimeout(() => {
 
        Tip.loading('生成证书中')
        const query = Taro.createSelectorQuery()
        query.select('#myCanvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            console.log(res, 'resresres');
            
            const width = res[0].width;     // 获取canvas的最终宽度与高度

            const height = res[0].height;

            const canvas = res[0].node 
            
            setTimeout(() => {

                const ctx = canvas.getContext('2d')

                const dpr = Taro.getSystemInfoSync().pixelRatio;  // 获取设备的像素比

                console.log(dpr, 'dpr');
                
                canvas.width = width * dpr;
                canvas.height = height * dpr;
    
                ctx.scale(dpr, dpr);
    
                const bgImg = canvas.createImage()
                
                bgImg.src = imgUrl

                bgImg.onload = () => {
                    
                    ctx.drawImage( bgImg, 0, 0, width ,  height);

                    // 证书编号
                    ctx.font =  "600 " + "4px" + " PingFangSC-Semibold, PingFang SC";

                    ctx.fillStyle = "greey";

                    ctx.fillText(result.No, 148, 52 )

                    // 公司名称
                    ctx.font = "600 " + "10px" + " PingFangSC-Semibold, PingFang SC";

                    ctx.fillStyle = "greey";

                    const title: string = result.company

                    const titleX = 307 / 2 - (9.6 * title.length / 2 )

                    ctx.fillText( title, titleX, 118);

                    // 统一社会信用代码
                        
                    ctx.font = " 600 " + "4px" + " PingFangSC-Semibold, PingFang SC";

                    ctx.fillStyle = "#666";  // canvas 文字颜色
                    
                    ctx.fillText( result.website, 123, 128);  // canvas 文字

                    // 法人
                    ctx.font = " 600 " + "4px" + "PingFangSC-Semibold, PingFang SC";
                    ctx.fillStyle = "#666";
                    ctx.fillText( result.faren, 190, 128);
                    

                    // 注册地址
                    ctx.font = " 600 " + "4px" + "PingFangSC-Semibold, PingFang SC";
                    ctx.fillStyle = "#666";  
                    ctx.fillText( result.address.split(',').join('') + result.detailAddress, 110, 136);

                    // 地区
                    ctx.font = " 600 " + "4px" + " PingFangSC-Semibold, PingFang SC";
                    ctx.fillStyle = "#666";  
                    ctx.fillText( result.address.split(',').join('') , 146, 144);

                    // 起始年
                    ctx.font = " 600 " + "4px" + " PingFangSC-Semibold, PingFang SC";
                    ctx.fillStyle = "#666";
                    ctx.fillText( result.startTime, 112, 151);

                    // 结束年
                    ctx.font = " 600 " + "4px" + " PingFangSC-Semibold, PingFang SC";
                    ctx.fillStyle = "#666";  
                    ctx.fillText( result.endTime, 178, 151);
      
                    setCanvasUrl(canvas.toDataURL())
                    Tip.loaded()
                } 
            }, 1000);
          })
        }, 0);
    })

    const openImagePriview = (url) => {
        console.log(url, 'url');
        
        Taro.previewImage({
            current: url,
            urls: [url]
        })
    }


    return (
        <View className='AuthResult'>
            <NavBar 
              icon={<AtIcon value='chevron-left' size='30rpx' color='#fff'  />}
              title=''
              fixed
            />
            <Image className='bg' src={require('../../assets/AuthResult/bg.png')} />

            {/* 合作商卡片 */}
            <View className='company' style={{height: result.filePath ? '726rpx' : '', paddingBottom: result.filePath ? '' : '50rpx'}}>
                <View className='header'>
                    已通过中德智慧官方认证合作商
                </View>
                <View className='line'></View>

                <View className='company-name'>
                    {result.company}
                </View>
                <View className='company-desc'>
                    {/* {result.business_scope} */}
                </View>
                {
                   result.filePath && <View className='certificate' onClick={() => openImagePriview(result.filePath)}>
                     <Image className='business-license' mode='aspectFill' src={result.filePath} />
                     <Image className='chapter' src={require('../../assets/AuthResult/chapter.png')} />
                    </View>
                }
               
            </View>

            {/* 证书 */}
            <View className='chapter'>
                <View className='header'>
                    <Image className='dog' src={require('../../assets/AuthResult/dog.png')} />
                    <Text>中德智慧教育官方授权品牌认证证书</Text>
                </View>
                <Canvas 
                  type='2d' 
                  id='myCanvas' 
                  style={{width: '307px', height: '214px', marginTop: '11px'}}
                  onClick={()=> openImagePriview(canvasUrl)}
                />
            </View>
        </View>
    )
}

export default AuthResult
