<template>
  <view class="container">
    <!-- 用户信息模块 -->
    <!-- 如果用户已授权并登录，则显示用户信息 -->
    <view v-if="isAuthInfo" class="userinfo">
      <view class="userinfo-con">
        <!-- 用户头像 -->
        <view class="userinfo-avatar">
          <image
            :src="
              loginResult.pic
                ? (loginResult.pic.indexOf('http') === -1 ? picDomain + loginResult.pic : loginResult.pic)
                : '/static/images/icon/head04.png'
            "
          />
        </view>
        <!-- 用户昵称 -->
        <view class="userinfo-name">
          <view>{{ loginResult.nickName ? loginResult.nickName : "用户昵称" }}</view>
        </view>
      </view>
    </view>

    <!-- 如果用户未登录，则显示默认的登录提示 -->
    <view v-if="!isAuthInfo" class="userinfo-none">
      <view class="default-pic" @tap="toLogin">
        <image src="@/static/images/icon/head04.png" />
      </view>
      <view class="none-login" @tap="toLogin">
        <button class="unlogin">未登录</button>
        <button class="click-login">点击登录账号</button>
      </view>
    </view>
    <!-- end 用户信息模块 -->

    <view class="list-cont">
      <!-- 订单状态模块 -->
      <view class="total-order">
        <view class="order-tit">
          <text style="font-weight:bold">我的订单</text>
          <!-- 查看全部订单按钮 -->
          <view class="checkmore" data-sts="0" @tap="toOrderListPage">
            <text>查看全部</text>
            <text class="arrowhead" />
          </view>
        </view>
        <!-- 订单流程条 -->
        <view class="procedure">
          <!-- 待支付订单 -->
          <view class="items" data-sts="1" @tap="toOrderListPage">
            <image src="@/static/images/icon/toPay.png" />
            <text>待支付</text>
            <!-- 如果有待支付订单，显示数量 -->
            <text v-if="orderAmount.unPay > 0" class="num-badge">{{ orderAmount.unPay }}</text>
          </view>
          <!-- 待发货订单 -->
          <view class="items" data-sts="2" @tap="toOrderListPage">
            <image src="@/static/images/icon/toDelivery.png" />
            <text>待发货</text>
            <!-- 如果有待发货订单，显示数量 -->
            <text v-if="orderAmount.payed > 0" class="num-badge">{{ orderAmount.payed }}</text>
          </view>
          <!-- 待收货订单 -->
          <view class="items" data-sts="3" @tap="toOrderListPage">
            <image src="@/static/images/icon/toTake.png" />
            <text>待收货</text>
            <!-- 如果有待收货订单，显示数量 -->
            <text v-if="orderAmount.consignment > 0" class="num-badge">{{ orderAmount.consignment }}</text>
          </view>
          <!-- 已完成订单 -->
          <view class="items" data-sts="5" @tap="toOrderListPage">
            <image src="@/static/images/icon/toComment.png" />
            <text>已完成</text>
          </view>
        </view>
      </view>
      <!-- end 订单状态模块 -->

      <!-- 产品栏 -->
      <view class="prod-col">
        <!-- 我的收藏 -->
        <view class="col-item" @tap="myCollectionHandle">
          <view v-if="loginResult" class="num">{{ collectionCount }}</view>
          <view v-else class="num">--</view>
          <view class="tit">我的收藏</view>
        </view>
        <!-- 我的消息 -->
        <view class="col-item" @tap="handleTips">
          <view v-if="loginResult" class="num">5</view>
          <view v-else class="num">--</view>
          <view class="tit">我的消息</view>
        </view>
        <!-- 我的足迹 -->
        <view class="col-item" @tap="handleTips">
          <view v-if="loginResult" class="num">3</view>
          <view v-else class="num">--</view>
          <view class="tit">我的足迹</view>
        </view>
      </view>

      <!-- 菜单列表 -->
      <view class="my-menu">
        <!-- 分销中心 -->
        <view class="memu-item" @tap="toDistCenter">
          <view class="i-name">
            <image src="@/static/images/icon/promotion.png" />
            <text>分销中心</text>
          </view>
          <view class="arrowhead" />
        </view>
        <!-- 领券中心 -->
        <view class="memu-item" @tap="toCouponCenter">
          <view class="i-name">
            <image src="@/static/images/icon/getCoupon.png" />
            <text>领券中心</text>
          </view>
          <view class="arrowhead" />
        </view>
        <!-- 我的优惠券 -->
        <view class="memu-item" @tap="toMyCouponPage">
          <view class="i-name">
            <image src="@/static/images/icon/myCoupon.png" />
            <text>我的优惠券</text>
          </view>
          <view class="arrowhead" />
        </view>
        <!-- 收货地址 -->
        <view class="memu-item" @tap="toAddressList">
          <view class="i-name">
            <image src="@/static/images/icon/myAddr.png" />
            <text>收货地址</text>
          </view>
          <view class="arrowhead" />
        </view>
      </view>
      <!-- end 菜单列表 -->

      <!-- 登出按钮，仅在用户已登录时显示 -->
      <view v-if="isAuthInfo" class="log-out" @tap="logout">
        <view class="log-out-n">
          <text>退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 导入环境变量中的资源URL
const picDomain = import.meta.env.VITE_APP_RESOURCES_URL

// 定义响应式变量
const isAuthInfo = ref(false) // 是否已授权登录
const loginResult = ref('') // 登录结果对象
const orderAmount = ref('') // 订单数量统计

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  // 从本地存储中获取登录结果，并更新登录状态
  loginResult.value = uni.getStorageSync('loginResult')
  isAuthInfo.value = !!loginResult.value
  // 如果已登录，加载订单数字和收藏量
  if (isAuthInfo.value) {
    uni.showLoading() // 显示加载中提示
    http.request({
      url: '/p/myOrder/orderCount',
      method: 'GET',
      data: {}
    })
      .then(({ data }) => {
        uni.hideLoading() // 隐藏加载中提示
        orderAmount.value = data // 更新订单数量
      })
    showCollectionCount() // 加载收藏量
  }
})

// 分销中心功能暂未实现
const toDistCenter = () => {
  uni.showToast({
    icon: 'none',
    title: '该功能未开源'
  })
}

// 领券中心功能暂未实现
const toCouponCenter = () => {
  uni.showToast({
    icon: 'none',
    title: '该功能未开源'
  })
}

// 我的优惠券功能暂未实现
const toMyCouponPage = () => {
  uni.showToast({
    icon: 'none',
    title: '该功能未开源'
  })
}

// 消息和足迹功能暂未实现
const handleTips = () => {
  uni.showToast({
    icon: 'none',
    title: '该功能未开源'
  })
}

// 跳转到收货地址页面
const toAddressList = () => {
  uni.navigateTo({
    url: '/pages/delivery-address/delivery-address'
  })
}

// 跳转到订单列表页面
const toOrderListPage = (e) => {
  const sts = e.currentTarget.dataset.sts // 获取订单状态码
  uni.navigateTo({
    url: '/pages/orderList/orderList?sts=' + sts // 根据状态码跳转到对应的订单列表页
  })
}

// 定义收藏量的响应式变量
const collectionCount = ref(0)

/**
 * 查询所有的收藏量
 */
const showCollectionCount = () => {
  uni.showLoading() // 显示加载中提示
  http.request({
    url: '/p/user/collection/count',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      uni.hideLoading() // 隐藏加载中提示
      collectionCount.value = data // 更新收藏量
    })
}

/**
 * 我的收藏跳转
 */
const myCollectionHandle = () => {
  let url = '/pages/prod-classify/prod-classify?sts=5' // 默认跳转路径
  const id = 0 // 假设的ID（这里可能需要根据实际情况调整）
  const title = '我的收藏商品' // 标题
  if (id) {
    url += '&tagid=' + id + '&title=' + title // 如果有ID，则附加参数
  }
  uni.navigateTo({
    url // 跳转到指定页面
  })
}

/**
 * 去登陆
 */
const toLogin = () => {
  uni.navigateTo({
    url: '/pages/accountLogin/accountLogin' // 跳转到登录页面
  })
}

/**
 * 退出登录
 */
const logout = () => {
  http.request({
    url: '/logOut',
    method: 'post'
  })
    .then(() => {
      util.removeTabBadge() // 移除标签页徽章
      uni.removeStorageSync('loginResult') // 清除本地存储的登录结果
      uni.removeStorageSync('token') // 清除本地存储的token
      uni.showToast({
        title: '退出成功',
        icon: 'none'
      })
      orderAmount.value = '' // 清空订单数量
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index' // 切换回首页
        })
      }, 1000) // 延迟1秒执行切换操作
    })
}
</script>

<style scoped lang="scss">
@use './user.scss'; // 引入用户样式文件
</style>
