<template>
	<view class="mine-content">
		<!-- 顶部区域 -->
		<view class="mine-top-panel" :style="{ paddingTop: getBavBarHeight() + 'px' }">
		  <view class="user-info">
		    <!-- 根据登录状态显示不同内容 -->
		    <view v-if="isLoggedIn" class="user-logged-in">
		      <image :src="userInfo.avatarUrl" class="avatar" mode="aspectFill" />
			  <view class="user-logged-in-info">
				  <text class="nickname">{{ userInfo.nickName }}</text>
				  <text class="phone">19969024553</text>
			  </view>
		    </view>
		    
		    <view v-else class="user-not-logged-in">
		      <image :src="defaultAvatarUrl" class="avatar" mode="aspectFill" />
		      <button class="login-button" @tap="openPopup">点击登录</button>
		    </view>
		  </view>
		</view>
		
		<view class="mine-middle-panel">
		  <view class="mine-info-panel">
			  <view>0.00</view>
			  <view>我的余额</view>
		  </view>
		  
		  <view class="mine-info-panel">
			  <view>0</view>
			  <view>优惠卷</view>
		  </view>
		  
		  <view class="mine-info-panel">
			  <view>0</view>
			  <view>积分</view>
		  </view>
		  
		  <view class="mine-info-panel">
			  <view>0</view>
			  <view>我的收藏</view>
		  </view>
		</view>
		
		<!-- 登录弹窗 -->
		<uni-popup ref="popupRef" type="bottom" :safe-area="false">
		  <view class="popup-container">
		    <view class="popup-header">
		      <text class="popup-title">登录授权</text>
		    </view>
		
		    <view class="avatar-nickname">
		      <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-selector">
		        <image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
		        <text v-else>获取头像</text>
		      </button>
		      <input 
		        class="nickname-input" 
		        type="nickname" 
		        v-model="nickname" 
		        placeholder="请输入昵称" 
		      />
		    </view>
		
		    <button class="confirm-btn" @tap="confirmLogin">确认登录</button>
		  </view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { wxLogin } from '@/utils/login.js'
import { getPlatformProvider, getBavBarHeight } from '@/utils/system'
import { useUserStore } from '@/stores/user'
import { apiLogin } from '@/api/auth.js'

const userStore = useUserStore()
const popupRef = ref(null)

// 用户输入的临时信息
const avatarUrl = ref('')
const nickname = ref('')

// 从store获取用户信息（改为计算属性）
const userInfo = computed(() => ({
  nickName: userStore.userInfo.nickName || '未登录',
  avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl
}))

// 判断用户是否已登录
const isLoggedIn = computed(() => !!userStore.userInfo.nickName)

// 默认头像
const defaultAvatarUrl = 'https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png'

// 获取状态栏高度
const bavBarHeight = ref(0)

onMounted(() => {
  // 确保高度值在组件挂载后获取
  bavBarHeight.value = getBavBarHeight()
})

const openPopup = () => {
  popupRef.value.open()
}

const onChooseAvatar = (e) => {
  avatarUrl.value = e.detail.avatarUrl
}

const confirmLogin = async () => {
  if (!nickname.value || !avatarUrl.value) {
    return uni.showToast({ title: '请填写完整信息', icon: 'none' })
  }

  try {
    const platform = getPlatformProvider()
    if (platform === 'mp-weixin') {
      const code = await wxLogin()
      console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: avatarUrl.value })
	  // console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: 'http://tmp/HXhtcEwQ5A3B58476c91ba545ab67c6bf9c67d9c2559.jpeg' })
	  
	  const fileKeyRes = await uni.uploadFile({
		url: 'https://apis.lihailezzc.com/api/common/upload',
		filePath: avatarUrl.value,
		name: 'file',  // 和后端接收文件字段名一致
		header: {
		    'x-app-id': '6846f093fdf841f6189ef0b5',
		 },
	  })
	  if(fileKeyRes.statusCode < 400) {
		  const keyJson = JSON.parse(fileKeyRes.data)
		  const url = `https://file.lihailezzc.com/${keyJson?.data.key}`
		  const loginRes = await apiLogin({ code, nickname: nickname.value, avatarUrl: url })
		  // 保存用户信息到store
		  userStore.setUserInfo({
			nickName: nickname.value,
			avatarUrl: avatarUrl.value,
		  })
		  
		  userStore.setToken(loginRes.token)
		  
		  uni.showToast({ title: '登录成功', icon: 'success' })
		  popupRef.value.close()
		  
		  // 重置临时变量
		  avatarUrl.value = ''
		  nickname.value = ''
	  } else {
		  throw Error('获取失败')
	  }
  
    }
  } catch (err) {
    uni.showToast({ title: '登录失败', icon: 'none' })
    console.error(err)
  }
}
</script>

<style lang="scss">
.mine-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	background: #F9F6F2;
	
	button {
	    border: none;
		outline: none;
		background-color: transparent;
		padding: 0;
		margin: 0;
		line-height: normal;
	    font-family: inherit;
	}
	  
	button::after {
		border: none;
	}
	
	.mine-top-panel{
		width: 100vw;
		height: 500rpx;
		background-color: #beecd8;
		border-bottom-left-radius: 50% 50rpx;
		border-bottom-right-radius: 50% 50rpx;
		overflow: hidden;
		.user-info{
			padding-left: 40rpx;
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.user-logged-in{
				display: flex;
				align-items: center;
				.user-logged-in-info{
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					.nickname{
						color: #1a1a1a;
						font-weight: 800;
					}
					.phone{
						color: #000;
					}
				}
			}
			.user-not-logged-in{
				display: flex;
				align-items: center;
				.login-button{
					padding-left: 20rpx;
				}
			}
		}
	}
	.mine-middle-panel{
		width: 90vw;
		height: 200rpx;
		background-color: #fff;
		margin-top: -100rpx;
		border-radius: 20rpx; /* 四角小圆角 */
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05); /* 柔和阴影 */
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		.mine-info-panel{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 23%;
		}
	}
}
/* 弹窗样式 */
.popup-container {
  background-color: #fff;
  padding: 40rpx 30rpx 60rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;

  .popup-header {
    text-align: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .avatar-nickname {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;

    .avatar-selector {
      width: 145rpx;
      height: 145rpx;
      border-radius: 50%;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
      background-color: #eee;
    }
    
    .avatar-preview {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .nickname-input {
      width: 80%;
      border: 1rpx solid #ccc;
      border-radius: 20rpx;
      padding: 20rpx;
      font-size: 26rpx;
      text-align: center;
    }
  }

  .confirm-btn {
    background-color: #07c160;
    color: white;
    font-size: 30rpx;
    border-radius: 50rpx;
    padding: 20rpx 0;
    width: 100%;
  }
}
</style>