import { useEffect, useLayoutEffect, useState } from 'react'
import { View, Text, Canvas } from '@tarojs/components'
import Taro from '@tarojs/taro'
import uCharts from '@qiun/ucharts'


import styles from './index.module.scss'

var uChartsInstance = {}

export function CardReport({ data }) {
  const [type, setType] = useState('')
  useLayoutEffect(() => {
    let res = {
      series: [
        {
          name: '平均申请成功率',
          color: '#1890ff',
          data: Number(data.pass_rate) / 100,
        },
      ],
    }
    // setTimeout(() => {},1000)
    drawCharts('GPzrpCUVQaRhqPiWdfuGPeXkOSjfEDFX', res)
  }, [])
  const drawCharts = (id, data1) => {
    const { cWidth, cHeight, pixelRatio } = {
      cWidth: 150,
      cHeight: 150,
      pixelRatio: 1,
    }
    let ctx = Taro.createCanvasContext(id)
    console.log(ctx)

    uChartsInstance[id] = new uCharts({
      canvas2d: true,
      type: 'arcbar',
      context: ctx,
      width: cWidth,
      height: cHeight,
      series: data1.series,
      pixelRatio: pixelRatio,
      animation: true,
      background: '#FFFFFF',
      color: [
        '#1890FF',
        '#91CB74',
        '#FAC858',
        '#EE6666',
        '#73C0DE',
        '#3CA272',
        '#FC8452',
        '#9A60B4',
        '#ea7ccc',
      ],
      padding: undefined,
      title: {
        name: `${data.pass_rate}%`,
        fontSize: 26,
        color: '#1890ff',
      },
      subtitle: {
        name: '平均申请成功率',
        fontSize: 12,
        color: '#9A9FA3',
      },
      extra: {
        arcbar: {
          type: 'circle',
          width: 12,
          backgroundColor: '#E9E9E9',
          startAngle: 1.5,
          endAngle: 0.25,
          gap: 2,
        },
      },
    })
  
  }
  return (
    <>
      <View
        onClick={() => {
         
        }}
        hoverClass='hover'
        className={styles.report_card}
      >
   
        <View className='row'>
          <View className={styles.left}>
      
            <Canvas
              // {...canvasProps}
              canvasId='GPzrpCUVQaRhqPiWdfuGPeXkOSjfEDFX'
              id='GPzrpCUVQaRhqPiWdfuGPeXkOSjfEDFX'
              className={styles.charts}
              // type='2d'
              // type={type}
              // type='webgl'
            />
          </View>
          <View className={styles.right}>
            <View className={styles.info + ' ' + styles.success}>
              <View className='row  flex-start'>
                <Text className={styles.num}>{data.pass_count} </Text>例
              </View>
              <View>申请成功</View>
            </View>

            <View className={styles.info + ' ' + styles.fail}>
              <View className='row flex-start'>
                <Text className={styles.num}>{data.fail_count} </Text>例
              </View>

            </View>
          </View>
        </View>
      </View>
     
    </>
  )
}

 <Canvas
              // {...canvasProps}
              canvasId='GPzrpCUVQaRhqPiWdfuGPeXkOSjfEDFX'
              id='GPzrpCUVQaRhqPiWdfuGPeXkOSjfEDFX'
              className={styles.charts}
             type='2d'
              // type={type}
              // type='webgl'
            />