import { Button, Canvas, Navigator, ScrollView, Text, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import React, { useEffect, useState } from 'react'
import AddressList from '@/components/AddressList'
import { creditInfoApi } from '@/api/creditLine'
import './index.scss'
import { useSelector } from '@/reducers/hooks'
import { formatDateTime, formatPriceDiv } from '@/common/fotmat'
import Message from '@/components/Message'
import useLogin from '@/use/useLogin'

interface ProgressType {
  progress: number
  style: Record<string, any>
}
const Progress = (props: ProgressType) => {
  const getCanvas = () => {
    // const percentage = props.progress??0;
    const percentage = props.progress || 0
    const query = Taro.createSelectorQuery()
    query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
      const canvas = res[0]?.node
      if (canvas) {
        const ctx = canvas.getContext('2d')
        const { windowHeight, windowWidth } = Taro.getSystemInfoSync()
        const dpr = 750 / windowWidth
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        const r = canvas.width / 2
        ctx.translate(r, r)

        // 白色大圆
        ctx.beginPath()
        ctx.fillStyle = 'white'
        ctx.shadowBlur = 20
        ctx.shadowColor = '#cde5ff'
        ctx.arc(0, 0, 100, 0, 2 * Math.PI, false)
        ctx.fill()

        // 刻度
        const my_minute = Math.PI * 2 / 60
        const my_second = Math.PI * 2 / 60
        ctx.strokeStyle = '#F59F5D'
        ctx.lineWidth = 2
        ctx.beginPath()
        for (let i = 0; i < 15; i++) {
          ctx.save()
          ctx.rotate(i * 4 * my_minute)
          ctx.moveTo(r - 45, 0)
          ctx.lineTo(r - 40, 0)
          ctx.stroke()
          ctx.restore()
        }

        // 白色小圆
        ctx.beginPath()
        ctx.fillStyle = 'white'
        ctx.shadowBlur = 20
        ctx.shadowColor = 'rgba(204,204,204,0.50)'
        ctx.arc(0, 0, 74, 0, 2 * Math.PI, false)
        ctx.fill()

        // 文字
        ctx.beginPath()
        ctx.restore()

        ctx.fillStyle = props.style?.cir?.color// "#007aff";
        ctx.font = '42px Cambria, Cambria-Bold'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(`${percentage}%`, 0, 0)

        // 蓝色的圆
        if (percentage > 0) {
          ctx.beginPath()
          ctx.lineWidth = 25
          ctx.lineCap = 'round'
          const gad = ctx.createLinearGradient(100, 0, 0, 100)
          gad.addColorStop(0, props.style?.cir?.background?.start[0])
          gad.addColorStop(1, props.style?.cir?.background?.start[1])
          ctx.strokeStyle = gad
          ctx.arc(0, 0, 104, -Math.PI * 0.5, 2 * Math.PI / 100 * ((percentage < 50 ? percentage : 50) - 25), false)
          ctx.stroke()
        }

        if (percentage > 50) {
          ctx.beginPath()
          const gad2 = ctx.createLinearGradient(0, -100, 0, 0)
          gad2.addColorStop(0, props.style?.cir?.background?.end[0])
          gad2.addColorStop(1, props.style?.cir?.background?.start[1])
          ctx.strokeStyle = gad2
          ctx.arc(0, 0, 104, Math.PI * 0.4, 2 * Math.PI / 100 * (percentage - 25), false)
          ctx.stroke()
        }
      }
      else {
        getCanvas()
      }
    })
  }
  useReady(() => {
    getCanvas()
  })
  useEffect(() => {
    if (props.progress != 0) {
      getCanvas()
    }
  }, [props.progress])
  return <Canvas type="2d" id="myCanvas" />
}
const CreditLine = () => {
  useLogin()
  const userInfo = useSelector(state => state.userInfo)

  const { fetchData, state } = creditInfoApi()
  const [data, setData] = useState({
    credit_quota_used_line: [0, '00'],
    credit_quota_line: [0, '00'],
    credit_quota_available_line: [0, '00'],
    progress: 0,
    create_time: '',
    quota_status_name: '',
    quota_status: '',
    credit_quota_start_time: '',
    credit_quota_end_time: '',
  })
  const [style, setStyle] = useState({
    type: {},
    cir: {
      color: '',
      background: { start: [], end: [] },
    },
    available: {},
    bottomTitle: {},
  })
  // 获取数据
  const getData = async() => {
    const convertPrice = (data) => {
      const t = data.toString().split('.')
      t[1] = t[1] ? t[1].padEnd(2, 0) : '00'
      return t
    }
    const result = await fetchData()
    const credit_quota_used_line = convertPrice(formatPriceDiv(result.data.credit_quota_used_line))
    const credit_quota_line = convertPrice(formatPriceDiv(result.data.credit_quota_line))
    const credit_quota_available_line = convertPrice(formatPriceDiv(result.data.credit_quota_available_line))
    const progress = credit_quota_available_line[0] == 0 && credit_quota_line[0] == 0 ? 100 : ((credit_quota_available_line[0] ?? 0) / (credit_quota_line[0] ?? 0) * 100).toFixed(0)

    switch (Number(result.data.quota_status)) {
      case 0:// 暂未开通
        setStyle({
          type: { background: '#e4e4ff', color: '#1818B4' },
          cir: {
            color: '#707070',
            background: { start: ['#727272', '#CDCDCD'] as any, end: ['#CDCDCD', '#EEEEEE'] as any },
          },
          available: { color: '#707070', textDecoration: 'line-through' },
          bottomTitle: { color: '#cccccc' },
        })
        break
      case 1:// 申请中
        setStyle({
          type: { background: '#cde5ff', color: '#007AFF' },
          cir: {
            color: '#707070',
            background: { start: ['#727272', '#CDCDCD'] as any, end: ['#CDCDCD', '#EEEEEE'] as any },
          },
          available: { color: '#707070', textDecoration: 'line-through' },
          bottomTitle: { color: '#cccccc' },
        })
        break
      case 2:// 生效中
        setStyle({
          type: { background: '#cde5ff', color: '#007AFF' },
          cir: {
            color: '#007aff',
            background: { start: ['#047CFF', '#51A4FF'] as any, end: ['#87C0FF', '#57A8FF'] as any },
          },
          available: { color: '#007aff' },
          bottomTitle: { color: '#007AFF' },
        })
        break
      case 3:// 已失效
        setStyle({
          type: { background: '#f6f6f6', color: '#ABABAB' },
          cir: {
            color: '#707070',
            background: { start: ['#727272', '#CDCDCD'] as any, end: ['#CDCDCD', '#EEEEEE'] as any },
          },
          available: { color: '#707070', textDecoration: 'line-through' },
          bottomTitle: { color: '#cccccc' },
        })
        break
      case 4:// 失效待还款
        setStyle({
          type: { background: '#FFE6CE', color: '#EE7500' },
          cir: {
            color: '#707070',
            background: { start: ['#EF7907', '#FAC897'] as any, end: ['#FAC897', '#FFE6CE'] as any },
          },
          available: { color: '#EE7500' },
          bottomTitle: { color: '#007AFF' },
        })
        break
    }

    setData({
      ...result.data,
      progress,
      credit_quota_used_line,
      credit_quota_line,
      credit_quota_available_line,
      credit_quota_start_time: formatDateTime(result.data?.credit_quota_start_time, 'YYYY-MM-DD'),
      credit_quota_end_time: formatDateTime(result.data?.credit_quota_end_time, 'YYYY-MM-DD'),
    })
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <View className="credit-line">
      <Message text="暂不支持线上申请授权，请联系平台客服。" />
      <View className="credit-line-card">
        <View className="credit-line-card-top">
          <View><Progress progress={data.progress} style={style} /></View>
          <View className="credit-line-card-top-info">
            <View className="credit-line-card-top-info-title">可用额度</View>
            <View className="credit-line-card-top-info-price" style={style.available}><Text>¥</Text>{Number(data.credit_quota_available_line[0])?.toLocaleString()}<Text>.{data.credit_quota_available_line[1]}</Text></View>
            <View className="credit-line-card-top-info-date">有效期: {data?.credit_quota_start_time} 至{data?.credit_quota_end_time}</View>
          </View>
          <View className="credit-line-card-top-status" style={style.type}>{data.quota_status_name}</View>
        </View>
        <View className="credit-line-card-bottom">
          <View className="credit-line-card-bottom-item">
            <View className="credit-line-card-bottom-item-title">
              <Text style={style.bottomTitle} className="iconfont icon-yucunkuan"></Text>
              <View>总额度</View>
            </View>
            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>{Number(data.credit_quota_line[0])?.toLocaleString()}<Text>.{data.credit_quota_line[1]}</Text></View>
          </View>
          <Navigator hoverClass="none" url="/pages/creditUsed/index" className="credit-line-card-bottom-item">
            <View className="credit-line-card-bottom-item-title">
              <Text style={style.bottomTitle} className="iconfont icon-tick-pressed"></Text>
              <View>已用额度</View>
              <Text className="iconfont icon-a-moreback miconfont"></Text>
            </View>
            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>{Number(data?.credit_quota_used_line[0])?.toLocaleString()}<Text>.{data.credit_quota_used_line[1]}</Text></View>
          </Navigator>
        </View>
      </View>
    </View>
  )
}

export default CreditLine