<template>
  <div class="page-div">
    <back-button />
    <div class="header">
      <h1 class="title">FRED 经济指标</h1>
      <p class="subtitle">美国联邦储备经济数据</p>
    </div>
    <div class="info-card">
      <p class="info-text">
        FRED (Federal Reserve Economic Data) 提供了美国经济的关键指标数据，帮助您做出更明智的投资决策。
      </p>
    </div>
    <div class="grid">
      <van-grid :column-num="1" :gutter="16" :border="false">
        <van-grid-item v-for="item in list" :key="item.fredCode">
          <div @touchstart="onTouchStart(item.fredName)" @touchend="onTouchEnd(item.fredName, 'fred-detail', item.id)" class="item"
            @touchcancel="onTouchCancel(item.fredName)" :class="{ 'tapped': tappedItem === item.fredName }">
            <div class="card-content" :style="{ backgroundColor: item.bgColor, borderLeftColor: item.color }">
              <div class="card-code" :style="{ color: item.color }">{{ item.fredCode }}</div>
              <div class="card-name">{{ item.fredName }}</div>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup lang="ts">
import BackButton from '@/components/back-button.vue'

import { tapMixins } from '@/mixins/tap-mixins'
const { tappedItem, onTouchStart, onTouchEnd, onTouchCancel } = tapMixins()

import { ref, onMounted } from 'vue'
let list = ref<any[]>([])
import { fredInfoList } from '@/utils/api'
import { colorList } from '@/utils/colorList'

const init = async () => {
  const { data } = await fredInfoList()
  list.value = [...[
    { fredCode: 'BBB-AAA', fredName: 'Option-Adjusted Spread', id: '' }
  ], ...data]
  
  list.value.forEach((ele, index) => {
    ele.color = colorList[index % colorList.length].color
    ele.bgColor = colorList[index % colorList.length].bgColor
  })
}

onMounted (() =>{
  init()
})
</script>

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