<template>
  <div class="page-div">
    <back-button />
    <div class="header">
      <h1 class="title">经济专题</h1>
    </div>
    <div class="grid">
      <van-grid :column-num="1" :gutter="16" :border="false">
        <van-grid-item v-for="item in list" :key="item.id">
          <div @touchstart="onTouchStart(item.economyName)" @touchend="onTouchEnd(item.economyName, 'economy-detail', item.id)" class="item"
            @touchcancel="onTouchCancel(item.economyName)" :class="{ 'tapped': tappedItem === item.economyName }">
            <div class="card-content" :style="{ backgroundColor: item.bgColor, borderLeftColor: item.color }">
              <div class="card-code" :style="{ color: item.color }">{{ item.economyName }}</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 { colorList } from '@/utils/colorList'

const init = async () => {
  list.value = [
    { economyName: '储蓄专题', id: 1 },
    { economyName: '两融专题', id: 2 },
    { economyName: 'A股专题', id: 3 },
    { economyName: '指数专题', id: 4 }
  ]
  
  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>
