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

export default ()=>{
  
	const userInfo = useSelector(state => state.userInfo);
  useEffect(()=>{
    getData()
  }, [])
  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 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"),
    })
  }
  const convertPrice  = (data)=>{
    var t = data.toString().split(".");
    t[1] = t[1]?t[1].padEnd(2,0):"00";
    return t;
  }
  

  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>
            </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>
  )
}

const Progress = (props)=>{
  useEffect(()=>{
    if(props.progress!=0){
      getCanvas();
    }
  },[props.progress])
  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();
  })
  return <Canvas type="2d" id="myCanvas"/>
}