<template>
  <div class="page-div">
    <back-button />
    <div class="header flex items-center justify-center">
      <h1 class="title">{{ seriesName }}</h1>
    </div>
    <div class="grid">
      <van-grid :column-num="1" :gutter="16" :border="false">
        <van-grid-item v-for="item in list" :key="item.indexId">
          <div @touchstart="onTouchStart(item.indexName)" @touchend="onTouchEnd(item.indexName, 'index-detail', item.indexId)" class="item"
            @touchcancel="onTouchCancel(item.indexName)" :class="{ 'tapped': tappedItem === item.indexName }">
            <div class="card-content" :style="{ backgroundColor: item.bgColor, borderLeftColor: item.color }">
              <div class="card-code" :style="{ color: item.color }">{{ item.indexCode }}</div>
              <div class="card-name">{{ item.indexName }}</div>
              <div class="card-note">{{ item.indexNote }}</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, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let seriesName = ref('')
let list = ref<any[]>([])
import { indexInfoSeries, sysDicListByType } from '@/utils/api'
import { colorList } from '@/utils/colorList'

const init = async () => {
  const { data: series } = await sysDicListByType({ dicType: 'index_series' })
  const seriesItem = series.find((item: any) => { return item.dicKey === route.params.id })
  seriesName.value = seriesItem.dicValue
  const { data } = await indexInfoSeries({ seriesCode: route.params.id })
  list.value = data.fundList
  list.value.forEach((ele, index) => {
    ele.color = colorList[index % colorList.length].color
    ele.bgColor = colorList[index % colorList.length].bgColor
  })
}

onMounted (() =>{
  init()
})

watch(
  () => route.fullPath,
  (newPath, oldPath) => {
    if (oldPath?.includes('series-list') && newPath?.includes('index-list')) {
      nextTick(() => {
        init()
      })
    }
  },
  { immediate: true }
)
</script>

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