<template>
  <div class="rank-table">
    <div class="rank-table-head">最有价值的关键词排名</div>
    <el-table :data="tableData">
      <el-table-column prop="keyword" 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">
          {{ parseNumber(scope.row.searchVolume) }}
        </template>
      </el-table-column>
      <el-table-column prop="monthly" align="center" label="SEO点击次数（变化）">
        <template #header>
          <el-tooltip popper-class="help-tip" effect="light" placement="top">
            <template #content style="padding: 20px">
              <span class="title">SEO点击次数</span>
              <span class="value"
                >根据关键词当前的排名，估算出它每月应该为其页面带来这么多点击量。
                “变化”的计数显示了该域名根据当前排名与上次排名相比，获得了多少次更多的点击（或更少的点击）。</span
              >
            </template>
            <img :src="Help" />
          </el-tooltip>
          SEO点击次数（变化）
        </template>
        <template #default="scope">
          <span v-if="scope.row.monthly > 0" style="color: #036eb8">{{
            '+' + parseNumber(scope.row.monthly)
          }}</span>
          <span v-else style="color: red">{{ parseNumber(scope.row.monthly) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dp" align="center" label="DP（关键词难度）">
        <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>
          DP（关键词难度）
        </template>
      </el-table-column>
      <el-table-column prop="cpc" align="center" label="CPC（每次点击费用）">
        <template #header>
          <el-tooltip popper-class="help-tip" effect="light" placement="top">
            <template #content style="padding: 20px">
              <span class="title">CPC（每次点击费用）</span>
              <span class="value">根据平均每次点击费用和词组匹配估算值来筛选您的关键词结果。</span>
            </template>
            <img :src="Help" />
          </el-tooltip>
          CPC（每次点击费用）
        </template>
        <template #default="scope">
          {{ scope.row.cpc ? '$ ' + scope.row.cpc : '-' }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="searchVolume" align="center" label="桌面搜索"> </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 parseNumber = (num: number) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K';
  }
  return num;
};
// const tableData = ref([
//   {
//     searchVolume: 5400,
//     cpc: 0.16,
//     monthly: 50,
//     keyword: 'popmart.com',
//     quarterly: 50,
//     dp: 92,
//     yearly: 10471
//   },
//   {
//     searchVolume: 70,
//     cpc: 0.96,
//     monthly: 27,
//     keyword: 'pop art usa',
//     quarterly: 27,
//     dp: 6,
//     yearly: 600
//   }
// ]);
</script>

<style lang="scss" scoped>
.rank-table {
  width: 100%;

  :deep(.el-table) {
    width: 100%;
    // min-height: 376px;
  }

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