<template>
  <div
    :class="
      isLg === false && nowItem === 2 ? 'bg-white' : 'bg-gradient-to-b from-[#fff4cc] to-white'
    "
    class="fixed inset-0 -z-10"
  ></div>
  <div class="lg:hidden items-center flex justify-center">
    <div class="mt-4">
      <div
        class="inline-flex items-center rounded-full p-1 bg-white shadow-inner ring-1 ring-gray-200"
      >
        <button
          @click="changeItem(1)"
          class="px-4 h-9 rounded-full text-sm font-semibold"
          :class="nowItem === 1 ? 'bg-[#0B0D3E] text-white' : 'text-gray-500'"
        >
          Overview
        </button>
        <button
          @click="changeItem(2)"
          class="px-4 h-9 rounded-full text-sm font-semibold"
          :class="nowItem === 2 ? 'bg-[#0B0D3E] text-white' : 'text-gray-500'"
        >
          Activity
        </button>
      </div>
    </div>
  </div>
  <div style="display: flex; flex-direction: row">
    <div :class="nowItem === 1 || isLg ? '' : 'hidden'" class="flex-col lg:w-5/7 items-center flex">
      <circleDashboard v-model:value="val" v-model:max="max" />
      <img @click="tapImg(1)" class="hidden lg:block w-3/5 rounded-b-lg mt-5" :src="visaImg" alt="" />
      <img @click="tapImg(1)" class="block lg:hidden w-6/7 rounded-b-lg mt-5" :src="visaSmall" alt="" />
      <div class="flex justify-between w-6/7 lg:w-3/5 items-center mt-10 mb-5">
        <span style="font-size: 24px; font-weight: bold">Gift cards</span>
        <span>7 available</span>
      </div>
      <!-- <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 w-6/7 lg:w-3/5">
        <img class="shadow" v-for="(img, index) in showImgList" :src="img" alt="" :key="index" />
      </div> -->
      <div class="w-6/7 lg:w-3/5">
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- 一行/全部的切换由 displayImages 决定 -->
          <div
            v-for="(img, index) in displayImages"
            :key="index"
            class="group overflow-hidden rounded-lg shadow"
            @click="tapImg(index+2)"
          >
            <img
              :src="img"
              alt=""
              class="w-full h-full object-cover transition-transform duration-300 ease-out transform-gpu group-hover:scale-115"
            />
          </div>
        </div>
        <!-- 切换按钮：当图片总数大于当前列数时才显示 -->
        <div
          class="w-fit mt-4 mb-4 border-0 border-b-2 items-center font-medium text-blue-800"
          @click="collapsed = !collapsed"
        >
          {{ collapsed ? 'View more' : 'View less' }}
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-10 mb-10">
          <img
            @click="tapBottomImg(index)"
            v-for="(img, index) in bottomImages"
            :src="img"
            alt=""
            :key="index"
          />
        </div>
      </div>
    </div>
    <!-- PC右边的 Recent activity -->
    <div
      :class="nowItem === 1 && isLg === false ? 'hidden' : 'w-full'"
      class="lg:w-2/7 fixed right-0 p-6 bg-white min-h-screen"
    >
      <h1 class="mt-5 font-bold text-xl">Recent activity</h1>

      <!-- <div v-for="group in rightItems" :key="group.date" class="mb-3 mt-6">
        <div class="bg-gray-100 rounded-t-lg items-center text-sm text-gray-600 p-2.5">
          {{ group.date }}
        </div>
        <el-collapse>
          <el-collapse-item v-for="row in group.items" :key="row.type">
            <template #title>
              <div class="flex justify-between w-full">
                <div style="font-size: 16px" class="font-medium">{{ row.type }}</div>
                <span class="text-green-800 mr-2.5 font-bold">{{ row.points }}</span>
              </div>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div> -->

      <div v-for="group in recentItems" :key="group.date" class="mb-3 mt-6">
        <div class="bg-gray-100 rounded-t-lg items-center text-sm text-gray-600 p-2.5">
           items type :
        </div>
        <el-collapse>
          <el-collapse-item icon="">
            <template #title>
              <div class="flex justify-between w-full">
                <div style="font-size: 16px" class="font-medium">{{ titleMap[group.fund_type] }}</div>
                <span class="text-green-800 mr-2.5 font-bold">{{ group.money }} pts</span>
              </div>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import circleDashboard from '@/view/components/CircleDashboard.vue'
import visaImg from '@/assets/visa1.jpg'
import visaSmall from '@/assets/visa2.jpg'
import oneImg from '@/assets/1.png'
import twoImg from '@/assets/2.png'
import threeImg from '@/assets/3.png'
import fourImg from '@/assets/4.png'
import fiveImg from '@/assets/5.png'
import sixImg from '@/assets/6.png'
import sevenImg from '@/assets/7.png'
import paypalImg from '@/assets/paypal.jpg'
import banktransfer from '@/assets/banktransfer.jpg'
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import {jiFenList} from '@/http/register.js'
import {getToken} from '@/utils/local.js'
import router from '@/router'
// import { kebabCase } from 'element-plus/es/utils/strings.mjs'

const val = ref(0)
const max = ref(500)

const showImgList = ref([oneImg, twoImg, threeImg, fourImg, fiveImg, sixImg, sevenImg])
const displayImages = ref([])
const bottomImages = ref([paypalImg, banktransfer])
const nowItem = ref(1)
//Answer basic information  基础资料答题
//Answer questions 答题

const titleMap = {
  31:"Answer basic information",
  32:"Answer questions"
}
const recentItems = ref([])

const rightItems = [
  {
    date: 'September 04 2025',
    items: [{ type: 'Desktop app installed', points: '+100 pts' }],
  },
  {
    date: 'September 02 2025',
    items: [
      { type: 'General Profile Questions', points: '+50 pts' },
      { type: 'Signup Bonus', points: '+25 pts' },
    ],
  },
]

// 是否收起为“一行”
const collapsed = ref(true)

// 监听断点：小屏2列，大屏(>=1024px)3列
const isLg = ref(false)
const cols = computed(() => (isLg.value ? 3 : 2))

watch(
  [collapsed, cols],
  (newValue1, newValue2) => {
    displayImages.value = collapsed.value
      ? showImgList.value.slice(0, cols.value)
      : showImgList.value
  },
  { immediate: true }
)

const tapBottomImg = (index) => {
  if(index == 1){
     tapImg(9)
  }
}

const changeItem = (index) => {
  nowItem.value = index
  if (index === 1) {
  }
  if (index === 2) {
    
  }
}


const getJiFenList = async() => {
  const myToken = getToken()
  const res = await jiFenList(myToken)
  if(res.code == 1){
    recentItems.value = res.data.data
  }
}

const tapImg = (index) => {
  router.push({path:"/rewardsDetail",query:{index:index}})
}


onMounted(() => {

  getJiFenList()

  if (typeof window === 'undefined') return
  const mql = window.matchMedia('(min-width: 1024px)')

  const update = (matches) => (isLg.value = matches)
  update(mql.matches)

  const onChange = (e) => update(e.matches)

  // 兼容不同浏览器
  if ('addEventListener' in mql) mql.addEventListener('change', onChange)
  else mql.addListener(onChange)

  onBeforeUnmount(() => {
    if ('removeEventListener' in mql) mql.removeEventListener('change', onChange)
    else mql.removeListener(onChange)
  })
})
</script>

<style lang="scss" scoped>
</style>