<script setup lang="ts">
import { recommend } from '@/hooks/request/recommend';
import { ref } from 'vue';
import YlTable from '@/components/YlTable/Index.vue';

// 外部获取的数据
const { data } = recommend({});

const props = ref<TablePropsType[]>([
  {
    prop: 'rank',
    label: '排名',
    width: '55'
  },
  {
    prop: 'trend_name',
    label: '趋势名称',
    width: '85'
  },
  {
    prop: 'growth_ring_ratio',
    label: '声量增长环比',
    width: '113'
  },
  {
    prop: 'sales_growth_ring_ratio',
    label: '销量增长环比',
    width: '113'
  }
]);
</script>

<template>
  <van-cell class="home_recommend">
    <template #extra>
      <div style="width: 88vw">
        <yl-table :data="data?.surveyTrendDataVOS" :props="props" />
      </div>
    </template>
  </van-cell>
</template>

<style lang="scss" scoped>
@use '@/assets/css/theme' as *;

.home_recommend {
  border-radius: $card-radius;
  justify-content: center;
  align-items: center;
}
</style>
