<template>
  <div class="w-full">
    <div class="px-6 pt-6 pb-5">
      <div class="relative flex flex-col items-center">
        <svg :width="size" :height="svgH" :viewBox="`0 0 ${size} ${svgH}`" class="block">
          <defs>
            <linearGradient id="gaugeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stop-color="#FFC83A" />
              <stop offset="100%" stop-color="#F59E0B" />
            </linearGradient>
          </defs>

          <!-- 底轨（浅灰，整条半圆） -->
          <path :d="d" stroke="#DCE0EA" stroke-width="8" fill="none" stroke-linecap="round" />

          <!-- 进度（同一路径，圆头，粗一些；从左→右增长） -->
          <path
            :d="d"
            stroke="url(#gaugeGrad)"
            stroke-width="12"
            fill="none"
            stroke-linecap="round"
            :style="{ strokeDasharray: dashArray }"
          />

          <!-- 左右刻度（在半圆下方） -->
          <text
            :x="10"
            :y="cy + 18"
            text-anchor="start"
            class="fill-gray-500 text-[12px] select-none"
          >
            0
          </text>
          <text
            :x="size"
            :y="cy + 18"
            text-anchor="end"
            class="fill-gray-500 text-[12px] select-none"
          >
            {{ max }}
          </text>
        </svg>

        <!-- 中心数字与说明 -->
        <div class="absolute top-[42%] -translate-y-1/2 text-center">
          <div class="lg:text-[50px] text-[36px] leading-none font-extrabold" style="color: #0b0d3e">
            {{active == 'points' ?  value :nowUSD }}
          </div>
          <div class="mt-2 text-base font-medium text-gray-600">{{ remaining }} points to go!</div>
        </div>

        <!-- 胶囊切换（外观同图） -->
        <div class="mt-4">
          <div
            class="inline-flex items-center rounded-full p-1 bg-white shadow-inner ring-1 ring-gray-200"
          >
            <!-- <button class="px-4 h-9 rounded-full text-sm font-semibold bg-[#0B0D3E] text-white">
              Points
            </button>
            <button class="px-4 h-9 rounded-full text-sm font-semibold text-gray-500">USD</button> -->
            <div class="flex gap-2">
              <button
                :class="btnClass(active === 'points')"
                @click="active = 'points'"
                type="button"
                aria-pressed="active === 'points'"
              >
                Points
              </button>

              <button
                :class="btnClass(active === 'usd')"
                @click="active = 'usd'"
                type="button"
                aria-pressed="active === 'usd'"
              >
                USD
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="js">
import { computed,ref,onMounted } from 'vue'
import {getPersonInfo} from '@/http/register.js'
import {getToken} from '@/utils/local.js'


const active = ref('points') // 默认选中

// 动态样式：选中与未选
const btnClass = (isActive) =>
  [
    'px-4 h-9 rounded-full text-sm font-semibold transition-colors',
    isActive
      ? 'bg-[#0B0D3E] text-white'
      : 'bg-transparent text-gray-500 hover:text-gray-700'
  ].join(' ')

const h1 = ref(null)
const jiFen = ref(0)
// const USD = ref(0)

// interface Props {
//   value: number
//   max: number
//   size?: number // 画布宽度（高度=半高+文字留白）
// }
const props = defineProps({
  value: { type: Number, default: 0 },   
  max:   { type: Number, default: 0 },   
  size:  { type: Number, default: 260 },
})

const emit = defineEmits(['update:value','update:max'])


// 基础几何
const cx = computed(() => props.size / 2)
const cy = computed(() => props.size / 2)
const r = computed(() => props.size / 2 - 12) // 让粗进度不被裁切
const svgH = computed(() => props.size / 2 + 28) // 给刻度留出空间

// 单一路径：上半圆（从左 π → 右 0），避免任何偏轨
const d = computed(() => arcPath(cx.value, cy.value, r.value, Math.PI, 0))

// 进度（0~1）
const progress = computed(() => Math.min(Math.max(props.value / props.max, 0), 1))
const remaining = computed(() => Math.max(props.max - props.value, 0))

// 用真实弧长（πr）控制 dash，确保各浏览器一致
const arcLen = computed(() => Math.PI * r.value)
const dashArray = computed(() => `${arcLen.value * progress.value} ${arcLen.value}`)

// 画弧：A 命令，sweep=0（逆时针），保证“从左到右”绘制上半圆
function arcPath(cx, cy, r, start, end) {
  const sx = cx - r * Math.cos(start)
  const sy = cy - r * Math.sin(start) // SVG y 轴向下
  const ex = cx - r * Math.cos(end)
  const ey = cy - r * Math.sin(end)
  const largeArc = Math.abs(end - start) >= Math.PI ? 1 : 0 // 正好半圆也取 1
  const sweep = 0
  return `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} ${sweep} ${ex} ${ey}`
}

// 对外暴露：props.value / props.max
const value = computed(() => props.value)
const max = computed(() => props.max)


const nowUSD = computed(() => {
  return '$' + (jiFen.value/h1.value).toFixed(2)
})

const getJiFen = async() => {
  const myToken = getToken()
  const res = await getPersonInfo(myToken)
  if(res.code == 1){
    jiFen.value = Number(res.data.integrals)
    h1.value = Number(res.data.hl)
    // console.log('h1的值是什么:',h1.value)
    emit('update:value', jiFen.value)  // 通知父更新 value
    emit('update:max', Number(res.data.mintocash))      // 通知父更新 max
  }
  // console.log('获取的个人信息是：',res)
}

onMounted(()=>{
  getJiFen()
})

</script>
  