<template>
  <div class="layout-culture pb-11 h-full bg-[linear-gradient(to_bottom,#F0FBFD_0%,#ECEFFF_100%)]">
    <div
      class="header flex lg:px-20 xl:px-40 2xl:px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-2001 w-100vw"
    >
      <!-- Logo区域 -->
      <div @click="router.push('/')" class="flex items-center flex-shrink-0 min-w-0 cursor-pointer">
        <img
          class="h-10 mr-3 object-contain flex-shrink-0 sm:h-10 sm:mr-4"
          src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2022/10/13/1665643779583.png"
          alt=""
        />
      </div>

      <div class="flex items-center">
        <!-- 搜索框 -->
        <div
          v-show="showSearchInupt"
          class="flex-1 max-w-sm mx-4 hidden md:block lg:max-w-md lg:mx-6"
        >
          <el-input
            v-model="search"
            class="h-8"
            placeholder="搜索"
            @keyup.enter="router.push('/searchPage?title=' + search)"
          >
            <template #suffix>
              <el-icon
                class="text-gray-400 cursor-pointer"
                @click="router.push('/searchPage?title=' + search)"
              >
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
        <!-- 右侧菜单 -->
        <div class="flex items-center gap-1 flex-shrink-0 sm:gap-2 lg:gap-4">
          <div
            class="group h-80% flex items-center cursor-pointer px-2 py-1 sm:px-3 sm:py-2 rounded-lg transition-all duration-200 hover:shadow-lg hover:bg-white/60"
            @click="router.push('/userPage')"
          >
            <el-avatar
              :size="30"
              :src="userInfo.hiddenAvatar"
              class="border-3 border-blue-200 shadow-lg flex-shrink-0 transition-transform duration-200 group-hover:scale-105"
            />

            <span
              class="ml-2 text-sm whitespace-nowrap hidden lg:inline transition-all duration-300 ease-out group-hover:translate-y--0.5 text-gray-700"
            >
              个人中心
            </span>
          </div>
          <div
            class="group flex items-center cursor-pointer px-2 py-1 sm:px-3 sm:py-2 rounded-lg transition-all duration-200 hover:shadow-lg hover:bg-white/60"
            @click="router.push('/auction')"
          >
            <!-- 图标 -->
            <img
              class="w-7 h-7 object-contain flex-shrink-0 transition-transform duration-200 group-hover:scale-105"
              src="@/assets/img/culture/auction.png"
              alt="限时竞拍"
            />

            <!-- 文字（始终显示，只做 hover 增强） -->
            <span
              class="ml-2 text-sm whitespace-nowrap hidden lg:inline transition-all duration-200 ease-out group-hover:translate-y--0.5 text-gray-700"
            >
              限时竞拍
            </span>
          </div>
          <el-dropdown
            placement="top-start"
            @command="handlePost"
            @visible-change="(val) => (isDropdownHover = val)"
          >
            <button
              class="cursor-pointer w-24 h-9 text-gray-700 bg-[linear-gradient(to_right,#B3B8FD_0%,#7083FF_100%)] border-none duration-200 flex-1 text-xs sm:text-sm rounded-xl group"
              :class="{ 'shadow-[0_1px_8px_0_rgba(95,0,237,0.25)]': isDropdownHover }"
            >
              <img
                class="h-7 w-7 transition-transform duration-300 ease-in-out"
                :class="{ 'rotate-90': isDropdownHover }"
                src="@/assets/img/culture/post.png"
                alt=""
              />
              去发帖
            </button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="ArticleTypeEnum.POST">帖子</el-dropdown-item>
                <el-dropdown-item :command="ArticleTypeEnum.PRACTICE">实践</el-dropdown-item>
                <el-dropdown-item :command="ArticleTypeEnum.VIDEO">视频</el-dropdown-item>
                <el-dropdown-item :command="ArticleTypeEnum.QUESTION">问吧</el-dropdown-item>
                <el-dropdown-item
                  v-if="userInfo.isOfficialAccount || userInfo.isAdmin"
                  :command="ArticleTypeEnum.COLUMN"
                  >专栏</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="userInfo.isOfficialAccount || userInfo.isAdmin"
                  :command="ArticleTypeEnum.INTERVIEW"
                  >专访</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="flex-1 w-full flex items-center justify-center">
      <div class="container max-h-none transition-all duration-300 min-h-[calc(100vh-96px)]">
        <router-view v-slot="{ Component, route }">
          <transition name="fade" mode="out-in">
            <!-- 注释不能放到keep-alive下面 route是最终的路由信息 Component是当前n级路由的组件 二级路由 homePage videoDetail -->
            <keep-alive>
              <component :is="Component" :key="getSecondLevelKey(route)" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
  <OnlineTime v-if="showOnlineTime" />
  <PublishDialog ref="PublishDialogRef" />
</template>

<script setup lang="tsx" name="CultureLayout">
import { Search } from '@element-plus/icons-vue'
import OnlineTime from './components/onlineTime.vue'
import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router'
import PublishDialog from './components/publishDialog.vue'
import { ArticleTypeEnum } from '@/constants'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const { userInfo } = storeToRefs(userStore)

const router = useRouter()
const route = useRoute()
const search = ref('')
const PublishDialogRef = useTemplateRef<InstanceType<typeof PublishDialog>>('PublishDialogRef')
console.log(route)
const showSearchInupt = computed(() => route.path !== '/searchPage')
// 获取二级路由的 key
const getSecondLevelKey = (route: RouteLocationNormalizedLoadedGeneric) => {
  // 取第一级作为key homePage

  const pathSegments = route.path.split('/').filter(Boolean)
  // console.log(route)
  // console.log(pathSegments)
  // 如果有params 则取params的id
  const key = Object.keys(route.params).length
    ? pathSegments.slice(0, 2).join('/')
    : pathSegments.slice(0, 1).join('/')
  // console.log(key, '*********************')
  return key
}

const notShowPath = ['/videoDetail', '/articleDetail', '/questionDetail']

const showOnlineTime = computed(() => {
  return notShowPath.every((path) => !route.path.includes(path))
})

const handlePost = async (type: ArticleTypeEnum) => {
  if (type === ArticleTypeEnum.VIDEO) {
    router.push('/publishVideo')
  } else if (type === ArticleTypeEnum.QUESTION) {
    // router.push(`/homePage/askTab#tabsRef?t=${Date.now()}`)
    router.push(`/publishLongArticle/${type}`)
  } else if (type === ArticleTypeEnum.PRACTICE) {
    router.push(`/publishLongArticle/${type}`)
    // PublishDialogRef.value?.open(type)
  } else {
    router.push(`/publishLongArticle/${type}`)
  }
}
const isDropdownHover = ref(false)
</script>
<style lang="scss" scoped>
.layout-culture {
  padding-top: 52px;

  .header {
    min-height: 52px;
    color: #212121;
    background-color: #fff;
    background-image: url('@/assets/img/culture/header_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .container {
    .main-container {
      .tabs-container {
        background: linear-gradient(90deg, #16cdea 0%, #d680ff 100%);
      }

      .right {
        .common-box {
          padding: 15px;
          background-color: #f8f8fa;
          border-radius: 10px;
          border: 1px solid #efe7dc;
        }

        .common-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(to right, #efe7dc 0%, #efe7dc 100%);
          border: 1px solid #767676;
          color: #000;
          border-radius: 10px;
          cursor: pointer;
          transition: all 0.3s;
        }
      }
    }
  }
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .container {
    max-width: 890px;
    padding: 0 0px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding: 0 10px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding: 0 40px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
    padding: 0 150px;
  }
}
</style>
