<template>
  <div class="keyword-table">
    <Empty
      :autoFinish="autoFinish"
      :fail="fail"
      :text="fail ? '生成失败' : 'AI数据生成中...'"
      v-if="loading"
    ></Empty>
    <el-table :data="renderTableData" v-else>
      <el-table-column prop="keyword" align="center">
        <template #header>
          <el-tooltip popper-class="help-tip" effect="light" placement="top">
            <template #content style="padding: 20px">
              <span class="title">关键词</span>
              <span class="value"
                >当您搜索一个术语或短语(又名“关键字")时，通常会有数千个结果。如果某个域名出现在前 50
                名结果中，我们将该搜索词视为其自然(SEO) 关键字之一。</span
              >
            </template>
            <img :src="Help" />
          </el-tooltip>
          关键词
        </template>
      </el-table-column>
      <el-table-column prop="searchVolume" align="center">
        <template #header>
          <el-tooltip popper-class="help-tip" effect="light" placement="top">
            <template #content style="padding: 20px">
              <span class="title">搜索量</span>
              <span class="value"
                >这显示了上个月在美国 https://www.google.com/search?q=Google.com
                上的搜索次数（或在我们其他国家/地区选项中，在所选国家/地区内用 Google
                进行的搜索次数）。我们融合了来自多个来源的数据，以提供该关键词搜索活动的更好快照，因此它不会与
                Google 的搜索量指标完全相同。</span
              >
            </template>
            <img :src="Help" />
          </el-tooltip>
          搜索量
        </template>
      </el-table-column>
      <el-table-column prop="competition" align="center">
        <template #header>
          <el-tooltip popper-class="help-tip" effect="light" placement="top">
            <template #content style="padding: 20px">
              <span class="title">关键词难度</span>
              <span class="value"
                >我们已经计算了在这个关键词上排名的难度。分数基于 1-100 的等级，100 是最难排名的。
                将此数字与您定位的其他关键字进行比较，以了解如何确定 SEO 活动的优先级。</span
              >
            </template>
            <img :src="Help" />
          </el-tooltip>
          关键词难度
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import Help from '../../assets/images/help.png';
import { computed } from 'vue';
import { useMainStore } from '@/store';
import Empty from '@/components/CommonEmpty.vue';

const mainStore = useMainStore();

// const expanded = computed(() => mainStore.getExpanded);

const tableData = computed(() => mainStore.suggestionsInfo.data);
const loading = computed(() => mainStore.suggestionsInfo.loading);
const autoFinish = computed(() => mainStore.suggestionsInfo.autoFinish);
const fail = computed(() => mainStore.suggestionsInfo.fail);
const renderTableData = computed(() => tableData.value.slice(0, 5));

// const renderTableData = computed(() => expanded.value ? tableData.value : tableData.value.slice(0, 5));
</script>

<style lang="scss" scoped>
.keyword-table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  :deep(.el-table) {
    width: 100%;
    // height: 317px;

    .el-table__header {
      height: 52px;

      .el-table__cell {
        background: rgba(3, 110, 184, 0.1) !important;
        font-weight: bold;
        font-size: 16px;
        color: #282e30;
      }
    }

    .el-table__row {
      height: 52px;
      font-weight: bold;
      font-size: 14px;
      color: #282e30;
    }
  }
  :deep(.el-table__cell) {
    img {
      width: 22px;
      height: 22px;
      position: relative;
      top: 5px;
      cursor: pointer;
    }
  }
}
</style>
