<template>
  <div>
    <div class="header h-40px items-center justify-between">
      <div class="left flex gap-3 flex items-center">
        <Tabs
          :modelValue="activeTab"
          @update:modelValue="(e) => updateActiveTab(e as string)"
          :tabs="tabs"
        />
        <!-- 直接在@change里面拿最新的动态组件实例 拿不到 可以在@enter 动画钩子里面拿 -->
        <!-- 刷新图标 -->
        <el-icon
          size="15"
          class="cursor-pointer hover:rotate-180 transition-all duration-300"
          @click="handleRefresh"
        >
          <IEpRefresh />
        </el-icon>
      </div>
    </div>
    <el-divider style="margin: 10px 0 20px 0" />
    <!-- 主内容区域 -->
    <!--  同一个组件 不同的实例 -->
    <transition name="fade" mode="out-in" @enter="handleEnter">
      <keep-alive>
        <component ref="activeTabComponentRef" :is="activeTabComponent" :key="activeTab" />
      </keep-alive>
    </transition>
  </div>
</template>

<script setup lang="ts">
import RecommendList from './components/recommendList.vue'
import VideoList from './components/videoList.vue'
import Tabs from '@/components/common/Tabs'

const tabs = [
  { label: '最新', value: '最新', component: RecommendList },
  { label: '推荐', value: '推荐', component: RecommendList },
  { label: '视频', value: '视频', component: VideoList },
  { label: '关爱基金', value: '关爱基金', component: null },
]

const activeTab = ref('最新')
const activeTabComponent = computed(() => {
  return tabs.find((tab) => tab.value === activeTab.value)?.component
})

const activeTabComponentRef = useTemplateRef<
  InstanceType<typeof RecommendList> | InstanceType<typeof VideoList>
>('activeTabComponentRef')

const handleRefresh = () => {
  if (activeTab.value === '推荐') {
    activeTabComponentRef.value?.refresh?.(0)
  } else if (activeTab.value === '最新') {
    activeTabComponentRef.value?.refresh?.(1)
  } else if (activeTab.value === '视频') {
    activeTabComponentRef.value?.refresh?.()
  }
}

const handleEnter = () => {
  handleRefresh()
}
const updateActiveTab = (val: string) => {
  if (val === '关爱基金') {
    window.open(
      'https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww42a2d34b42b8d721&redirect_uri=oa.yswg.com.cn:3456/careFund/publicNotice/index&response_type=code&scope=snsapi_base&state=#wechat_redirect',
      '_blank',
    )
    return
  }
  activeTab.value = val
}

onMounted(() => {
  handleRefresh()
})
</script>

<style lang="scss" scoped>
.tab-item.active:hover {
  background-color: #f8b62b !important;
  color: #000 !important;
  box-shadow: none !important;
  /* 如果你还要禁掉 hover 阴影 */
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
  filter: blur(4px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
</style>
