<template>
  <div class="goods-card card">
    <div class="header">
      <span>销量榜</span>
    </div>
    <el-table :data="data" class="sa-table" stripe>
      <template #empty>
        <sa-empty />
      </template>
      <el-table-column label="排名" width="60" align="center">
        <template #default="scope">
          <img
            class="top"
            :src="'./static/images/shop/dashboard/top' + (scope.$index + 1) + '.png'"
          />
        </template>
      </el-table-column>
      <el-table-column label="名称" min-width="200">
        <template #default="scope">
          <div class="sa-flex">
            <sa-image :url="checkUrl(scope.row.image)" size="20" />
            <div class="sa-line-1 sa-m-l-8">
              {{ scope.row.title || '-' }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="销量" width="100">
        <template #default="scope">
          <div class="sa-line-1">
            {{ scope.row.real_sales || '-' }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const props = defineProps(['data']);
</script>

<style lang="scss" scoped>
  .goods-card {
    padding: 16px;
    min-height: 326px;
    .header {
      line-height: 16px;
      margin-bottom: 16px;
      font-size: 14px;
      color: var(--sa-subtitle);
    }
    .top {
      width: 18px;
      height: 20px;
      display: inline-block;
    }
    .sa-image {
      flex-shrink: 0;
    }
  }
</style>
