<template>
    <div class="order-section">
      <!-- 我的订单标题 -->
      <div class="title-section">
        <div class="order-title">我的订单</div>
        <!-- <van-icon name="manager-o" class="all-orders-icon" @click="goToAllOrders" /> -->
        <div class="all-orders-title" @click="goToAllOrders">全部订单 &gt;</div>
      </div>
  
  
      <!-- 订单状态列表 -->
      <div class="status-icons">
        <van-icon name="paid" @click="goToPendingPayment" class="status-icon" />
        <van-icon name="logistics" @click="goToInProgress" class="status-icon" />
        <van-icon name="question-o" @click="goToPendingReview" class="status-icon" />
        <van-icon name="certificate" @click="goToCompleted" class="status-icon" />
      </div>
  
      <!-- 订单状态文字列表 -->
      <div class="status-texts">
        <div @click="goToPendingPayment" class="status-text">待付款</div>
        <div @click="goToInProgress" class="status-text">进行中</div>
        <div @click="goToPendingReview" class="status-text">待评价</div>
        <div @click="goToCompleted" class="status-text">已完成</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router';
  const router = useRouter();
  
  const goToAllOrders = () => {
    router.push("/orders")
    // 处理跳转到全部订单页面
  };
  
  const goToPendingPayment = () => {
    router.push({
      path:"/orders",
      query:{status:"b"}
    })
    // 处理跳转到待付款页面
  };
  
  const goToInProgress = () => {
    router.push({
      path:"/orders",
      query:{status:"c"}
    })
    // 处理跳转到进行中页面
  };
  
  const goToPendingReview = () => {
    router.push({
      path:"/orders",
      query:{status:"d"}
    })
    // 处理跳转到待评价页面
  };
  
  const goToCompleted = () => {
    router.push({
      path:"/orders",
      query:{status:"f"}
    })
    // 处理跳转到已完成页面
  };
  </script>
  
  <style scoped>
  .order-section {
    margin-top: 16px;
    background-color: white;
    
  }
  
  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 16px;
    background-color: white;
    border-radius: 12px;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
  }
  
  .all-orders-icon {
    font-size: 24px;
    color: #007bff;
  }
  
  .all-orders {
    margin-top: 8px;
    border: none;
  }
  
  .all-orders-title {
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
  }
  
  .status-icons {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
  }
  
  .status-icon {
    font-size: 32px;

  }
  
  .status-texts {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    margin-bottom: 13px; /* 调整下方边框的距离 */
  }
  
  .status-text {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: color 0.3s;
  }
  
  .status-text:hover {
    color: #4CAF50;
  }
  </style>
  