<template>
  <view class="home-page">
    <view class="tab-bar" :style="{ paddingTop: PageHeight + 'px' }">
      <view class="tab-item" :class="{ active: currentTab == 1 }" @click="handleTabClick(1)">计划</view>
      <view class="tab-item" :class="{ active: currentTab == 2 }" @click="handleTabClick(2)">日历</view>
      <view class="tab-item" :class="{ active: currentTab == 3 }" @click="handleTabClick(3)">动作</view>
      <view class="tab-item" :class="{ active: currentTab == 4 }" @click="handleTabClick(4)">模板</view>
      <view class="tab-item" :class="{ active: currentTab == 5 }" @click="handleTabClick(5)">数据</view>
      <view class="menu-btn" @click="drawerShow = true">
        <up-icon name="list" size="20" />
      </view>
    </view>

    <view class="content">
      <xunjiXunlianjihua v-if="currentTab === 1" />
      <xunjiRili v-if="currentTab === 2" />
      <xunjiDongzuo v-if="currentTab === 3" />
      <xunjiMoban v-if="currentTab === 4" />
      <xunjiShuju v-if="currentTab === 5" />
    </view>



    <up-popup :show="drawerShow" mode="right" :closeable="true" @close="drawerShow = false">
      <view class="drawer-content" :style="{ paddingTop: PageHeight + 'px' }">
        <view class="user-header">
          <image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill" />
          <view class="user-info">
            <text class="nickname">{{ userInfo.nickname || '-' }}</text>
          </view>
        </view>
        <up-cell-group :border="false">
          <up-cell title="我的主页" icon="account" :isLink="true"
            @click="navigateTo('/pages4/pages/xunji/xunji-wode-zhuye')" />
          <up-cell title="我的模板" icon="file-text" :isLink="true"
            @click="navigateTo('/pages4/pages/xunji/xunji-wode-moban')" />
          <up-cell title="我的计划" icon="order" :isLink="true"
            @click="navigateTo('/pages4/pages/xunji/xunji-wode-jihua')" />
          <up-cell title="训记使用教程" icon="question-circle" :isLink="true" @click="navigateTo('/pages4/pages/xunji/shiyon-jiaochen')" />
        </up-cell-group>
      </view>
    </up-popup>

    <TrainingFloating />
    <Tabbar />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/sheep/store/user';
import { getMenuButtonHeight, getTopSafeArea } from '@/utils/safeArea';
import { defaultAvatar } from '@/sheep/config/index';
import xunjiRili from '@/pages/xunji/components/xunji-rili.vue';
import xunjiDongzuo from '@/pages/xunji/components/xunji-dongzuo.vue';
import xunjiMoban from '@/pages/xunji/components/xunji-moban.vue';
import xunjiShuju from '@/pages/xunji/components/xunji-shuju.vue';
import xunjiXunlianjihua from '@/pages/xunji/components/xunji-xunlianjihua.vue';
import TrainingFloating from '@/pages/TrainingFloating.vue';

const userStore = useUserStore();
const drawerShow = ref(false);
const currentTab = ref(1);

const menuButtonHeight = ref(getMenuButtonHeight());
const topSafeArea = ref(getTopSafeArea());
const PageHeight = ref(topSafeArea.value);
// #ifdef MP-WEIXIN
PageHeight.value = menuButtonHeight.value + topSafeArea.value;
// #endif

const userInfo = computed(() => userStore.userInfo || {});

onLoad((options) => {

  userStore.getInfo();
  if (options && options.currentTab) {
    currentTab.value = Number(options.currentTab);
  }
});

onShow(() => {
  const targetTab = uni.getStorageSync('xunjiTargetTab');
  if (targetTab !== '' && targetTab != null) {
    const tabNum = Number(targetTab);
    currentTab.value = tabNum;
    handleTabClick(tabNum);
    uni.removeStorageSync('xunjiTargetTab');
  }
});

const navigateTo = (url) => {
  uni.navigateTo({ url });
};

const handleTabClick = (index) => {
  currentTab.value = index;
};





defineExpose({ switchTabIndex: handleTabClick });
</script>
<style scoped lang="scss">
.home-page {
  width: 100%;

  height: calc(100vh - 50px);


  background-color: #fff;

  .content {

    box-sizing: border-box;
    overflow: hidden;
    padding-top: 65rpx;
    //    #ifdef MP-WEIXIN
    padding-top: 220rpx;
    //    #endif
  }
}

.tab-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;

  .tab-item {
    font-size: 16px;
    color: #666;
    padding: 5px 0;
    padding-top: 30rpx;

    &.active {
      color: #333;
      border-bottom: 2px solid #000;
      font-weight: 500;
    }
  }

  .menu-btn {
    font-size: 20px;
    color: #666;
  }
}

.card-subtitle {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.plan-btn {
  width: 100%;
  height: 50rpx;
  background-color: #2eaa8a;
  color: white;
  font-size: 24rpx;
  font-weight: bold;
  border-radius: 25rpx;
  line-height: 50rpx;
  text-align: center;
  margin-top: 10rpx;
}

.card-value {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #666;
}

.drawer-content {
  width: 500rpx;
  background-color: #f7f7f8;
  height: 100%;
  padding: 0;
  box-sizing: border-box;

  .user-header {
    display: flex;
    align-items: center;
    padding: 40rpx 30rpx 30rpx;
    background: #fff;
    margin-bottom: 20rpx;

    .avatar {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background: #f0f0f0;
      flex-shrink: 0;
    }

    .user-info {
      margin-left: 20rpx;

      .nickname {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
      }
    }
  }
}
</style>