<script setup lang="ts">
import { fetchHistory } from '@/hooks/request/useSearch';
import Layout from '@/components/Layout/CommonLayout.vue';
import { list, useFetchRecommon, delHistory } from './hooks/useRecommend';
import { Delete } from '@element-plus/icons-vue';
import { updateKeyword } from '../../Hooks/useSurveySearch';

useFetchRecommon();

const { history } = fetchHistory();

async function handleDelHistory() {
  history.value = [];
  delHistory();
}

// 限制字符的长度
function formatStr(str: string, limit = 6) {
  return str.length > limit ? str.slice(0, limit) + '...' : str;
}
</script>

<template>
  <section class="recommend-container">
    <layout title="热门搜索">
      <template #title>
        <el-text class="title">热门搜索</el-text>
      </template>
      <section class="tags">
        <span class="tag" @click="updateKeyword(tag.key_word)" v-for="tag in list">
          {{ formatStr(tag.key_word) }}
        </span>
      </section>
    </layout>

    <layout>
      <template #title>
        <section class="history-title">
          <el-text class="title">搜索历史</el-text>
          <div>
            <el-icon @click="handleDelHistory"><Delete /></el-icon>
          </div>
        </section>
      </template>
      <section class="tags">
        <span class="tag" @click="updateKeyword(tag)" v-for="tag in history">
          {{ formatStr(tag) }}
        </span>
      </section>
    </layout>
  </section>
</template>

<style scoped lang="scss">
@use '@/assets/css/theme';

.title {
  font-size: 25px;
  font-weight: 800;
  color: rgba(102, 102, 102, 1);
  font-size: 13px;
  font-family: PingFangSC;
}

.recommend-container {
  padding: 0 (theme.$gap * 2);
}

.history-title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  .tag {
    padding: 5px 10px;
    border-radius: 20px;
    background-color: white;
    color: rgba(0, 0, 0, 1);
    font-size: 11px;
    font-family: PingFangSC;
    font-weight: 500;
    line-height: 16px;
  }
}
</style>
