<script lang="ts" setup>
import type { IUploadSuccessInfo } from '@/api/types/login'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'
import { useUpload } from '@/utils/uploadFile'

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

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

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

// #ifdef MP-WEIXIN

// 微信小程序下选择头像事件
function onChooseAvatar(e: any) {
  console.log('选择头像', e.detail)
  const { avatarUrl } = e.detail
  const { run } = useUpload<IUploadSuccessInfo>(
    '/upload',
    {},
    {
      onSuccess: (res) => {
        console.log('wx头像上传成功', res)
        useUserStore().setUserAvatar(res.url)
      },
    },
    avatarUrl,
  )
  run()
}
// #endif
// #ifdef MP-WEIXIN
// 微信小程序下设置用户名
function getUserInfo(e: any) {
  console.log(e.detail)
}
// #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
      }
    },
  })
}

// 推送设置
function handlePushSetting() {
  uni.navigateTo({
    url: '/pages-sub/waringSetting/warningSetting',
  })
}

// 修改密码
function handleChangePassword() {
  uni.navigateTo({
    url: '/pages-sub/changePassword/changePassword',
  })
}

// 意见反馈
function handleFeedback() {
  uni.navigateTo({
    url: '/pages-sub/feedback/feedback',
  })
}
</script>

<template>
  <view class="profile-container">
    <!-- 用户信息区域 -->
    <wd-card>
      <view class="user-info-section">
        <!-- #ifdef MP-WEIXIN -->
        <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image :src="userInfo.avatar" mode="scaleToFill" class="h-full w-full" />
        </button>
        <!-- #endif -->
        <view class="user-details">
          <!-- #ifdef MP-WEIXIN -->
          <input
            v-model="userInfo.username"
            type="nickname"
            class="weui-input"
            placeholder="请输入昵称"
          >
          <!-- #endif -->
          <view class="user-id">
            ID: {{ userInfo.userId }}
          </view>
        </view>
      </view>
    </wd-card>

    <wd-card>
      <wd-cell-group :border="true">
        <wd-cell title="我的果园" value="***果园" />
        <wd-cell title="推送设置" is-link @click="handlePushSetting" />
        <wd-cell title="意见反馈" is-link @click="handleFeedback" />
        <wd-cell title="修改密码" is-link @click="handleChangePassword" />
      </wd-cell-group>
    </wd-card>

    <view class="mt-20 px-3">
      <view class="m-auto w-160px text-center">
        <wd-button v-if="tokenStore.hasLogin" type="warning" block @click="handleLogout">
          退出登录
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
$avatar-size: 120rpx;
/* 基础样式 */
.profile-container {
  overflow: hidden;
  background-color: #f7f8fa;
  height: 100vh;
  padding: 20rpx 0;
}
/* 用户信息区域 */
.user-info-section {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
}

.avatar-button {
  height: $avatar-size;
  width: $avatar-size;
  padding: 0;
  margin-right: 40rpx;
  overflow: hidden;
  // border: 4rpx solid #f5f5f5;
  border-radius: 50%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.user-details {
  flex: 1;
}

.username {
  margin-bottom: 12rpx;
  font-size: 38rpx;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5rpx;
}

.user-id {
  font-size: 28rpx;
  color: #666;
}

.user-created {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #999;
}
</style>
