<template>
  <div class="bg">

    <el-tabs v-model="activeTab">
      <el-tab-pane label="所有订单" name="all"></el-tab-pane>
      <el-tab-pane label="待付款" name="pendingPayment"></el-tab-pane>
      <el-tab-pane label="待发货" name="pendingDelivery"></el-tab-pane>
      <el-tab-pane label="配送中" name="delivering"></el-tab-pane>
      <el-tab-pane label="待评价" name="pendingReview"></el-tab-pane>
    </el-tabs>

    <div class="filter-bar">
      <el-form :inline="true" :model="filterForm" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="filterForm.goodsName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="商家名称">
          <el-input v-model="filterForm.merchantName" placeholder="请输入商家名称"></el-input>
        </el-form-item>
        <el-form-item label="交易状态">
          <el-select v-model="filterForm.tradeStatus" placeholder="请选择" style="width: 200px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="待付款" value="pendingPayment"></el-option>
            <el-option label="待发货" value="pendingDelivery"></el-option>
            <el-option label="配送中" value="delivering"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="完成时间">
          <el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="background:#6a8a27;border: none;" type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
        <div class="order-products" style="padding:0 20px;background: #f8f9fa; border-top: 1px solid #eee; border-bottom: 1px solid #eee;margin-bottom: 20px;">
          <div class="product-item" >
            <div class="product-details">
              <div class="product-name">商品信息</div>
            </div>
            <div class="product-price">单价(元)</div>
            <div class="product-quantity">数量</div>
            <div class="product-total">小计(元)</div>
            <!-- <div class="product-status">
              <el-tag  :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag>
            </div> -->
            <div class="product-actions"></div>
          </div>
        </div>

      <!-- 订单卡片 - 按商家合并商品 -->
      <div class="order-card" v-for="order in filteredOrders" :key="order.id">
        <!-- 订单头部 - 包含商家信息 -->
        <div class="order-header flex-between">
            <div style="display: flex;">
                <div >订单号: {{ order.orderNo }}</div>
                <div  style="padding-left: 60px;">下单时间：{{ order.createTime }}</div>
            </div>
            <div class="product-status">
              <el-tag  :type="getStatusTagType(order.status)" size="small">{{ getStatusText(order.status) }}</el-tag>
            </div>
        </div>

        <!-- 订单商品列表 -->
        <div class="order-products">
          <div class="product-item" v-for="product in order.products" :key="product.id">
            <img :src="product.image" class="product-image" :alt="product.name">
            <div class="product-details">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-spec">{{ product.spec }}</div>
            </div>
            <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
            <div class="product-quantity">x{{ product.quantity }}</div>
            <div class="product-total">¥{{ (product.price * product.quantity).toFixed(2) }}</div>
            <!-- <div class="product-status">
              <el-tag  :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag>
            </div> -->
            <div class="product-actions">
              <el-button  type="text"  size="mini"> 商品详情</el-button>
            </div>
          </div>
        </div>

        <!-- 订单底部 - 金额和操作 -->
        <div class="order-footer">
          <div class="order-summary">
            <div class="order-amount">
              合计: <strong>¥{{ order.totalAmount.toFixed(2) }}</strong> (含运费 ¥{{ order.freight.toFixed(2) }})
            </div>
            <!-- <div class="order-tips">
              {{ order.products.length }}件商品
            </div> -->
          </div>
          <div class="order-actions">
            <el-button 
              type="text" 
              size="mini"
              @click="viewOrderDetail(order.id)"
            >订单详情</el-button>
            <el-button 
              v-if="order.status === 'pendingPayment'" 
              type="primary" 
              size="mini"
              @click="payOrder(order.id)"
            >去付款</el-button>
            <el-button 
              v-if="order.status === 'pendingDelivery'" 
              type="text" 
              size="mini"
              @click="remindDelivery(order.id)"
            >提醒发货</el-button>
            <el-button 
              v-if="order.status === 'delivering'" 
              type="text" 
              size="mini"
              @click="checkLogistics(order.id)"
            >查看物流</el-button>
            <el-button 
              v-if="order.status === 'completed' && !order.isReviewed" 
              type="text" 
              size="mini"
              @click="gotoReview(order.id)"
            >去评价</el-button>
            
          </div>
        </div>
      </div>
      <el-empty description="暂无订单" v-if="filteredOrders.length<=0"></el-empty>

      <!-- 分页 -->
      <div style="text-align: right; margin-top: 20px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredOrders.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
   data () {
     return {
        activeTab: 'all',
        currentPage: 1,
        pageSize: 10,
        filterForm: {
          goodsName: '',
          orderNo: '',
          createTime: '',
          merchantName: '',
          tradeStatus: ''
        },
        // 订单数据 - 按商家合并商品
        orders: [
          {
            id: 1,
            orderNo: '209907091214560078',
            createTime: '2099-07-09 10:47:49',
            status: 'pendingPayment',
            totalAmount: 937,
            freight: 15,
            isReviewed: false,
            merchant: {
              id: 101,
              name: '花艺生活馆',
              isOfficial: true
            },
            products: [
              {
                id: 1001,
                name: '深情挚爱/卡罗拉玫瑰',
                image: 'https://picsum.photos/200/200?random=1',
                spec: '卡罗拉玫瑰33枝',
                price: 349,
                quantity: 1,
                status: 'pendingPayment'
              },
              {
                id: 1002,
                name: '精美包装纸',
                image: 'https://picsum.photos/200/200?random=4',
                spec: '粉色',
                price: 38,
                quantity: 2,
                status: 'pendingPayment'
              }
            ]
          },
          {
            id: 2,
            orderNo: '209907091214560079',
            createTime: '2099-07-09 10:48:49',
            status: 'pendingDelivery',
            totalAmount: 199,
            freight: 0,
            isReviewed: false,
            merchant: {
              id: 102,
              name: '北欧家居旗舰店',
              isOfficial: true
            },
            products: [
              {
                id: 2001,
                name: '北欧花艺素雅仿真花',
                image: 'https://picsum.photos/200/200?random=2',
                spec: '白色',
                price: 199,
                quantity: 1,
                status: 'pendingDelivery'
              }
            ]
          },
          {
            id: 3,
            orderNo: '209907091214560080',
            createTime: '2099-07-09 10:49:49',
            status: 'delivering',
            totalAmount: 389,
            freight: 10,
            isReviewed: false,
            merchant: {
              id: 101,
              name: '花艺生活馆',
              isOfficial: true
            },
            products: [
              {
                id: 3001,
                name: '香槟玫瑰+白玫瑰混搭',
                image: 'https://picsum.photos/200/200?random=3',
                spec: '混搭',
                price: 389,
                quantity: 1,
                status: 'delivering'
              }
            ]
          }
        ]
    }
    },
    computed: {
    // 过滤后的订单列表
    filteredOrders() {
        let result = [...this.orders];
        
        // 根据当前标签页过滤
        if (this.activeTab !== 'all') {
        result = result.filter(order => order.status === this.activeTab);
        }
        
        // 根据商品名称过滤
        if (this.filterForm.goodsName) {
        const keyword = this.filterForm.goodsName.toLowerCase();
        result = result.filter(order => {
            return order.products.some(product => 
            product.name.toLowerCase().includes(keyword)
            );
        });
        }
        
        // 根据订单编号过滤
        if (this.filterForm.orderNo) {
        result = result.filter(order => 
            order.orderNo.includes(this.filterForm.orderNo)
        );
        }
        
        // 根据商家名称过滤
        if (this.filterForm.merchantName) {
        const keyword = this.filterForm.merchantName.toLowerCase();
        result = result.filter(order => 
            order.merchant.name.toLowerCase().includes(keyword)
        );
        }
        
        // 根据交易状态过滤
        if (this.filterForm.tradeStatus) {
        result = result.filter(order => 
            order.status === this.filterForm.tradeStatus
        );
        }
        
        return result;
    }
    },
    methods: {
    // 搜索
    search() {
        this.currentPage = 1; // 重置到第一页
        this.$message({
        message: '搜索条件已应用',
        type: 'info'
        });
    },
    
    // 重置
    reset() {
        this.filterForm = {
        goodsName: '',
        orderNo: '',
        createTime: '',
        merchantName: '',
        tradeStatus: ''
        };
        this.activeTab = 'all';
        this.currentPage = 1;
    },
    
    // 分页大小改变
    handleSizeChange(val) {
        this.pageSize = val;
    },
    
    // 当前页改变
    handleCurrentChange(val) {
        this.currentPage = val;
    },
    
    // 获取状态显示文本
    getStatusText(status) {
        const statusMap = {
        pendingPayment: '待付款',
        pendingDelivery: '待发货',
        delivering: '配送中',
        completed: '已完成',
        cancelled: '已取消'
        };
        return statusMap[status] || status;
    },
    
    // 获取状态标签类型
    getStatusTagType(status) {
        const typeMap = {
        pendingPayment: 'warning',
        pendingDelivery: 'info',
        delivering: 'primary',
        completed: 'success',
        cancelled: 'danger'
        };
        return typeMap[status] || 'default';
    },
    
    // 去付款
    payOrder(orderId) {
        this.$message({
        message: `订单 ${orderId} 去付款`,
        type: 'info'
        });
    },
    
    // 提醒发货
    remindDelivery(orderId) {
        this.$message({
        message: `已提醒订单 ${orderId} 发货`,
        type: 'success'
        });
    },
    
    // 查看物流
    checkLogistics(orderId) {
        this.$message({
        message: `查看订单 ${orderId} 物流`,
        type: 'info'
        });
    },
    
    // 去评价
    gotoReview(orderId) {
        this.$message({
        message: `去评价订单 ${orderId}`,
        type: 'info'
        });
    },
    
    // 查看订单详情
    viewOrderDetail(orderId) {
        this.$message({
        message: `查看订单 ${orderId} 详情`,
        type: 'info'
        });
    }
    }
}
</script>

<style lang="scss" scoped>
.bg{
  display: flex;
  flex-direction: column;
  
  ::v-deep .el-button--text {
    color: #6a8a27;
  }
  ::v-deep .el-tabs__item.is-active{
    color: #6a8a27;
  }
  ::v-deep .el-tabs__active-bar{
    background-color: #6a8a27
  }
  ::v-deep .el-tabs__item:hover{
    color: #6a8a27;
  }
}
    .filter-bar {
      margin-bottom: 20px;
    }


    /* 订单卡片样式 */
    .order-card {
      border: 1px solid #eee;
      border-radius: 4px;
      margin-bottom: 20px;
      overflow: hidden;
    }

    /* 订单头部 - 包含商家信息 */
    .order-header {
      background-color: #f8f9fa;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      color: #666;
      font-size: 14px;
    }



    /* 订单商品列表 */
    .order-products {
      padding: 10px 20px;
    }

    .product-item {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px dashed #eee;
      font-size: 14px;
    }

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

    .product-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
      margin-right: 15px;
      border-radius: 4px;
    }

    .product-details {
      flex: 1;
    }

    .product-name {
      color: #333;
      margin-bottom: 5px;
    }

    .product-spec {
      color: #999;
      font-size: 12px;
    }

    .product-price {
      width: 120px;
      text-align: center;
      color: #333;
    }

    .product-quantity {
      width: 100px;
      text-align: center;
      color: #666;
    }

    .product-total {
      width: 120px;
      text-align: center;
      color: #333;
      font-weight: 500;
    }

    .product-status {
      width: 150px;
      text-align: center;
    }

    .product-actions {
      width: 150px;
      text-align: center;
    }

    /* 订单底部 - 金额和操作 */
    .order-footer {
      background-color: #f8f9fa;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #eee;
    }

    .order-summary {
      text-align: right;
    }

    .order-amount {
      color: #333;
      margin-bottom: 5px;
    }

    .order-amount strong {
      color: #ff4d4f;
      font-size: 16px;
    }

    .order-tips {
      font-size: 12px;
      color: #999;
    }

    .order-actions {
      display: flex;
      gap: 10px;
    }
</style>



