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

// 外部获取的数据
const { data } = recommend({});
const props = ref<TablePropsType[]>([
  {
    prop: 'rank',
    label: '排名',
    width: 58,
    render: (h, p) => {
      return h(
        'div',
        {
          style: {
            color: '#81B64C'
          }
        },
        p.row.rank
      );
    }
  },
  {
    prop: 'trend_name',
    label: '趋势名称',
    width: 100
  },
  {
    prop: 'growth_ring_ratio',
    label: '声量增长环比',
    width: 150,
    sortable: true,
    render: (h, p) => {
      return h(
        'div',
        {
          style: {
            color: p.row.growth_ring_ratio > 0 ? '#DD6E4E' : '#81B64C'
          }
        },
        [
          h('span', p.row.growth_ring_ratio + '%'),
          h('i', {
            class: 'van-icon van-icon-play ml5',
            style: {
              transform: p.row.growth_ring_ratio > 0 ? 'rotate(-90deg)' : 'rotate(90deg)'
            }
          })
        ]
      );
    }
  },
  {
    prop: 'sales_growth_ring_ratio',
    label: '销量增长环比',
    width: 150,
    sortable: true,
    render: (h, p) => {
      return h(
        'div',
        {
          style: {
            color: p.row.sales_growth_ring_ratio > 0 ? '#DD6E4E' : '#81B64C'
          }
        },

        [
          h('span', p.row.sales_growth_ring_ratio + '%'),
          h('i', {
            class: 'van-icon van-icon-play ml5',
            style: {
              transform: p.row.sales_growth_ring_ratio > 0 ? 'rotate(-90deg)' : 'rotate(90deg)'
            }
          })
        ]
      );
    }
  }
]);
</script>

<template>
  <van-cell class="home_recommend">
    <template #extra>
      <div style="width: 90vw">
        <common-layout title="123">
          <template #title>
            <h3 class="recommend-layout-title">创新速递</h3>
          </template>

          <span class="recommend-title">{{ data?.title }}</span>
          <yl-table
            style="margin-top: 10px"
            :header-style="{ background: '#E8F9F4' }"
            :data="data?.surveyTrendDataVOS"
            :props="props"
          />
          <!-- 剧中展示提示语 -->
          <div class="more">
            <span>- 最新数据及更多创新趋势请到YIP探索 - </span>
          </div>
        </common-layout>
      </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;

  .recommend-layout-title {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 800;
    font-size: 15px;
    color: #000000;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }

  .recommend-title {
    color: #000000;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 14px;
    font-weight: 800;
    line-height: 15px;
    text-align: left;
    font-style: normal;
  }

  .more {
    margin: 15px 5px 5px 5px;
    color: #919191;
    font-weight: 400;
    font-size: 13px;
    text-align: center;
  }
}
</style>
