<template>
  <div class="page-div">
    <back-button />
    <div class="header">
      <h1 class="title">全球主要指数系列</h1>
    </div>
    <div class="info-card">
      <p class="info-text">
        本页面展示了全球主要指数系列，包括国际知名指数（如MSCI、FTSE、S&P、纳斯达克等）和中国市场重要指数（如中证系列、恒指系列等）。
        这些指数涵盖了全球主要金融市场，帮助投资者了解全球市场趋势，把握投资机会。
      </p>
    </div>
    <div class="grid">
      <van-grid :column-num="2" :gutter="16" :border="false">
        <van-grid-item class="indicator-card" v-for="item in list" :key="item.dicKey">
          <div @touchstart="onTouchStart(item.dicValue)" @touchend="onTouchEnd(item.dicValue, 'index-list', item.dicKey)" class="item"
            @touchcancel="onTouchCancel(item.dicValue)" :class="{ 'tapped': tappedItem === item.dicValue }">
            <div class="card-content" :style="{ backgroundColor: item.bgColor, borderLeftColor: item.color }">
              <div class="card-name">{{ item.dicValue }}</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 { sysDicListByType } from '@/utils/api'
import { colorList } from '@/utils/colorList'

const init = async () => {
  const { data } = await sysDicListByType({ dicType: 'index_series' })
  list.value = 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>
