<template>
     <div class="canvas_button">
        <canvas ref="canvasRef" id="canvasProcess" height="180" width="180"></canvas>
        <div class="canvas_cr"></div>
        <!-- <img src="@/assets/icon/scan_button_bg.png" v-if="showButton"> -->
        <!-- 2. 使用 :src 绑定导入的变量 -->
        <img :src="scanButtonBg" v-if="showButton">
     </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import scanButtonBg from '@/assets/icon/scan_button_bg.png';
const props = defineProps({
    process: {
        type: Number,
        default: 10
    },
    quekao: {
        type: Number,
        default: 20
    },
    yichang: {
        type: Number,
        default: 40
    }
});

const canvasRef = ref(null);
const animationId = ref(null);
const showButton = ref(true);
const animationSpeed = ref(1);
const anim = ref(null);

// 格式化进度显示
const FormatProcess = (process) => {
    if (process === null || process === undefined || isNaN(process) || !isFinite(process)) {
        return 0;
    }
    const num = Number(process);
    if (isNaN(num)) {
        return 0;
    }
    if (num % 1 === 0) {
        return num;
    } else {
        return parseFloat(num.toFixed(2)); 
    }
};

const handleAnimation = (animObj) => {
    anim.value = animObj;
    if (anim.value) {
        anim.value.setSpeed(animationSpeed.value);
    }
};

const DrawCanvas = () => {
    const canvas = canvasRef.value;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.translate(-canvas.width / 2, -canvas.height / 2);

    // 圆底
    ctx.beginPath();
    ctx.save();
    ctx.arc(90, 90, 75, 0, 2 * Math.PI);
    ctx.shadowColor = "#4D2EFA";
    ctx.shadowBlur = 10;
    ctx.fillStyle = '#ffffff';
    ctx.fill();
    ctx.restore();
    ctx.closePath();

    // 绘制进度环轨道
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#EAF0FF';
    ctx.arc(90, 90, 75, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.closePath();

    // 绿色进度环
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#2BC644';
    const startAngle = -90 * Math.PI / 180;
    const processEndAngle = ((props.process.toFixed(0) / 100) * 360 - 90) * Math.PI / 180;
    ctx.arc(90, 90, 75, startAngle, processEndAngle);
    ctx.stroke();
    ctx.closePath();

    // 异常进度环
    ctx.beginPath();
    ctx.strokeStyle = '#F56C6C';
    const yichangEndAngle = ((props.yichang.toFixed(0) / 100) * 360 + ((props.process.toFixed(0) / 100) * 360 - 90)) * Math.PI / 180;
    ctx.arc(90, 90, 75, processEndAngle, yichangEndAngle);
    ctx.stroke();
    ctx.closePath();

    // 缺考进度环
    ctx.beginPath();
    ctx.strokeStyle = '#FB9F34';
    const quekaoEndAngle = ((props.quekao.toFixed(0) / 100) * 360 + (props.yichang.toFixed(0) / 100) * 360 + ((props.process.toFixed(0) / 100) * 360 - 90)) * Math.PI / 180;
    ctx.arc(90, 90, 75, yichangEndAngle, quekaoEndAngle);
    ctx.stroke();
    ctx.closePath();

    // 扫描文字
    ctx.beginPath();
    ctx.font = "20px bold";
    ctx.textAlign = 'center';
    ctx.fillStyle = '#333333';
    ctx.fillText('开始扫描', 90, 120);
    ctx.closePath();

    // 扫描百分比
    ctx.beginPath();
    ctx.font = "32px bold";
    ctx.textAlign = 'center';
    ctx.fillStyle = '#2E64FA';
    ctx.fillText(FormatProcess(props.process) + '%', 90, 90);
    ctx.closePath();
    
    ctx.restore();

    // 请求下一帧
    animationId.value = requestAnimationFrame(DrawCanvas);
};

onMounted(() => {
    DrawCanvas();
});

onBeforeUnmount(() => {
    if (animationId.value) {
        cancelAnimationFrame(animationId.value);
    }
});

watch(() => props.yichang, () => {
    // console.log("异常数值变化了", props.yichang);
    // console.log("打印进度值", props.process, props.quekao, props.yichang);
});
</script>

<style lang="scss" scoped> 
.canvas_button{
   width: 250px;
   height: 250px;
   background-color: transparent;
   position: relative;
   text-align: center;
   justify-content:center;
   align-items: center;
    img
    {
        width: 100%;
        height: 100%;
    }

   #canvasProcess
   {
        position: absolute;
        left: 35px;
        top:35px;
        z-index: 999;
   }
   .canvas_cr
   {
        width: 138px;
        height: 138px;
        
        // box-shadow: 4px 4px 16px 0px rgba(46,100,250,0.4);
        
        // border-image: radial-gradient(circle, rgba(83, 46, 250, 0), rgba(77, 46, 250, 0.53), rgba(46, 100, 250, 1)) 1;;
        // border: 2px solid red;
        border-radius: 50%;
        border:1px dashed #4D2EFA;

  
        position: absolute;
        left: 55px;
        top: 55px;
        z-index: 1000;

        animation:identifier 10s  linear infinite;
   }

   @keyframes identifier {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
        
   }
}
</style>