<template>
  <div class="profile-page">
    <!-- 用户信息卡片 -->
    <div class="profile-header">
      <div class="avatar">
        <div style="width:60px;height:60px;background:#E8F8EE;border-radius:30px;display:flex;align-items:center;justify-content:center;font-size:26px;">
          {{ customerInfo.name?.charAt(0) || '租' }}
        </div>
      </div>
      <div class="user-info">
        <h3>{{ customerInfo.name || '加载中...' }}</h3>
        <p>手机号：{{ customerInfo.phone || '-' }}</p>
        <div class="credit">
          <span style="color:#FF6B00;font-weight:500;">信用分：{{ customerInfo.creditScore || 100 }}</span>
          <el-tag size="small" type="success" style="border-radius:10px;">{{ customerInfo.creditLevel || '优秀' }}</el-tag>
        </div>
      </div>
      <el-button :icon="Setting" text @click="showSettings = true" class="settings-btn" />
    </div>

    <!-- 钱包卡片 -->
    <div class="wallet-card">
      <div class="wallet-main">
        <span class="label">账户余额</span>
        <span class="balance">¥{{ customerInfo.balance || 0 }}</span>
      </div>
      <div class="wallet-actions">
        <el-button type="primary" size="small" @click="showRecharge = true">充值</el-button>
        <el-button size="small" @click="showWithdraw = true">提现</el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-card">
      <div class="stat-item">
        <span class="value">{{ customerInfo.totalRentals || 0 }}</span>
        <span class="label">租车次数</span>
      </div>
      <div class="stat-divider"></div>
      <div class="stat-item">
        <span class="value">{{ customerInfo.currentRentals || 0 }}</span>
        <span class="label">当前在租</span>
      </div>
      <div class="stat-divider"></div>
      <div class="stat-item">
        <span class="value">¥{{ customerInfo.totalSpent || 0 }}</span>
        <span class="label">累计消费</span>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-list">
      <div class="menu-item" @click="showRecharge = true">
        <div style="width:32px;height:32px;background:#E8F8EE;border-radius:8px;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF6B00" stroke-width="1.8"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
        </div>
        <span>充值余额</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
      <div class="menu-item" @click="showTransaction = true">
        <div style="width:32px;height:32px;background:#E8F0FF;border-radius:8px;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#576BFF" stroke-width="1.8"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
        </div>
        <span>交易记录</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
      <div class="menu-item" @click="$router.push('/orders')">
        <div style="width:32px;height:32px;background:#FFF4E0;border-radius:8px;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF8C00" stroke-width="1.8"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
        </div>
        <span>我的订单</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
      <div class="menu-item" @click="showAddress = true">
        <div style="width:32px;height:32px;background:#F0E8FF;border-radius:8px;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#722ed1" stroke-width="1.8"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        </div>
        <span>还车点</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
      <div class="menu-item" @click="showAbout = true">
        <div style="width:32px;height:32px;background:#F0F0F0;border-radius:8px;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        </div>
        <span>关于我们</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
      <div class="menu-item" @click="logout">
        <div style="width:32px;height:32px;background:#FFE8E8;border-radius:8px;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF4D4F" stroke-width="1.8"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        </div>
        <span>退出登录</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
    </div>

    <!-- 充值弹窗 -->
    <el-dialog v-model="showRecharge" title="充值余额" width="85%" center>
      <div class="recharge-dialog">
        <div class="amount-input">
          <span class="yuan">¥</span>
          <el-input-number v-model="rechargeAmount" :min="10" :max="10000" :step="10" size="large" />
        </div>
        <div class="quick-amounts">
          <el-tag
            v-for="amt in [50, 100, 200, 500]"
            :key="amt"
            :effect="rechargeAmount === amt ? 'dark' : 'plain'"
            class="amount-tag"
            @click="rechargeAmount = amt"
          >
            ¥{{ amt }}
          </el-tag>
        </div>
        <el-button type="primary" size="large" style="width: 100%; margin-top: 16px" @click="handleRecharge">
          确认充值
        </el-button>
      </div>
    </el-dialog>

    <!-- 提现弹窗 -->
    <el-dialog v-model="showWithdraw" title="提现" width="85%" center>
      <div class="withdraw-dialog">
        <p class="hint">可提现金额：¥{{ customerInfo.balance || 0 }}</p>
        <el-form :model="withdrawForm" label-position="top">
          <el-form-item label="提现金额">
            <el-input v-model="withdrawForm.amount" placeholder="请输入提现金额" size="large" />
          </el-form-item>
          <el-form-item label="支付宝账号">
            <el-input v-model="withdrawForm.alipay" placeholder="请输入支付宝账号" size="large" />
          </el-form-item>
        </el-form>
        <el-button type="primary" size="large" style="width: 100%" @click="handleWithdraw">
          确认提现
        </el-button>
      </div>
    </el-dialog>

    <!-- 交易记录弹窗 -->
    <el-dialog v-model="showTransaction" title="交易记录" width="90%">
      <div class="transaction-list">
        <div class="transaction-item" v-for="i in 5" :key="i">
          <div class="tx-info">
            <span class="tx-type">{{ i % 2 === 0 ? '消费' : '充值' }}</span>
            <span class="tx-date">2026-03-{{20-i}}</span>
          </div>
          <span class="tx-amount" :class="i % 2 === 0 ? 'expense' : 'income'">
            {{ i % 2 === 0 ? '-' : '+' }}¥{{ (Math.random() * 100).toFixed(2) }}
          </span>
        </div>
      </div>
    </el-dialog>

    <!-- 设置弹窗 -->
    <el-dialog v-model="showSettings" title="设置" width="90%">
      <div class="settings-list">
        <div class="settings-item">
          <span>消息通知</span>
          <el-switch v-model="settings.notifications" />
        </div>
        <div class="settings-item">
          <span>声音提示</span>
          <el-switch v-model="settings.sound" />
        </div>
        <div class="settings-item">
          <span>清除缓存</span>
          <el-button size="small" @click="clearCache">清除</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 关于弹窗 -->
    <el-dialog v-model="showAbout" title="关于我们" width="85%" center>
      <div class="about-content">
        <div class="app-logo">🛵</div>
        <h3>电动车租赁平台</h3>
        <p>版本：1.0.0</p>
        <p class="desc">专业的电动车租赁服务，为您提供便捷的租车体验。</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Wallet, Document, List, Location, InfoFilled, SwitchButton, Setting, ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const customerInfo = ref(JSON.parse(localStorage.getItem('customer_info') || '{}'))

const showRecharge = ref(false)
const showWithdraw = ref(false)
const showTransaction = ref(false)
const showSettings = ref(false)
const showAddress = ref(false)
const showAbout = ref(false)

const rechargeAmount = ref(100)
const withdrawForm = ref({
  amount: '',
  alipay: ''
})

const settings = ref({
  notifications: true,
  sound: true
})

const handleRecharge = () => {
  ElMessage.success(`充值 ¥${rechargeAmount.value} 成功（演示）`)
  customerInfo.value.balance = (customerInfo.value.balance || 0) + rechargeAmount.value
  localStorage.setItem('customer_info', JSON.stringify(customerInfo.value))
  showRecharge.value = false
}

const handleWithdraw = () => {
  if (!withdrawForm.value.amount || !withdrawForm.value.alipay) {
    ElMessage.warning('请填写完整信息')
    return
  }
  ElMessage.success('提现申请已提交（演示）')
  showWithdraw.value = false
}

const clearCache = () => {
  ElMessage.success('缓存已清除')
}

const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('token')
    localStorage.removeItem('riderInfo')
    router.push('/login')
    ElMessage.success('已退出登录')
  }).catch(() => {})
}

onMounted(() => {
  // 刷新用户信息
  customerInfo.value = JSON.parse(localStorage.getItem('customer_info') || '{}')
})
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: #F7F7F7;
  padding-bottom: 20px;
}

.profile-header {
  background: #fff;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  border-bottom: 0.5px solid rgba(0,0,0,0.06);
}

.avatar {
  flex-shrink: 0;
}

.user-info {
  flex: 1;
}

.user-info h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
}

.user-info p {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #B2B2B2;
}

.credit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.settings-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #B2B2B2 !important;
}

.wallet-card {
  background: #fff;
  margin: 12px;
  border-radius: 16px;
  padding: 16px;
}

.wallet-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.wallet-main .label {
  color: #B2B2B2;
  font-size: 13px;
}

.wallet-main .balance {
  color: #FF6B00;
  font-size: 28px;
  font-weight: 700;
}

.wallet-actions {
  display: flex;
  gap: 12px;
}

.wallet-actions .el-button:first-child {
  flex: 1;
  background: #FF6B00;
  border-color: #FF6B00;
  border-radius: 12px;
}

.wallet-actions .el-button:last-child {
  border-radius: 12px;
}

.stats-card {
  background: #fff;
  margin: 0 12px;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.stat-item {
  text-align: center;
}

.stat-item .value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1A1A1A;
}

.stat-item .label {
  font-size: 10px;
  color: #B2B2B2;
  margin-top: 4px;
}

.stat-divider {
  width: 0.5px;
  height: 40px;
  background: #F0F0F0;
}

.menu-list {
  background: #fff;
  margin: 12px;
  border-radius: 16px;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.menu-item:active {
  background: #F7F7F7;
}

.menu-item span {
  flex: 1;
  margin-left: 12px;
  font-size: 15px;
  color: #1A1A1A;
}

.menu-item .el-icon:last-child {
  color: #B2B2B2;
}

.recharge-dialog {
  padding: 10px 0;
}

.amount-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.amount-input .yuan {
  font-size: 24px;
  color: #1A1A1A;
}

.quick-amounts {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.amount-tag {
  cursor: pointer;
  padding: 8px 16px;
}

.withdraw-dialog {
  padding: 10px 0;
}

.withdraw-dialog .hint {
  text-align: center;
  color: #B2B2B2;
  margin-bottom: 16px;
}

.transaction-list {
  max-height: 400px;
  overflow-y: auto;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 0.5px solid #F0F0F0;
}

.tx-type {
  display: block;
  font-size: 14px;
  color: #1A1A1A;
}

.tx-date {
  font-size: 11px;
  color: #B2B2B2;
}

.tx-amount {
  font-size: 16px;
  font-weight: 600;
}

.tx-amount.expense {
  color: #1A1A1A;
}

.tx-amount.income {
  color: #FF6B00;
}

.settings-list {
  padding: 10px 0;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 0.5px solid #F0F0F0;
}

.about-content {
  text-align: center;
  padding: 20px 0;
}

.app-logo {
  font-size: 64px;
  margin-bottom: 12px;
}

.about-content h3 {
  margin: 0 0 8px 0;
  color: #1A1A1A;
}

.about-content p {
  margin: 0 0 4px 0;
  color: #B2B2B2;
}

.about-content .desc {
  margin-top: 12px;
  font-size: 13px;
}
</style>
