
<template>
  <!-- <div class="relative w-full min-h-screen"> -->
  <!-- 背景层 -->
  <div class="fixed inset-0 bg-gradient-to-b from-[#fff4cc] to-white -z-10"></div>

  <div v-loading="homeList.length==0" style="display: flex; flex-direction: row">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 w-full lg:w-5/7">
      <article v-for="(item,index) in homeList" :key="index" class="rounded-xl bg-white shadow-sm p-6 flex flex-col">
        <header class="text-sm text-gray-500 flex items-center justify-between">
          <span
            >Survey ID :
            <span style="color: #000" class="font-black caret-black">{{ item.id }}</span></span
          >
          <span class="inline-flex items-center gap-1">⏱ {{ Math.floor(Math.random() * 30) + 1 }} min</span>
        </header>

        <div class="mt-3 text-3xl font-bold justify-center items-center w-full flex">
          {{item.fs}} <span class="text-base font-normal ml-0.5"> pts</span>
        </div>
        <p class="mt-1 text-gray-500 text-sm w-full flex justify-center items-center">{{ Math.floor(Math.random() * 30) + 1 }} pts/min</p>

        <button @click="answerHome(item.id)" class="mt-5 h-10 rounded-full bg-emerald-600 text-white hover:bg-emerald-700">
          Start survey →
        </button>
      </article>
    </div>
    <div class="lg:w-2/7">
      <!-- 只在 lg 及以上屏幕显示 -->
      <div class="hidden lg:block max-w-md mx-auto p-6">
        <!-- 顶部进度条 -->
        <div class="bg-gradient-to-b">
          <div class="flex flex-col items-center">
            <circleDashboard v-model:value="val" v-model:max="max" />
          </div>
        </div>

        <!-- Checklist -->
        <div class="mt-6 bg-white rounded-2xl shadow p-6">
          <h2 class="text-lg font-semibold">Quick-start checklist</h2>
          <p class="text-sm text-gray-500 mt-1">
            Maximize your earning potential by completing these simple steps.
          </p>

          <ul class="mt-4 space-y-3">
            <li class="flex items-center justify-between">
              <div class="flex items-center gap-2 text-sm">
                <span class="text-pink-500">🖥</span>
                <span>Add desktop app</span>
              </div>
              <span class="text-green-600 font-semibold">+100 pts</span>
            </li>

            <li class="flex items-center justify-between">
              <div class="flex items-center gap-2 text-sm">
                <span class="text-blue-500">🌐</span>
                <span>Add extension</span>
              </div>
              <span class="text-green-600 font-semibold">+100 pts</span>
            </li>

            <li class="flex items-center justify-between">
              <div class="flex items-center gap-2 text-sm">
                <span class="text-green-500">✉️</span>
                <span>Confirm your email</span>
              </div>
              <span class="text-green-600 font-semibold">+25 pts</span>
            </li>

            <li class="flex items-center justify-between text-gray-400 line-through">
              <span class="flex items-center gap-2 text-sm">✔ Complete profile</span>
            </li>
          </ul>
        </div>

        <!-- Pro-tip -->
        <div class="mt-4 bg-gray-50 rounded-xl p-4 text-sm text-gray-600">
          <h3 class="font-semibold mb-1">Pro-tip</h3>
          <p>
            We're constantly looking for freshest surveys across many providers to find the highest
            paying, best matching surveys for you.
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- 内容层 -->

  <!-- </div> -->
</template>

<script setup>
import circleDashboard from '@/view/components/CircleDashboard.vue'
import {wenJuanList} from '@/http/register.js'
import { ref,onMounted } from 'vue';
import { getToken } from '@/utils/local.js'
import { useRouter } from 'vue-router';


const val = ref(0)
const max = ref(260)
const router = useRouter()

const homeList = ref([])

const getHomeList = async() => {
  const myToken = getToken()
  const res = await wenJuanList(myToken)
  if(res.code == 1){
    homeList.value = res.data.list;
  }
}

const answerHome = (ID) => {
  router.push({path:"/homeQuestions",query:{qid:ID}})
}

onMounted(() => {
  getHomeList()
})

</script>
  
  