<template>
  <view class="container">
    <!-- 欢迎横幅 -->
    <view class="welcome-banner">
      <text class="welcome-title">欢迎使用保险服务</text>
      <text class="welcome-subtitle">专业、安全、便捷的保险服务平台</text>
    </view>
    
    <!-- 快捷入口 -->
    <view class="quick-actions">
      <view class="action-item" @tap="goToProducts">
        <view class="action-icon">📋</view>
        <text class="action-text">保险产品</text>
      </view>
      <view class="action-item" @tap="goToMy">
        <view class="action-icon">📄</view>
        <text class="action-text">我的保单</text>
      </view>
      <view class="action-item" @tap="goToClaims">
        <view class="action-icon">💰</view>
        <text class="action-text">理赔申请</text>
      </view>
      <view class="action-item" @tap="goToService">
        <view class="action-icon">📞</view>
        <text class="action-text">客服服务</text>
      </view>
    </view>
    
    <!-- 热门产品 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门产品</text>
        <text class="section-more" @tap="goToProducts">更多 ></text>
      </view>
      
      <view class="product-grid">
        <view 
          v-for="item in mockProducts" 
          :key="item.id"
          class="product-card"
          @tap="goToProductDetail(item.id)"
        >
          <view class="product-icon">{{ item.icon }}</view>
          <view class="product-info">
            <text class="product-name">{{ item.name }}</text>
            <text class="product-desc">{{ item.description }}</text>
            <view class="product-price">
              <text class="price-label">起保费：</text>
              <text class="price-value">¥{{ item.min_premium }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 服务优势 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">服务优势</text>
      </view>
      
      <view class="advantage-grid">
        <view class="advantage-item">
          <view class="advantage-icon">🛡️</view>
          <text class="advantage-title">专业保障</text>
          <text class="advantage-desc">专业团队提供全方位保险咨询</text>
        </view>
        <view class="advantage-item">
          <view class="advantage-icon">⚡</view>
          <text class="advantage-title">快速理赔</text>
          <text class="advantage-desc">7x24小时快速理赔服务</text>
        </view>
        <view class="advantage-item">
          <view class="advantage-icon">🔒</view>
          <text class="advantage-title">安全可靠</text>
          <text class="advantage-desc">银行级安全保障体系</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 模拟数据
const mockProducts = ref([
  {
    id: 1,
    name: '综合意外险',
    description: '全面保障意外伤害，保费低廉',
    min_premium: 99,
    icon: '🛡️'
  },
  {
    id: 2,
    name: '重疾保险',
    description: '重大疾病保障，安心无忧',
    min_premium: 299,
    icon: '🏥'
  },
  {
    id: 3,
    name: '车险',
    description: '车辆全面保障，理赔快速',
    min_premium: 1999,
    icon: '🚗'
  },
  {
    id: 4,
    name: '旅行险',
    description: '出行安全保障，全球覆盖',
    min_premium: 59,
    icon: '✈️'
  }
])

// 页面跳转方法
const goToProductDetail = (id) => {
  uni.navigateTo({
    url: `/pages/product-detail/product-detail?id=${id}`
  })
}

const goToProducts = () => {
  uni.switchTab({
    url: '/pages/products/products'
  })
}

const goToMy = () => {
  uni.switchTab({
    url: '/pages/my/my'
  })
}

const goToClaims = () => {
  uni.navigateTo({
    url: '/pages/claims/claims'
  })
}

const goToService = () => {
  uni.showModal({
    title: '客服服务',
    content: '客服电话：400-888-8888\n服务时间：周一至周日 9:00-18:00',
    showCancel: false
  })
}

// 页面显示时
onShow(() => {
  console.log('首页显示')
})
</script>

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

.welcome-banner {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  padding: 60rpx 30rpx;
  text-align: center;
  color: white;
}

.welcome-title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.welcome-subtitle {
  font-size: 28rpx;
  opacity: 0.9;
  display: block;
}

.quick-actions {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 20rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-icon {
  font-size: 60rpx;
  margin-bottom: 20rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f8ff;
  border-radius: 50%;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

.section {
  margin-bottom: 20rpx;
  background: #fff;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  color: #1890ff;
  font-size: 28rpx;
}

.product-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-card {
  display: flex;
  padding: 30rpx;
  border: 1px solid #eee;
  border-radius: 12rpx;
  background: #fafafa;
}

.product-icon {
  font-size: 60rpx;
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f8ff;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.product-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.product-price {
  display: flex;
  align-items: center;
}

.price-label {
  font-size: 24rpx;
  color: #999;
}

.price-value {
  font-size: 32rpx;
  color: #ff6b35;
  font-weight: bold;
}

.advantage-grid {
  display: flex;
  justify-content: space-between;
}

.advantage-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20rpx;
}

.advantage-icon {
  font-size: 60rpx;
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f8ff;
  border-radius: 50%;
}

.advantage-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.advantage-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}
</style>