<template>
  <div class="page-content">
    <div class="tabbar-list" ref="pageContent">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="list.length > 0">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
          :immediate-check="false">
          <van-cell v-for="item in list" :key="item.stockCode"
            @click="$router.push({ name: 'stock-detail', query: { stockCode: item.stockCode } })">
            <van-row class="mb-1">
              <van-col span="12">
                <div class="text-start">
                  <van-tag :class="item.eventTypeColor" size="medium">{{ item.eventTypeName }}</van-tag>
                </div>
              </van-col>
              <van-col span="12">
                <div class="text-end">
                  <div class="sub-title balck-text-color">
                    {{ item.stockCode }}{{ item.stockName ? '【' + item.stockName + '】' : '' }}
                  </div>
                </div>
              </van-col>
            </van-row>
            <div v-if="item.eventType === 'CHDP'">
              <div v-if="item.eventNote">
                <div class="audioDiv d-flex align-items-center">
                  <van-icon name="play-circle" />
                </div>
              </div>
            </div>
            <div class="eventNote text-start" v-else>{{ item.eventNote }}</div>
            <div class="text-end tip">{{ item.sysDate }}</div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
      <van-empty v-else />
      <tabbar />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { listLoadAndRefresh } from '@/mixins/list-load-and-refresh'
import { scrollList } from '@/mixins/scroll-list'
import { onBeforeRouteLeave } from 'vue-router'
import Tabbar from '@/components/tabbar.vue'

let pageContent = ref(null)
const scrollPosition = ref(0)

const refresh = () => {
  onRefresh()
}

import { stockStockinfoEventNews } from '@/utils/api'

const getData = async () => {
  const { data } = await stockStockinfoEventNews({
    curPage: curPage.value,
    limit: 20
  })
  data.list.map((ele: any) => {
    switch (ele.eventType) {
      case 'DP':
        ele.eventTypeColor = 'primary-background-color'
        break
      case 'SFBG':
        ele.eventTypeColor = 'danger-background-color'
        break
      case 'GXBG':
        ele.eventTypeColor = 'warning-background-color'
        break
      case 'XLL':
        ele.eventTypeColor = 'pink-background-color'
        break
      case 'CLBG':
        ele.eventTypeColor = 'other-background-color'
        break
      case 'JOIN':
        ele.eventTypeColor = 'success-background-color'
        break
      case 'CHDP':
        ele.eventTypeColor = 'purple-background-color'
        break
      case 'DATA':
        ele.eventTypeColor = 'yellow-background-color'
        break
    }
  })
  return data
}

const { refreshing, finished, loading, curPage, list, onLoad, onRefresh } = listLoadAndRefresh(getData, 'stock')
const { setScrollTop, setScrollPositionAndRefreshFlag } = scrollList(pageContent, scrollPosition, refresh)

setScrollTop()
onBeforeRouteLeave((to, from) => {
  setScrollPositionAndRefreshFlag(to, 'stock-detail')
})

</script>

<style lang='scss' scoped>
.eventNote {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.audioDiv {
  height: 28px;
  width: 300px;
  border-radius: 32px;
  background-color: #f1f3f4;
  padding-left: 10px;
  margin: 4px 0;

  .van-icon {
    color: #000;
  }
}
</style>
