<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.keywords"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input
            v-model="filterForm.order_id"
            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.state"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="(item, i) in typeList"
              :key="i"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="完成时间">
          <el-date-picker
            v-model="filterForm.finishTime"
            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 orders" :key="order.id">
        <!-- 订单头部 - 包含商家信息 -->
        <div class="order-header flex-between">
          <div style="display: flex">
            <div>订单号: {{ order.order_id }}</div>
            <div style="padding-left: 60px">
              下单时间：{{ order.create_time }}
            </div>
          </div>
          <div class="product-status">
            <el-tag :type="getStatusTagType(order.state)" size="small">{{
              order.state_text
            }}</el-tag>
          </div>
        </div>

        <!-- 订单商品列表 -->
        <div class="order-products">
          <div
            class="product-item"
            v-for="product in order.order_product_list"
            :key="product.id"
          >
            <img :src="product.product_img" class="product-image" />
            <div class="product-details">
              <div class="product-name">{{ product.product_title }}</div>
              <div class="product-spec">{{ product.sku_name }}</div>
            </div>
            <div class="product-price">
              ¥{{ (product.product_price / 100).toFixed(2) }}
            </div>
            <div class="product-quantity">x{{ product.product_num }}</div>
            <div class="product-total">
              ¥{{ (product.paid_money / 100).toFixed(2) }}
            </div>

            <div class="product-actions">
              <el-button type="text" size="mini" @click="openReview(product)">
                评价详情</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="gotoReview(product)"
                v-if="product.state == 'WAIT_COMMENT'"
              >
                去评价</el-button
              >
            </div>
          </div>
        </div>

        <!-- 订单底部 - 金额和操作 -->
        <div class="order-footer">
          <div class="order-summary">
            <div class="order-amount">
              合计:
              <strong>¥{{ (order.paid_money / 100).toFixed(2) }}</strong>
              (含运费 ¥{{ (order.total_post_fee / 100).toFixed(2) }})
            </div>
            <!-- <div class="order-tips">
              {{ order.products.length }}件商品
            </div> -->
          </div>
          <!-- <div class="order-actions">
            <el-button
              v-if="order.state === 'completed'"
              type="text"
              size="mini"
              @click="gotoReview(order.id)"
              >去评价</el-button
            >
          </div> -->
        </div>
      </div>
      <el-empty
        description="当前类型暂无评价"
        v-if="orders.length <= 0"
      ></el-empty>

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

    <!-- 评价详情弹框 -->
    <el-dialog
      title="评价详情"
      :visible.sync="visible"
      width="700px"
      :close-on-click-modal="false"
      :show-close="true"
      :before-close="handleClose"
    >
      <div class="review-box">
        <div class="time">{{ reviewInfo.create_time }}</div>
        <div class="rating-stars">
          <!-- 动态渲染星级 -->
          <span v-for="star in reviewInfo.rate" :key="star"> ★ </span>
        </div>
        <div class="content">{{ reviewInfo.content }}</div>
        <div class="imgs">
          <img
            :src="item"
            class="img"
            v-for="(item, index) in reviewInfo.img_list"
            :key="index"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      activeTab: "ALL",

      filterForm: {
        keywords: "",
        currentPage: 1,
        limit: 10,
        order_id: "",
        createTime: [],
        start_date: "",
        end_date: "",
        total: 1,
        state: "",
        visible: false,
      },
      typeList: [
        { name: "待评价", id: "WAIT_COMMENT" },
        { name: "已评价", id: "COMPLETED" },
      ],
      // 订单数据 - 按商家合并商品
      orders: [],
      visible: false,
      reviewInfo: {},
    };
  },
  computed: {},
  mounted() {
    this.filterForm.state = "WAIT_COMMENT";
    this.getList();
  },
  methods: {
    // 评价详情弹框
    openReview(item) {
      this.post(
        {
          child_order_id: item.child_order_id,
        },
        "/api/product/ownProductComment"
      ).then((res) => {
        if (res.code == 1) {
          this.reviewInfo = res.data;
          this.visible = true;
        }
      });
    },
    gotoDetail(item) {
      this.$router.push("/Detail/" + item.product_id);
    },
    getList() {
      this.filterForm.start_date = this.filterForm.createTime[0];
      this.filterForm.end_date = this.filterForm.createTime[1];

      this.post(
        {
          ...this.filterForm,
          offset: (this.filterForm.currentPage - 1) * this.filterForm.limit,
        },
        "/api/order/list"
      ).then((res) => {
        this.orders = res.data.list;
        this.filterForm.total = res.data.total;
      });
    },

    // 搜索
    search() {
      this.filterForm.currentPage = 1;
      this.getList();
    },

    // 重置
    reset() {
      this.filterForm = {
        keywords: "",
        currentPage: 1,
        limit: 10,
        order_id: "",
        createTime: [],
        start_date: "",
        end_date: "",
        total: 1,
      };
      this.getList();
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.filterForm.limit = val;
      this.filterForm.currentPage = 1;
      this.getList();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.filterForm.currentPage = val;
      this.getList();
    },

    // 获取状态显示文本
    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(product) {
      this.$router.push("/ProductReview?product=" + JSON.stringify(product));
    },

    // 查看订单详情
    viewOrderDetail(orderId) {
      this.$router.push({
        path: "/OrderDetail?id=" + orderId,
      });
    },
  },
};
</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;
  background: #fff;
}

.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;
}

.review-box {

  .time {
    color: #666;
    font-size: 16px;
  }

  .rating-stars {
    margin-left: auto;
    color: #ff4d4f;
    font-size: 20px;
    margin-top: 10px;
  }

  .content {
    color: #000;
    font-size: 16px;
    margin-top: 10px;
  }

  .imgs {
    display: flex;
    flex-wrap: wrap;

    .img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      margin: 10px 10px 10px 0;
    }
  }
}
</style>



