<template>
  <view class="profile-page">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar-section">
        <view class="avatar-container" @click="previewAvatar">
          <image v-if="userInfo.driverInfo?.data?.driverHead"
            :src="getImageUrl(userInfo.driverInfo.data.driverHead)" :key="avatarKey"
            class="avatar-image" mode="aspectFill" />
          <view v-else class="avatar-placeholder">
            <My size="60" color="#666" />
          </view>
        </view>
        <view class="user-details">
          <text class="username">{{ userInfo.driverInfo?.data?.driverName || userInfo.username || '点击登录' }}</text>
          <text class="phone-number">{{ userInfo.driverInfo?.data?.driverTel || '未设置' }}</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单区域 -->
    <view class="menu-section">
      <!-- 我的车辆 -->
      <!--         <view class="menu-item" @click="goToMyVehicles">
          <view class="menu-icon">
            <Cart size="40" color="#666" />
          </view>
          <text class="menu-text">我的车辆</text>
          <view class="menu-arrow">
            <Right size="32" color="#999" />
          </view>
        </view> -->

      <!-- 历史运送车次 -->
      <view class="menu-item" @click="goToTrips">
        <view class="menu-icon">
          <Order size="40" color="#666" />
        </view>
        <view class="menu-content">
          <text class="menu-text">历史运送车次</text>
        </view>
        <view class="menu-arrow">
          <Right size="32" color="#999" />
        </view>
      </view>

      <!-- 修改头像 -->
      <view class="menu-item" @click="changeAvatar" :class="{ 'disabled': isUploadingAvatar }">
        <view class="menu-icon">
          <My size="40" color="#666" />
        </view>
        <view class="menu-content">
          <text class="menu-text">{{ isUploadingAvatar ? '头像上传中...' : '修改头像' }}</text>
        </view>
        <view class="menu-arrow" v-if="!isUploadingAvatar">
          <Right size="32" color="#999" />
        </view>
        <view class="menu-loading" v-else>
          <text class="loading-text">...</text>
        </view>
      </view>

      <!-- 实名认证 -->
      <view class="menu-item" @click="goToIdentity">
        <view class="menu-icon">
          <My size="40" color="#666" />
        </view>
        <view class="menu-content">
          <text class="menu-text">实名认证</text>
          <view v-if="driverStatus" class="status-badge" :class="statusClass">
            <text class="status-text">{{ statusText }}</text>
          </view>
        </view>
        <view class="menu-arrow">
          <Right size="32" color="#999" />
        </view>
      </view>

      <!-- 修改密码 -->
      <view class="menu-item" @click="changePassword">
        <view class="menu-icon">
          <Setting size="40" color="#666" />
        </view>
        <view class="menu-content">
          <text class="menu-text">修改密码</text>
        </view>
        <view class="menu-arrow">
          <Right size="32" color="#999" />
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <nut-button type="danger" size="large" @click="handleLogout" v-if="userInfo.isLogin">
        退出登录
      </nut-button>
      <nut-button type="primary" size="large" @click="login" v-else>
        立即登录
      </nut-button>
    </view>

    <!-- Toast 提示 -->
    <nut-toast v-model:visible="showToast" :msg="toastMsg" />

    <!-- 头像预览弹窗 -->
    <nut-popup v-model:visible="showAvatarPreview" position="center">
      <view class="avatar-preview-dialog">
        <view class="preview-title">头像预览</view>
        <view class="avatar-preview">
          <image v-if="userInfo.driverInfo?.data?.driverHead || userInfo.avatar"
            :src="userInfo.driverInfo?.data?.driverHead ? getImageUrl(userInfo.driverInfo.data.driverHead) : userInfo.avatar"
            class="preview-avatar-image" mode="aspectFill" />
          <view v-else class="preview-avatar-placeholder">
            <My size="100" color="#666" />
          </view>
        </view>
        <view class="preview-buttons">
          <nut-button @click="showAvatarPreview = false">关闭</nut-button>
          <nut-button type="primary" @click="selectNewAvatar" :disabled="isUploadingAvatar">
            {{ isUploadingAvatar ? '上传中...' : '选择新头像' }}
          </nut-button>
        </view>
      </view>
    </nut-popup>

    <!-- 修改密码弹窗 -->
    <nut-popup v-model:visible="showPasswordDialog" position="center">
      <view class="password-dialog">
        <view class="dialog-title">修改密码</view>
        <nut-form>
          <nut-form-item label="原密码">
            <nut-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码" />
          </nut-form-item>
          <nut-form-item label="新密码">
            <nut-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
          </nut-form-item>
          <nut-form-item label="确认密码">
            <nut-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" />
          </nut-form-item>
        </nut-form>
        <view class="dialog-buttons">
          <nut-button @click="showPasswordDialog = false">取消</nut-button>
          <nut-button type="primary" @click="submitPassword">确认</nut-button>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { Button, Toast, Avatar, Popup, Form, FormItem, Input } from '@nutui/nutui-taro'
import { Cart, Order, Setting, Right, My } from '@nutui/icons-vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { getUserInfo, logout, isLoggedIn, saveUserInfo, checkLoginAndRedirect } from '../../utils/auth.js'
import { driverAPI } from '../../api/index'
import { API_CONFIG } from '../../utils/request.js'

// 用户信息
const userInfo = reactive({
  isLogin: false,
  username: '',
  userId: '',
  phone: '',
  avatar: ''
})

// 页面加载时检查登录状态
onMounted(() => {
  // 检查登录状态，未登录则跳转到登录页
  if (!checkLoginAndRedirect()) {
    return
  }
  
  // 已登录，获取用户信息
  const storedUserInfo = getUserInfo()
  if (storedUserInfo) {
    Object.assign(userInfo, storedUserInfo)
  }
})

// 页面显示时重新获取用户信息
useDidShow(() => {
  // 检查登录状态，未登录则跳转到登录页
  if (!checkLoginAndRedirect()) {
    return
  }
  
  // 已登录，重新获取用户信息
  const storedUserInfo = getUserInfo()
  if (storedUserInfo) {
    Object.assign(userInfo, storedUserInfo)

    // 如果头像有变化，强制重新渲染
    if (storedUserInfo.driverInfo?.data?.driverHead || storedUserInfo.avatar) {
      avatarKey.value++
    }
  } else {
    Object.assign(userInfo, {
      isLogin: false,
      username: '',
      userId: '',
      phone: '',
      avatar: ''
    })
  }

  // 刷新司机数据以获取最新的认证状态
  refreshDriverData()
})

// Toast 相关
const showToast = ref(false)
const toastMsg = ref('')

// 头像预览弹窗
const showAvatarPreview = ref(false)

// 修改密码弹窗
const showPasswordDialog = ref(false)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 头像上传状态
const isUploadingAvatar = ref(false)

// 头像key，用于强制重新渲染
const avatarKey = ref(0)

// 司机状态相关
const driverStatus = computed(() => {
  return userInfo.driverInfo?.data?.driverStatus
})

const statusText = computed(() => {
  const status = driverStatus.value
  if (status === '0') return '待认证'
  if (status === '1') return '正常'
  if (status === '2') return '冻结'
  return '未知状态'
})

// 获取图片完整URL
const getImageUrl = (path) => {
  if (!path) return ''
  // 如果已经是完整URL，直接返回
  if (path.startsWith('http')) {
    return path
  }
  // 拼接API地址
  return `${API_CONFIG.BASE_URL}api${path.startsWith('/') ? path : '/' + path}`
}

const statusClass = computed(() => {
  const status = driverStatus.value
  if (status === '0') return 'status-pending'
  if (status === '1') return 'status-normal'
  if (status === '2') return 'status-frozen'
  return 'status-unknown'
})

// 显示提示
const showMessage = (msg) => {
  toastMsg.value = msg
  showToast.value = true
}

// 刷新司机数据
const refreshDriverData = async () => {
  try {
    const storedUserInfo = getUserInfo()
    if (!storedUserInfo) {
      console.error('无法获取用户信息')
      return
    }

    // 获取用户ID
    const userId = storedUserInfo.userId || storedUserInfo.id || storedUserInfo.user?.id
    if (!userId) {
      console.error('无法获取用户ID')
      return
    }


    // 调用API获取最新的司机信息
    const response = await driverAPI.getDriverInfo(userId)

    if (response.statusCode === 200 && response.data) {
      if (response.data.code === 0 && response.data.data) {
        // 更新本地用户信息中的司机数据
        const updatedUserInfo = {
          ...storedUserInfo,
          driverInfo: {
            ...storedUserInfo.driverInfo,
            data: response.data.data
          }
        }

        // 保存更新后的用户信息
        saveUserInfo(updatedUserInfo)

        // 更新当前页面的用户信息
        Object.assign(userInfo, updatedUserInfo)
      } else {
        console.error('获取司机信息失败:', response.data)
      }
    } else {
      console.error('获取司机信息API调用失败:', response)
    }
  } catch (error) {
    console.error('刷新司机数据失败:', error)
  }
}

// 预览头像
const previewAvatar = () => {
  if (!userInfo.isLogin) {
    showMessage('请先登录')
    return
  }
  showAvatarPreview.value = true
}

// 更换头像
const changeAvatar = () => {
  if (!userInfo.isLogin) {
    showMessage('请先登录')
    return
  }
  selectNewAvatar()
}

// 选择新头像
const selectNewAvatar = () => {
  showAvatarPreview.value = false

  if (isUploadingAvatar.value) {
    showMessage('头像上传中，请稍候...')
    return
  }

  Taro.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]

      // 将图片转换为base64
      Taro.getFileSystemManager().readFile({
        filePath: tempFilePath,
        encoding: 'base64',
        success: (fileRes) => {
          const base64Data = `data:image/jpeg;base64,${fileRes.data}`

          // 上传头像
          uploadAvatar(base64Data)
        },
        fail: (error) => {
          console.error('读取图片文件失败:', error)
          showMessage('头像处理失败，请重试')
        }
      })
    },
    fail: (error) => {
      console.error('选择图片失败:', error)
      showMessage('选择头像失败，请重试')
    }
  })
}

// 上传头像
const uploadAvatar = async (base64Data) => {
  if (isUploadingAvatar.value) return

  isUploadingAvatar.value = true
  showMessage('正在上传头像...')

  try {

    // 获取当前用户的司机ID
    const storedUserInfo = getUserInfo()
    const driverId = storedUserInfo?.driverId || storedUserInfo?.id || userInfo.userId

    if (!driverId) {
      console.error('未找到司机ID，无法上传头像')
      showMessage('用户信息不完整，请重新登录')
      return
    }

    const updateData = {
      id: driverId,
      driverHead: base64Data
    }

    const updateResponse = await driverAPI.updateDriverHead(updateData)

    if (updateResponse.statusCode === 200 && updateResponse.data) {
      if (updateResponse.data.code === 0) {
        // 获取服务器返回的图片路径
        const imagePath = updateResponse.data.data || updateResponse.data.path || updateResponse.data.url

        if (imagePath) {
          // 更新driverInfo.data.driverHead字段为服务器返回的路径
          if (userInfo.driverInfo && userInfo.driverInfo.data) {
            userInfo.driverInfo.data.driverHead = imagePath
          }

          // 强制触发响应式更新
          await nextTick()

          // 强制重新渲染头像
          avatarKey.value++

          // 更新本地存储的用户信息
          if (storedUserInfo) {
            // 同时更新driverInfo中的头像字段
            if (storedUserInfo.driverInfo && storedUserInfo.driverInfo.data) {
              storedUserInfo.driverInfo.data.driverHead = imagePath
            }
            Taro.setStorageSync('userInfo', storedUserInfo)
          }

          showMessage('头像更新成功')
        } else {
          console.error('服务器未返回图片路径')
          showMessage('头像上传失败：未获取到图片路径')
        }
      } else {
        const errorMsg = updateResponse.data?.msg || updateResponse.data?.message || '头像上传失败'
        console.error('头像上传业务失败:', updateResponse.data)
        showMessage(errorMsg)
      }
    } else {
      const errorMsg = updateResponse.data?.msg || updateResponse.data?.message || '头像上传失败'
      showMessage(errorMsg)
    }
  } catch (error) {
    console.error('头像上传失败:', error)
    showMessage('头像上传失败，请重试')
  } finally {
    isUploadingAvatar.value = false
  }
}


// 我的车辆
const goToMyVehicles = () => {
  showMessage('跳转到我的车辆页面')
  // 这里可以跳转到车辆页面
  // Taro.navigateTo({ url: '/pages/vehicle/index' })
}

// 历史运送车次
const goToTrips = () => {
  Taro.navigateTo({ url: '/pages/history/index' })
}

// 实名认证
const goToIdentity = () => {
  Taro.navigateTo({ url: '/pages/realname/index' })
}

// 修改密码
const changePassword = () => {
  Taro.navigateTo({ url: '/pages/password/index' })
}

// 提交密码修改
const submitPassword = () => {
  if (!passwordForm.oldPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
    showMessage('请填写完整信息')
    return
  }

  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    showMessage('两次输入的密码不一致')
    return
  }

  if (passwordForm.newPassword.length < 6) {
    showMessage('密码长度不能少于6位')
    return
  }

  // 这里调用修改密码的API
  showMessage('密码修改成功')
  showPasswordDialog.value = false

  // 清空表单
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}


// 登录
const login = () => {
  Taro.navigateTo({ url: '/pages/login/index' })
}

// 退出登录
const handleLogout = () => {
  logout() // 使用认证工具中的退出登录函数
  showMessage('已退出登录')
}
</script>

<style>
.profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 用户信息区域 */
.user-info {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx;
  color: white;
}

.avatar-section {
  display: flex;
  align-items: center;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-details {
  margin-left: 40rpx;
  flex: 1;
}

.username {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.user-id {
  display: block;
  font-size: 28rpx;
  opacity: 0.8;
  margin-bottom: 12rpx;
}

.phone-number {
  display: block;
  font-size: 28rpx;
  opacity: 0.8;
}

/* 状态徽章 */
.status-badge {
  display: inline-block;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  font-weight: bold;
  width: fit-content;
  max-width: 200rpx;
}

.status-pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1rpx solid rgba(255, 193, 7, 0.3);
}

.status-normal {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
  border: 1rpx solid rgba(40, 167, 69, 0.3);
}

.status-frozen {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
  border: 1rpx solid rgba(220, 53, 69, 0.3);
}

.status-unknown {
  background: rgba(108, 117, 125, 0.2);
  color: #6c757d;
  border: 1rpx solid rgba(108, 117, 125, 0.3);
}

.status-text {
  font-size: 24rpx;
  font-weight: bold;
}

/* 功能菜单区域 */
.menu-section {
  background: white;
  margin: 40rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 40rpx;
  border-bottom: 2rpx solid #f0f0f0;
  transition: background-color 0.3s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f8f8f8;
}

.menu-item.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 16rpx;
  margin-right: 30rpx;
}

.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.menu-text {
  font-size: 32rpx;
  color: #333;
}

.menu-arrow {
  color: #ccc;
}

.menu-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
}

.loading-text {
  font-size: 32rpx;
  color: #667eea;
  animation: loading 1s infinite;
}

@keyframes loading {

  0%,
  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  80%,
  100% {
    opacity: 0;
  }
}

/* 退出登录区域 */
.logout-section {
  padding: 40rpx;
  margin-top: 40rpx;
}

/* 头像预览弹窗 */
.avatar-preview-dialog {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 500rpx;
  max-width: 90vw;
  text-align: center;
}

.preview-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}

.avatar-preview {
  margin-bottom: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-avatar-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.preview-avatar-placeholder {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.preview-buttons .nut-button {
  flex: 1;
}

/* 修改密码弹窗 */
.password-dialog {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 600rpx;
  max-width: 90vw;
}

.dialog-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.dialog-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  gap: 20rpx;
}

.dialog-buttons .nut-button {
  flex: 1;
}
</style>
