<template>
  <div class="hot-search card">
    <div class="header">
      <span>热搜榜</span>
    </div>
    <el-row :gutter="16">
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <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-line-1">
                {{ scope.row.keyword || '-' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="搜索量(次)" width="100">
            <template #default="scope">
              <div class="sa-line-1">
                {{ scope.row.num }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <div class="wrap sa-flex sa-row-center">
          <div class="container sa-flex sa-row-center">
            <v-chart :option="pieOption" autoresize />
            <!-- <div class="bg"></div> -->
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import VChart from 'vue-echarts';

  const props = defineProps(['data']);

  const pieData = computed(() => {
    let arr = [];
    props.data.forEach((item) => {
      arr.push({
        name: item.keyword,
        value: item.num,
      });
    });
    return arr;
  });

  const pieOption = reactive({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: '热搜榜',
        type: 'pie',
        radius: ['52%', '90%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        zlevel: 1,
        z: 1,
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'normal',
          },
        },
        labelLine: {
          show: false,
        },
        data: pieData,
      },
    ],
  });
</script>
<style lang="scss" scoped>
  .hot-search {
    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;
    }
    .wrap {
      width: 100%;
    }
    .container {
      width: 100%;
      max-width: 192px;
      height: 192px;
      box-sizing: border-box;
      position: relative;

      .echarts {
        width: 100%;
        z-index: 1;
      }
      .bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 50%;
        background: var(--sa-table-header-bg);
        z-index: 0;
      }
    }
  }
</style>
