<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getHotDetail, searchSuggest } from "@/network/search.js";
import { ref, onUnmounted } from "vue";
import { NTag, NButton, NSpace } from "naive-ui";
import pubsub from "pubsub-js";

const store = useStore();
const router = useRouter();

//#region 热搜
const hotSearch = ref([]);
hotSearch.value = store.getters.cache("hotSearch");
// if(store.getters.cache('topSongs'))
// {
//   topSongs.value = store.getters.cache('topSongs')
//   console.log('载入Caches');
// }
//最新音乐
getHotDetail()
  .then((res) => {
    if (res.data.code == 200) {
      hotSearch.value = res.data.data;
      store.commit("saveCaches", {
        hotSearch: { data: hotSearch.value, time: Date.now() },
      });
    } else {
    }
    // console.log(hotSearch.value);
  })
  .catch((err) => {
    console.log("getHotDetail err", err);
  });
//#endregion

const suggestResult = ref({});
const suggest = (keywords) => {
  if (keywords == "") return;
  searchSuggest(keywords)
    .then((res) => {
      suggestResult.value = res.data.result;
    })
    .catch((err) => {
      console.log("suggest err", err);
    });
};

const keywords = ref("");
const token = pubsub.subscribe("zp", (msg, data) => {
  switch (msg) {
    case "zp.searchInput":
      keywords.value = data.trim();
      suggest(keywords.value);
      break;
  }
});

//卸载组件
onUnmounted(() => {
  pubsub.unsubscribe(token);
});
</script>

<template>
  <div class="hot" v-if="keywords.length < 1">
    <div
      class="history"
      v-if="store.state.settings.searchHistory?.length > 0"
    >
      <div class="caption">
        <span class="txt">搜索历史</span>
        <NButton round size="tiny" type="error"
          @click="()=>{
            store.commit('clearSearchHistory')
          }"
        >清除</NButton>
      </div>
      <NSpace class="h-list" :size="[6, 6]">
        <NTag
          v-for="h in store.state.settings.searchHistory"
          closable
          round
          size="small"
          type="primary"
          @close.stop="store.commit('removeSearchHistory', h)"
          @click="async ()=>{
            pubsub.publish('zp.toggleSearch');
            await router.push(`/search/${h}`);
            pubsub.publish('zp.search', h);
          }"
          >{{ h }}</NTag
        >
      </NSpace>
    </div>
    <div class="hot-search">
      <div class="caption">热搜榜</div>
      <div
        class="hot-list"
        v-for="(item, idx) in hotSearch"
        key="idx"
        @click="async ()=>{
            pubsub.publish('zp.toggleSearch');
            store.commit('addSearchHistory', item.searchWord)
            await router.push(`/search/${item.searchWord}`);
            pubsub.publish('zp.search', item.searchWord);
          }"
      >
        <div class="idx" :class="{ idxHot: item.iconType == 1 }">
          {{ idx + 1 }}
        </div>
        <div class="detail">
          <div class="title">
            <span class="word">{{ item.searchWord }}</span>
            <span class="isHot" v-if="item.iconType == 1">HOT</span>
            <span class="score">{{ item.score }}</span>
          </div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="searching" v-else>
    <div class="to-search">搜“{{ keywords }}”相关的结果 ></div>
    <div class="suggest">
      <div class="caption">单曲</div>
      <div
        class="list"
        v-for="s in suggestResult.songs"
        @click="() => pubsub.publish('zp.play', {id: s.id, im: true})"
      >
        {{ s.name }} -
        <template v-for="(ar, idx) of s.artists" key="idx">
          <span style="margin-right: 4px; cursor: pointer">{{
            ar.name
          }}</span>
        </template>
      </div>
      <div class="caption">歌手</div>
      <div class="list" v-for="s in suggestResult.artists">
        {{ s.name }}
      </div>
      <div class="caption">专辑</div>
      <div class="list" v-for="s in suggestResult.albums">
        {{ s.name }}
        <template v-for="(ar, idx) of s.artists" key="idx">
          <span style="margin-right: 4px; cursor: pointer">{{
            ar.name
          }}</span>
        </template>
      </div>
      <div class="caption">歌单</div>
      <div class="list" v-for="s in suggestResult.albums">
        {{ s.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.hot {
  padding: 8px;
  .history {
    margin-bottom: 6px;
    .caption {
      display: flex;
      padding-bottom: 4px;
      .txt {
        flex: 1;
      }
    }
    .h-list {
    }
  }

  .hot-search {
    .hot-list {
      display: flex;
      align-items: center;
      color: #999;
      &:hover{
        background: #efefef;
      }
      .idx {
        padding: 6px 12px;
        width: 30px;
        justify-items: end;
        text-align: right;
      }
      .idxHot {
        color: red;
      }
      .detail {
        padding: 6px;
        .title {
          .text-el-line();

          & > * {
            margin-right: 6px;
          }
          .word {
            color: #333;
            font-size: 14px;
          }
          .isHot {
            font-size: 12px;
            color: red;
          }
          .score {
            font-size: 12px;
          }
        }
        .content {
          font-size: 12px;
          .text-el-line();
        }
      }
    }
  }
}
.searching {
  padding: 8px;

  .suggest {
    font-size: 13px;
    line-height: 1.8;
    .caption {
      color: #999;
      .text-el-line();
    }
    .list {
      padding-left: 20px;
      cursor: pointer;
      .text-el-line();

      &:hover {
        background: #eee;
      }
    }
  }
}
</style>
