<template>
  <div class="nav">
    <div class="logo-box">
      <span class="logo-text" v-if="pageType!='view'">Xuaua</span>
      <span class="logo-text" v-else  @click="goback">
   
        <svg  t="1724411009623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6748" width="48" height="48"><path d="M512 65C264.66 65 65 264.66 65 512s199.66 447 447 447 447-199.66 447-447S759.34 65 512 65z m253.32 470.93h-0.8c-18.93 0.42-37.92 0-56.85 0H312.21l88.31 86.91 64.68 63.66c9.53 9.38 8.71 24.35 0 33.84s-24.91 8.79-33.84 0L407.69 697l-103.1-101.43-64.69-63.66c-9.28-9.14-9-24.69 0-33.84l23.52-23.88 103.15-104.74 64.79-65.79c9.38-9.53 24.35-8.71 33.84 0s8.79 24.91 0 33.84l-23.52 23.88q-51.57 52.38-103.15 104.74l-21.44 21.77c12.44 0 24.88 0.18 37.3 0.18h410.93c13.41 0 23.35 11 23.93 23.93s-11.41 23.93-23.93 23.93z" p-id="6749" fill="#e6e6e6"></path></svg>    
        </span>
    </div>
    <div>
      <div class="search-box">
        <div class="selectInput">
          <div>
            <el-icon :size="20">
              <Search />
            </el-icon>
          </div>
          <input type="text" @click="goSearch" placeholder="搜索关键词" />
        </div>
      </div>
    </div>
    <div @click="toUser" class="user-avatar">
      <el-avatar :size="40" :src="user.avatar" />{{ user.nickname || "用户" }}
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores/user.js";
import { useTopicStore } from "@/stores/topic.js";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import router from "@/router";
import { debounceRef } from "@/utils/debounceRef";
import {computed, defineProps,defineEmits} from "vue"
const useSotr = useUserStore();
const emit = defineEmits(["back"])
const user = computed(() => {
  return useSotr.user;
});
const topStore = useTopicStore();
const type = debounceRef("", 300);
const {pageType} = defineProps({
  pageType:{
    type:String,
    default:''
  }
})
function goback(){
  // router.go(-1);
  emit("back")
}
const toUser = () => {
  router.push({
    path: "/user",
  });
};

const goSearch = () => {
  router.replace({
    path: "/search",
  });
};

const selectClick = () => {
  topStore.loadData(type.value);
  ElMessage({ message: "已切换标签", type: "success" });
};
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 70px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border-radius: 0 0 15px 15px;
  display: flex;
  align-items: center;
  padding: 0 20px;

  .logo-box {
    margin-left: 52px;
    .logo-text {
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
  }

  .search-box {
    position: relative;
    margin-left: 30px;
    margin-right: auto;
    padding: 5px;
  }

  .selectInput {
    display: flex;
    align-items: center;
    padding: 7px 15px;
    border: 2px solid #ffffff;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;

    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
      border-color: #dcdfe6;
    }

    input {
      background-color: transparent;
      border: none;
      outline: none;
      color: #ffffff;
      margin-left: 10px;
      font-size: 16px;
      width: 100%;
      &::placeholder {
        color: #dcdfe6;
      }
    }

    .el-icon {
      color: #ffffff;
    }
  }

  .user-avatar {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}
</style>
