<template>
  <div class="recommend-table">
    <div class="recommend-table-head">推荐关键词</div>
    <el-table :data="tableData">
      <el-table-column prop="keywords" align="center" label="关键词">
        <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" label="搜索量">
        <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>
        <template #default="scope">
          {{
            scope.row.searchVolume >= 1000
              ? (scope.row.searchVolume / 1000).toFixed(1) + 'K'
              : scope.row.searchVolume
          }}
        </template>
      </el-table-column>
      <el-table-column prop="price" align="center" label="价格">
        <template #header>
          <el-tooltip popper-class="help-tip" effect="light" placement="top">
            <template #content style="padding: 20px">
              <span class="title">价格</span>
              <span class="value">根据平均每次点击费用和词组匹配估算值来筛选您的关键词结果。</span>
            </template>
            <img :src="Help" />
          </el-tooltip>
          价格
        </template>
        <template #default="scope">
          {{ scope.row.price ? '$ ' + scope.row.price : '-' }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

const props = defineProps<{
  tableData: any[];
}>();

const mainStore = useMainStore();

const expanded = computed(() => mainStore.getExpanded);
const tableData = computed(() => (expanded.value ? props.tableData : props.tableData.slice(0, 10)));

// const tableData = ref([
//   {
//     searchVolume: 1500000,
//     keywords: 'pop mart',
//     price: 0.11
//   },
//   {
//     searchVolume: 480,
//     keywords: 'popmart global',
//     price: 0.57
//   }
// ]);
</script>

<style lang="scss" scoped>
.recommend-table {
  width: 100%;
  // min-height: 300px;

  &-head {
    height: 66px;
    padding-left: 30px;
    font-weight: bold;
    font-size: 20px;
    color: #282e30;
    box-sizing: border-box;
  }

  :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>
