<template>
  <div class="home-page">
    <!-- 顶部区域 -->
    <div class="header">
      <div class="user-info">
        <div style="width:44px;height:44px;background:#E8F8EE;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:20px;">
          🛵
        </div>
        <div>
          <h3 style="margin:0;">{{ customerInfo.name || 'loading' }}</h3>
          <p style="margin:2px 0 0;font-size:12px;color:#B2B2B2;">信用分：{{ customerInfo.creditScore || 100 }}</p>
        </div>
      </div>
      <div class="wallet" @click="$router.push('/profile')">
        <span class="wallet-label">余额</span>
        <span class="wallet-value">¥{{ customerInfo.balance || 0 }}</span>
      </div>
    </div>

    <!-- Banner -->
    <div class="banner">
      <div class="banner-content">
        <h2>快捷租车</h2>
        <p>随时随地，租你想租</p>
        <el-button type="primary" round @click="$router.push('/vehicles')" style="background:#FF6B00;border-color:#FF6B00;border-radius:20px;padding:6px 20px;font-size:13px;">
          立即租车
        </el-button>
      </div>
      <div class="banner-icon">🛵</div>
    </div>

    <!-- 热门车型 -->
    <div class="section">
      <div class="section-header">
        <h3>热门车型</h3>
        <el-button link type="primary" @click="$router.push('/vehicles')">查看更多</el-button>
      </div>
      <div class="vehicle-list">
        <div
          v-for="vehicle in hotVehicles"
          :key="vehicle._id"
          class="vehicle-card"
          @click="$router.push(`/vehicle/${vehicle._id}`)"
        >
          <div class="vehicle-img">🛵</div>
          <div class="vehicle-info">
            <h4>{{ vehicle.model }}</h4>
            <p class="vehicle-desc">{{ vehicle.color }} · {{ vehicle.batteryType }}</p>
            <div class="vehicle-price">
              <span class="price">¥{{ getDailyRate(vehicle) }}/天</span>
              <el-tag size="small" type="success">空闲</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷入口 -->
    <div class="quick-actions">
      <div class="action-item" @click="$router.push('/orders')">
        <div style="width:40px;height:40px;background:#E8F8EE;border-radius:12px;display:flex;align-items:center;justify-content:center;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF6B00" 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>
      </div>
      <div class="action-item" @click="$router.push('/profile')">
        <div style="width:40px;height:40px;background:#FFF4E0;border-radius:12px;display:flex;align-items:center;justify-content:center;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF8C00" 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>
      </div>
      <div class="action-item" @click="$router.push('/profile')">
        <div style="width:40px;height:40px;background:#E8F0FF;border-radius:12px;display:flex;align-items:center;justify-content:center;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#576BFF" 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>
      </div>
      <div class="action-item" @click="$router.push('/profile')">
        <div style="width:40px;height:40px;background:#F0F0F0;border-radius:12px;display:flex;align-items:center;justify-content:center;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.63A2 2 0 012.18 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.91a16 16 0 006.18 6.18l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
        </div>
        <span>客服</span>
      </div>
    </div>

    <!-- 当前租赁 -->
    <div class="section" v-if="currentOrder">
      <div class="section-header">
        <h3>当前租赁</h3>
      </div>
      <div class="order-card active" @click="$router.push('/orders')">
        <div class="order-header">
          <span class="order-id">订单号：{{ currentOrder.orderNumber }}</span>
          <el-tag type="warning">{{ currentOrder.status }}</el-tag>
        </div>
        <div class="order-body">
          <div class="vehicle-mini">
            <span class="icon">🛵</span>
            <span class="model">{{ currentOrder.vehicle?.model || '电动车' }}</span>
          </div>
          <div class="order-detail">
            <p>租车时间：{{ formatDate(currentOrder.startDate) }}</p>
            <p>预计还车：{{ formatDate(currentOrder.endDate) }}</p>
            <p class="amount">应付金额：¥{{ currentOrder.totalAmount }}</p>
          </div>
        </div>
        <div class="order-footer">
          <el-button type="primary" size="small" @click.stop="renewOrder">续租</el-button>
          <el-button size="small" @click.stop="returnVehicle">还车</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { List, Wallet, Location, Service } from '@element-plus/icons-vue'
import request from '../utils/request'

const customerInfo = ref(JSON.parse(localStorage.getItem('customer_info') || '{}'))
const hotVehicles = ref([])
const currentOrder = ref(null)

// 根据车型计算日租金（模拟）
const getDailyRate = (vehicle) => {
  const basePrice = vehicle.purchasePrice || 3000
  return Math.round(basePrice / 100) // 简单计算
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

// 获取热门车型
const fetchHotVehicles = async () => {
  try {
    const res = await request.get('/vehicles')
    if (res.success) {
      hotVehicles.value = res.data.filter(v => v.status === '空闲').slice(0, 3)
    }
  } catch (e) {
    // 模拟数据
    hotVehicles.value = [
      { _id: '1', model: '黑骑士', color: '黑色', batteryType: '锂电池', purchasePrice: 3500, status: '空闲' },
      { _id: '2', model: '高端豪车', color: '红色', batteryType: '锂电池', purchasePrice: 8000, status: '空闲' },
      { _id: '3', model: '电动车', color: '蓝色', batteryType: '铅酸电池', purchasePrice: 2800, status: '空闲' }
    ]
  }
}

// 获取当前订单
const fetchCurrentOrder = async () => {
  try {
    const customerId = localStorage.getItem('customer_id')
    if (!customerId) return
    
    const res = await request.get('/orders')
    if (res.success) {
      const activeOrder = res.data.find(o => 
        o.customer?._id === customerId && 
        (o.status === '进行中' || o.status === '待支付')
      )
      currentOrder.value = activeOrder || null
    }
  } catch (e) {
    console.log('获取订单失败')
  }
}

// 续租
const renewOrder = () => {
  ElMessage.info('续租功能开发中')
}

// 还车
const returnVehicle = () => {
  ElMessage.info('还车功能开发中')
}

onMounted(() => {
  fetchHotVehicles()
  fetchCurrentOrder()
})
</script>

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

.header {
  background: #fff;
  padding: 16px 16px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid rgba(0,0,0,0.06);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

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

.wallet {
  background: #E8F8EE;
  padding: 6px 14px;
  border-radius: 16px;
  text-align: center;
}

.wallet-label {
  display: block;
  font-size: 10px;
  color: #FF6B00;
}

.wallet-value {
  font-size: 16px;
  font-weight: 600;
  color: #FF6B00;
}

.banner {
  background: #fff;
  margin: 12px;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner h2 {
  font-size: 20px;
  margin: 0 0 6px 0;
  color: #1A1A1A;
  font-weight: 600;
}

.banner p {
  font-size: 13px;
  color: #B2B2B2;
  margin: 0 0 12px 0;
}

.banner-icon {
  font-size: 52px;
}

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

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 12px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0;
}

.vehicle-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #F7F7F7;
}

.vehicle-card {
  background: #fff;
  padding: 14px 12px 12px;
  cursor: pointer;
}

.vehicle-img {
  font-size: 44px;
  text-align: center;
  padding: 8px 0;
}

.vehicle-info h4 {
  font-size: 15px;
  margin: 0 0 4px 0;
  color: #1A1A1A;
  font-weight: 500;
}

.vehicle-desc {
  font-size: 11px;
  color: #B2B2B2;
  margin: 0 0 8px 0;
}

.vehicle-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #FF6B00;
  font-weight: 600;
  font-size: 15px;
}

.quick-actions {
  display: flex;
  background: #fff;
  margin: 0 12px 12px;
  border-radius: 16px;
  padding: 14px 8px;
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.action-item span {
  font-size: 10px;
  color: #B2B2B2;
}

.order-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  margin: 0 12px 12px;
}

.order-card.active {
  border-left: 3px solid #FF6B00;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.order-id {
  font-size: 12px;
  color: #B2B2B2;
}

.order-body {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.vehicle-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.vehicle-mini .icon {
  font-size: 32px;
}

.vehicle-mini .model {
  font-size: 11px;
  color: #B2B2B2;
}

.order-detail {
  flex: 1;
}

.order-detail p {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: #1A1A1A;
}

.order-detail .amount {
  color: #FF6B00;
  font-weight: 600;
}

.order-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>
