<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { LOGIN_PAGE } from '@/router/config'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'

definePage({
    style: {
        navigationBarTitleText: '我的',
        navigationStyle: 'custom',
    },
})

const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo
const { userInfo } = storeToRefs(userStore)

// 微信小程序下登录
async function handleLogin() {
    // #ifdef MP-WEIXIN
    // 微信登录
    await tokenStore.wxLogin()

    // #endif
    // #ifndef MP-WEIXIN
    uni.navigateTo({
        url: `${LOGIN_PAGE}`,
    })
    // #endif
}

function handleLogout() {
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                // 清空用户信息
                useTokenStore().logout()
                // 执行退出登录逻辑
                uni.showToast({
                    title: '退出登录成功',
                    icon: 'success',
                })
                // #ifdef MP-WEIXIN
                // 微信小程序，去首页
                // uni.reLaunch({ url: '/pages/index/index' })
                // #endif
                // #ifndef MP-WEIXIN
                // 非微信小程序，去登录页
                // uni.navigateTo({ url: LOGIN_PAGE })
                // #endif
            }
        },
    })
}

// 顶部导航栏高度,设置banner位置
const navigationBarHeight = ref(0)
// #ifdef MP-WEIXIN
function getNavigationBarHeight() {
    uni.getSystemInfo({
        success: (res) => {
            const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
            console.log('顶部导航栏高度:', res.statusBarHeight, menuButtonInfo)
            // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
            navigationBarHeight.value = res.statusBarHeight + menuButtonInfo.height + 12
        },
    })
}
getNavigationBarHeight()
// #endif

const show = ref(true)
function close() {
    show.value = false
}
function open() {
    show.value = true
}
function menuClick(page) {
    uni.navigateTo({
        url: `/pages-A/${page}/index`,
    })
}
</script>

<template>
    <view class="profile-container">
        <!-- 顶部区域 -->
        <view class="me-header" style="background: url('../../static/images/me/me-bg.png') no-repeat center center; background-size: cover;">
            <view class="me-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight}px` }">
                <view class="me-header-avatar">
                    <image src="https://picsum.photos/200/200" mode="" />
                </view>
                <view class="me-header-info">
                    <view class="me-header-name">
                        {{ userInfo.value?.nickName || '用户' }}
                    </view>
                </view>
            </view>
            <view class="me-header-tips">
                <view class="me-header-tips-item">
                    <view class="me-header-tips-item-num">
                        1,125
                    </view>
                    <view class="me-header-tips-item-des">
                        已领取
                    </view>
                </view>
                <view class="me-header-tips-item">
                    <view class="me-header-tips-item-num">
                        1,125
                    </view>
                    <view class="me-header-tips-item-des">
                        已使用
                    </view>
                </view>
                <view class="me-header-tips-item">
                    <view class="me-header-tips-item-num">
                        1,125
                    </view>
                    <view class="me-header-tips-item-des">
                        已过期
                    </view>
                </view>
            </view>
        </view>
        <!-- 菜单 -->
        <view class="me-header-menu">
            <view class="me-header-menu-item" @click="menuClick('applyForm')">
                <view class="me-header-menu-icon">
                    <image src="@/static/images/me/coupon-need.png" mode="" />
                    <view class="me-header-menu-text">
                        发券人申请
                    </view>
                </view>
                <view class="me-header-menu-left">
                    <up-icon name="arrow-right" color="#979797" size="12" />
                </view>
            </view>
            <view class="me-header-menu-item" @click="handleLogout">
                <view class="me-header-menu-icon">
                    <image src="@/static/images/me/loginOut.png" mode="" />
                    <view class="me-header-menu-text">
                        退出登录
                    </view>
                </view>
                <view class="me-header-menu-left">
                    <up-icon name="arrow-right" color="#979797" size="12" />
                </view>
            </view>
        </view>
        <!-- 申请中的提示框 -->
        <up-modal
            content="您已提交申请，请耐心等待！"
            title="提示"
            :show="show"
        >
            <template #confirmButton>
                <view class="rounded" style="margin-top: 20rpx;" @click="show = false">
                    我知道了
                </view>
            </template>
        </up-modal>
    </view>
</template>

<style lang="scss" scoped>
// 提示框
::v-deep .u-modal {
  width: 580rpx !important;
  //   height: 376rpx !important;
  border-radius: 20rpx !important;
}
::v-deep .u-modal__title {
  font-weight: 500 !important;
  font-size: 34rpx !important;
  color: #333333 !important;
  padding-top: 29rpx !important;
  padding-bottom: 28rpx !important;
}
::v-deep .u-modal__content {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding-top: 82rpx !important;
  padding-bottom: 64rpx !important;
}
::v-deep .u-modal__content__text {
  font-weight: 500 !important;
  font-size: 32rpx !important;
  color: #333333 !important;
  text-align: center !important;
}
.rounded {
  width: 300rpx;
  line-height: 69rpx;
  background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
  border-radius: 35rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: #ffffff;
  text-align: center;
  margin: 0 auto;
}
.profile-container {
  font-family: Alibaba PuHuiTi;
  .me-header {
    height: 575rpx;
    .me-header-avatar-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24rpx;
      .me-header-avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .me-header-info {
        .me-header-name {
          font-weight: 500;
          font-size: 30rpx;
          color: #ffffff;
        }
      }
    }
    .me-header-tips {
      display: flex;
      margin-top: 49rpx;
      .me-header-tips-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15rpx;
        font-weight: 500;
        font-size: 34rpx;
        color: #ffffff;
        line-height: 1;
        .me-header-tips-item-num {
          font-weight: bold;
        }
        .me-header-tips-item-des {
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
  }
  .me-header-menu {
    background: #ffffff;
    border-radius: 10rpx 10rpx 0rpx 0rpx;
    margin: -50rpx 24rpx 0;
    padding: 0 20rpx;
    .me-header-menu-item {
      height: 88rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eeeeee;
      &:last-child {
        border-bottom: none;
      }
      .me-header-menu-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 13rpx;
        image {
          width: 40rpx;
          height: 40rpx;
        }
        .me-header-menu-text {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
        }
      }
      .me-header-menu-left {
      }
    }
  }
}
</style>
