<template>
  <div class="keyword-search">
    <div class="keyword-search-title">{{ year }}年{{ month }}月核心关键词搜索量</div>
    <div class="keyword-search-value">
      <span v-show="loading">数据加载中...</span>
      <span v-show="!loading">{{ searchVolume }}</span>
    </div>
    <div class="keyword-search-line"></div>
    <div class="keyword-search-tip">
      <span>关键词难度</span>
      <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>
    </div>
    <div class="keyword-search-bar">
      <DifficultyBar :value="competition"></DifficultyBar>
    </div>
  </div>
</template>

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

const mainStore = useMainStore();

const keywordInfo = computed(() => mainStore.getKeywordInfo);

const loading = computed(() => keywordInfo.value.loading);

const data = computed(() => keywordInfo.value.data ?? {});

const year = computed(() => data.value.monthlySearchesBO?.year);
const month = computed(() => data.value.monthlySearchesBO?.month);
const competition = computed(() => data.value.competition ?? 0);

const searchVolume = computed(() => {
  const search_volume = data.value.monthlySearchesBO?.search_volume ?? 0;

  return search_volume.toLocaleString();
});
</script>

<style lang="scss" scoped>
.keyword-search {
  width: 100%;
  height: 100%;

  &-title {
    font-weight: bold;
    font-size: 20px;
    color: var(--promotion--color-primary);
  }

  &-value {
    margin-top: 20px;
    font-weight: bold;
    font-size: 30px;
    color: #282e30;
  }

  &-line {
    width: 546px;
    height: 1px;
    margin: 36px 0;
    background: #036eb8;
  }

  &-tip {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    color: var(--promotion--color-primary);

    img {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
  }

  &-bar {
    margin-top: 20px;
  }
}
</style>
