<template>
  <div>
    <!-- 头部Tabs -->
    <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"
        />
        <!-- 刷新图标 -->
        <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" />
      </keep-alive>
    </transition>
  </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/common/Tabs'
import ColumnList from './components/columnList.vue'
import InterviewList from './components/interviewList.vue'
import PracticeList from './components/practiceList.vue'
import VideoList from './components/videoList.vue'

const tabs = [
  { label: '专栏', value: '专栏', component: ColumnList },
  { label: '实践', value: '实践', component: PracticeList },
  { label: '专访', value: '专访', component: InterviewList },
  { 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 ColumnList>>('activeTabComponentRef')

const handleEnter = () => {
  handleRefresh()
}
const handleRefresh = () => {
  activeTabComponentRef.value?.refresh?.()
}

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>
.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>
