<template>
  <el-row :gutter="16">
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <goods-card :data="state.goods" />
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <hot-search :data="state.hotSearch" />
    </el-col>
  </el-row>
</template>

<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../../dashboard.service';
  import GoodsCard from './goods-card.vue';
  import HotSearch from './hot-search.vue';

  const state = reactive({
    goods: [],
    hotSearch: [],
  });

  async function getRanking() {
    const { code, data } = await api.ranking();
    if (code == 200) {
      state.goods = data.goods;
      state.hotSearch = data.hot_search;
    }
  }

  onMounted(() => {
    getRanking();
  });
</script>
