<template>
  <div class="page-content">
    <van-image class="img" src="/img/indicate.jpeg" />
    <div class="grid">
      <van-grid :column-num="3" :gutter="16">
        <van-grid-item v-for="item in tableList" :key="item.name">
          <div @touchstart="onTouchStart(item.name)" @touchend="onTouchEnd(item.name, item.url)" class="item"
            @touchcancel="onTouchCancel(item.name)" :class="{ 'tapped': tappedItem === item.name }">
            <div class="icon d-flex justify-content-center align-items-center" :style="{ backgroundColor: item.bgColor }">
              <van-icon :style="{ color: item.color }" :name="item.icon" size="28" />
            </div>
            <div>{{item.name}}</div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <tabbar />
  </div>
</template>
<script setup lang="ts">
import { colorList } from '@/utils/colorList'
import { tapMixins } from '@/mixins/tap-mixins'
const { tappedItem, onTouchStart, onTouchEnd, onTouchCancel } = tapMixins()

const tableList = [
  {
    url: 'economy-list',
    name: '全球经济',
    icon: 'chart-trending-o',
    color: colorList[0].color,
    bgColor: colorList[0].bgColor
  },
  {
    url: '',
    name: '股票数据',
    icon: 'bar-chart-o',
    color: colorList[1].color,
    bgColor: colorList[1].bgColor
  },
  {
    url: 'fred-list',
    name: 'FRED专题',
    icon: 'diamond-o',
    color: colorList[2].color,
    bgColor: colorList[2].bgColor
  },
  {
    url: 'series-list',
    name: '指数专题',
    icon: 'discount-o',
    color: colorList[3].color,
    bgColor: colorList[3].bgColor
  },
  {
    url: 'fund-list',
    name: '基金',
    icon: 'after-sale',
    color: colorList[4].color,
    bgColor: colorList[4].bgColor
  },
  {
    url: 'group-list',
    name: '精选组合',
    icon: 'fire-o',
    color: colorList[5].color,
    bgColor: colorList[5].bgColor
  }
]
</script>

<style lang='scss' scoped>
.img {
  width: 100%;
  height: 200px;
}
:deep(.van-grid) {
  background-color: #F2F3F5;
  padding: 16px 0;
}

:deep(.van-grid-item) {
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, font-size 0.2s ease;

  .van-grid-item__content {
    border-radius: 16px;
    height: 100%;
    padding: 0;
    background-color: rgba(240, 240, 240, 0.5);

    .item {
      padding: 16px 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;

      &.tapped {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        background-color: rgba(240, 240, 240, 0.5);
      }

      .icon {
        margin-bottom: 12px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
