<template>
  <div id="home-index" class="test-slide-wrapper">
    <SlideHorizontal v-model:index="state.baseIndex" name="first">
      <SlideItem class="sidebar">
        <div class="header">
          <div class="left">下午好</div>
          <div class="right" @click="nav('/home/live')">
            <Icon icon="iconamoon:scanner" />
            <span>扫一扫</span>
          </div>
        </div>
        <div class="card">
          <div class="header">
            <div class="left">常用小程序</div>
            <div class="right">
              <span>全部</span>
              <Icon icon="icon-park-outline:right" />
            </div>
          </div>
          <div class="content">
            <div
              v-for="mp in miniPrograms"
              :key="mp.id"
              class="item"
              @click="_no"
            >
              <img class="xcx" :src="mp.icon" alt="" />
              <span>{{ mp.name }}</span>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="header">
            <div class="left">最近常看</div>
            <div class="right">
              <span>全部</span>
              <Icon icon="icon-park-outline:right" />
            </div>
          </div>
          <div class="content">
            <div
              v-for="user in recentUsers"
              :key="user.uid"
              class="item avatar"
              @click="goUser(user)"
            >
              <img :src="user.avatar" alt="" />
              <span>{{ user.nickname }}</span>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="header">
            <div class="left">常用功能</div>
            <div class="right" />
          </div>
          <div class="content">
            <div class="item" @click="_no">
              <Icon icon="ion:wallet-outline" />
              <span>我的钱包</span>
            </div>
            <div class="item" @click="_no">
              <Icon icon="mingcute:coupon-line" />
              <span>券包</span>
            </div>
            <div class="item" @click="_no">
              <Icon icon="icon-park-outline:bytedance-applets" />
              <span>小程序</span>
            </div>
            <div class="item" @click="_no">
              <Icon icon="solar:history-linear" />
              <span>观看历史</span>
            </div>
            <div class="item" @click="_no">
              <Icon icon="fluent:content-settings-24-regular" />
              <span>内容偏好</span>
            </div>
            <div class="item" @click="_no">
              <Icon icon="iconoir:cloud-download" />
              <span>离线模式</span>
            </div>
            <div class="item" @click="_no">
              <Icon icon="ep:setting" />
              <span>设置</span>
            </div>
            <div class="item" @click="_no">
              <Icon icon="icon-park-outline:baggage-delay" />
              <span>稍后再看</span>
            </div>
          </div>
        </div>
      </SlideItem>
      <SlideItem class="slide-main">
        <IndicatorHome
          v-if="!state.fullScreen"
          :loading="loading"
          name="second"
          @show-slidebar="state.baseIndex = 0"
          v-model:index="state.navIndex"
        />
        <SlideHorizontal
          v-model:index="state.navIndex"
          class="first-horizontal-item"
          name="second"
          :change-active-index-use-anim="false"
        >
          <Slide0 :active="state.navIndex === 0 && state.baseIndex === 1" />
          <Slide4 :active="state.navIndex === 1 && state.baseIndex === 1" />
        </SlideHorizontal>

        <BaseMask
          v-if="state.baseIndex === 0"
          mode="white"
          style="position: absolute"
          @click="state.baseIndex = 1"
        />
      </SlideItem>
      <SlideItem>
        <UserPanel
          v-model:current-item="state.currentItem"
          :active="state.baseIndex === 2"
          @toggle-can-move="(e: boolean) => (state.canMove = e)"
          @back="state.baseIndex = 1"
          @show-follow-setting="state.showFollowSetting = true"
          @show-follow-setting2="state.showFollowSetting2 = true"
        />
      </SlideItem>
    </SlideHorizontal>

    <Comment
      page-id="home-index"
      :video-id="state.currentItem.aweme_id"
      v-model="state.commentVisible"
      @close="closeComments"
    />
  </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import SlideHorizontal from '@/components/slide/SlideHorizontal.vue'
import SlideItem from '@/components/slide/SlideItem.vue'
import Comment from '@/components/Comment.vue'
import IndicatorHome from './components/IndicatorHome.vue'
import bus, { EVENT_KEY } from '@/utils/bus'
import { useNav } from '@/utils/hooks/useNav'
import UserPanel from '@/components/UserPanel.vue'
import Slide0 from './slide/Slide0.vue'
import Slide4 from './slide/Slide4.vue'
import { _no, _notice } from '@/utils'
import BaseMask from '@/components/BaseMask.vue'
import { miniPrograms, recentUsers, recommendVideos } from '@/mock/homeData'

const route = useRoute()
const nav = useNav()
const loading = ref(false)

type VideoItem = (typeof recommendVideos)[number]

const state = reactive({
  active: true,
  baseIndex: 1,
  navIndex: 1,
  canMove: true,
  showFollowSetting: false,
  showFollowSetting2: false,
  commentVisible: false,
  fullScreen: false,
  currentItem: {
    ...recommendVideos[0],
    isRequest: false,
    aweme_list: [] as unknown[],
  } as VideoItem & { isRequest: boolean; aweme_list: unknown[] },
})

function goUser(user: (typeof recentUsers)[number]) {
  const video = recommendVideos.find((v) => v.author.uid === user.uid) || recommendVideos[0]
  state.currentItem = { ...video, isRequest: false, aweme_list: [] }
  state.baseIndex = 2
}

function setCurrentItem(val?: unknown) {
  const item = val as VideoItem
  if (!state.active) return
  if (state.baseIndex !== 1) return
  if (state.currentItem.author?.uid !== item.author?.uid) {
    state.currentItem = {
      ...item,
      isRequest: false,
      aweme_list: [],
    }
  }
}

/** 与 douyin 一致：仅主视频层显示底栏，侧边栏/UserPanel 隐藏 */
function syncFooterBySlide() {
  if (route.path !== '/') return
  bus.emit('setFooterVisible', state.baseIndex === 1)
}

watch(() => state.baseIndex, syncFooterBySlide)

function onEnterFullscreen() {
  if (!state.active) return
  state.fullScreen = true
}

function onExitFullscreen() {
  if (!state.active) return
  state.fullScreen = false
}

function onOpenComments() {
  if (!state.active) return
  bus.emit(EVENT_KEY.ENTER_FULLSCREEN)
  state.commentVisible = true
}

function onCloseComments() {
  if (!state.active) return
  bus.emit(EVENT_KEY.EXIT_FULLSCREEN)
  state.commentVisible = false
}

function onShowShare() {
  if (!state.active) return
  _notice('分享面板待接入')
}

function onNav(val?: unknown) {
  if (!state.active) return
  const { path, query } = val as { path: string; query?: Record<string, string> }
  nav(path, query || {})
}

function onGoUserinfo() {
  if (!state.active) return
  state.baseIndex = 2
}

onMounted(() => {
  syncFooterBySlide()
  bus.on(EVENT_KEY.ENTER_FULLSCREEN, onEnterFullscreen)
  bus.on(EVENT_KEY.EXIT_FULLSCREEN, onExitFullscreen)
  bus.on(EVENT_KEY.OPEN_COMMENTS, onOpenComments)
  bus.on(EVENT_KEY.CLOSE_COMMENTS, onCloseComments)
  bus.on(EVENT_KEY.SHOW_SHARE, onShowShare)
  bus.on(EVENT_KEY.NAV, onNav)
  bus.on(EVENT_KEY.GO_USERINFO, onGoUserinfo)
  bus.on(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
})

onUnmounted(() => {
  bus.off(EVENT_KEY.ENTER_FULLSCREEN, onEnterFullscreen)
  bus.off(EVENT_KEY.EXIT_FULLSCREEN, onExitFullscreen)
  bus.off(EVENT_KEY.OPEN_COMMENTS, onOpenComments)
  bus.off(EVENT_KEY.CLOSE_COMMENTS, onCloseComments)
  bus.off(EVENT_KEY.SHOW_SHARE, onShowShare)
  bus.off(EVENT_KEY.NAV, onNav)
  bus.off(EVENT_KEY.GO_USERINFO, onGoUserinfo)
  bus.off(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
})

function closeComments() {
  bus.emit(EVENT_KEY.CLOSE_COMMENTS)
}
</script>

<style scoped lang="less">
.test-slide-wrapper {
  font-size: 14rem;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;

  .sidebar {
    touch-action: pan-y;
    width: 80%;
    height: calc(var(--vh, 1vh) * 100);
    overflow: auto;
    background: rgb(22, 22, 22);
    padding: 10rem;
    padding-bottom: 20rem;
    box-sizing: border-box;

    & > .header {
      font-size: 16rem;
      display: flex;
      color: white;
      justify-content: space-between;
      align-items: center;

      .right {
        border-radius: 20rem;
        padding: 8rem 15rem;
        background: rgb(36, 36, 36);
        display: flex;
        align-items: center;
        font-size: 14rem;
        gap: 10rem;
        cursor: pointer;

        svg {
          font-size: 18rem;
        }
      }
    }

    .card {
      margin-top: 10rem;
      border-radius: 12rem;
      padding: 15rem;
      background: rgb(29, 29, 29);

      .header {
        margin-bottom: 8rem;
        font-size: 14rem;
        display: flex;
        color: white;
        justify-content: space-between;
        align-items: center;

        .right {
          display: flex;
          align-items: center;
          font-size: 12rem;
          gap: 4rem;
          color: gray;
          cursor: pointer;

          svg {
            font-size: 16rem;
          }
        }
      }

      .content {
        color: white;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

        .item {
          min-height: 20vw;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 14rem;
          gap: 8rem;
          cursor: pointer;

          svg {
            font-size: 28rem;
          }

          .xcx {
            border-radius: 12rem;
            width: 50rem;
            height: 50rem;
          }
        }

        .avatar {
          height: 25vw;

          img {
            border-radius: 50%;
            width: 50rem;
          }
        }
      }
    }
  }
}

.slide-main {
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.first-horizontal-item {
  width: 100%;
  height: 100% !important;
  overflow: hidden;
}
</style>
