<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-grid :border="false" :clickable="true" :column-num="3">
            <van-grid-item v-for="item in list" :key="item.id"
              @click="$router.push({ name: 'flow', query: { stockCode: item.stockCode } })">
              <div class="itemImage">
                <svg class="stockIcon" aria-hidden="true">
                  <use :xlink:href="`#icon-${item.companyIcon}`"></use>
                </svg>
              </div>
              <div class="itemName">{{ item.stockName }}</div>
            </van-grid-item>
          </van-grid>
        </van-list>
      </van-pull-refresh>
      <van-empty v-else />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { stockCompanyFlowInfoListCompany } from '@/utils/api'
let pageContent = ref(null)
const scrollPosition = ref(0)
const getData = async () => {
  const { data } = await stockCompanyFlowInfoListCompany()
  return { list: data, totalCount: data.length }
}

const refresh = () => {
  onRefresh()
}
import { listLoadAndRefresh } from '@/mixins/list-load-and-refresh'
const { refreshing, finished, loading, list, onLoad, onRefresh } = listLoadAndRefresh(getData, 'stock')
import { scrollList } from '@/mixins/scroll-list'
const { setScrollTop, setScrollPositionAndRefreshFlag } = scrollList(pageContent, scrollPosition, refresh)

setScrollTop()
onBeforeRouteLeave((to, from) => {
  setScrollPositionAndRefreshFlag(to, 'track')
})
</script>

<style lang='scss' scoped>
.tabbar-list {
  padding: 0 20px;
}

:deep(.van-grid-item) {
  padding-right: 20px;
  padding-bottom: 26px;
}

:deep(.van-grid-item:nth-child(3n)) {
  padding-right: 0;
}

:deep(.van-grid-item__content) {
  padding: 0;
}

.itemImage {
  margin-top: 18px;
  height: 36px;

  .stockIcon {
    max-height: 36px;
    width: auto;
    max-width: 100%;
  }
}

.itemName {
  height: 20px;
  line-height: 20px;
  color: #666;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
</style>
