<template>
  <div class="bg">
    <!-- 订单状态时间线 -->
    <div class="normal-margin-bottom">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/User/UserCenter' }"
          >个人中心</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/User/OrderList' }"
          >我的订单</el-breadcrumb-item
        >
        <el-breadcrumb-item> 订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div
      class="common-card normal-margin-bottom"
      style="padding: 20px 0; display: flex"
    >
      <div class="order-status">
        <div class="order-no">
          订单号: 209907091214560078
          <el-button
            style="color: #999"
            type="text"
            icon="el-icon-document-copy"
          ></el-button>
        </div>
        <div class="status-title">
          <i class="el-icon-time" style="color: #ff9800; font-size: 32px"></i>
          <span style="height: 24px; line-height: 24px; padding-left: 5px"
            >订单状态: {{ info.state_text }}</span
          >
        </div>

        <el-button
          type="primary"
          size="medium"
          v-if="info.state != 'WAIT_COMMENT'"
          >在线付款</el-button
        >
        <!-- <el-button type="text" size="small" style="padding: 0"
          >打印订单</el-button
        > -->
      </div>
      <div class="order-step">
        <el-steps :active="activities.length" align-center style="width: 100%">
          <el-step v-for="(item, i) in activities" :key="i">
            <div class="process-title" slot="description">
              {{ item.remark }}
            </div>
            <div slot="icon">
              <span v-if="i >= 2">{{ i + 1 }}</span>
              <i v-else style="color: #fff" class="el-icon-check"></i>
            </div>
            <div class="process-description" slot="description">
              {{ item.create_time }}
            </div>
          </el-step>
        </el-steps>
      </div>
    </div>

    <!-- 订单信息卡片 -->
    <div
      class="common-card normal-margin-bottom order-info-card"
      style="display: flex; padding: 20px 0"
    >
      <el-descriptions title="订单信息" :column="1">
        <el-descriptions-item label="订单号">{{
          info.order_id
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{
          info.state_text
        }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{
          info.create_time
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="配送信息" :column="1">
        <el-descriptions-item label="收货人">{{
          info.order_product_list[0].consignee_info.name
        }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{
          info.order_product_list[0].consignee_info.address
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{
          info.order_product_list[0].consignee_info.tel
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="配送方式">{{
          deliveryInfo.deliveryMethod
        }}</el-descriptions-item>
        <el-descriptions-item label="期望送达时间">{{
          deliveryInfo.expectedDeliveryTime
        }}</el-descriptions-item> -->
      </el-descriptions>
      <el-descriptions title="支付信息" :column="1" style="border: none" v-if="info.pay_method_text">
        <el-descriptions-item label="支付方式">{{
          info.pay_method_text
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="支付状态">{{
          paymentInfo.paymentStatus
        }}</el-descriptions-item> -->
        <el-descriptions-item label="支付时间">{{
          info.pay_at
        }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 商品列表 -->

    <el-table :data="productList" style="width: 100%">
      <el-table-column prop="name" label="商品名称" align="center">
        <template slot-scope="{ row }">
          <div style="display: flex; align-items: center">
            <img
              :src="row.product_img"
              class="product-image"
              :alt="row.product_title"
            />
            <div>{{ row.product_title }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sku_name"
        label="规格"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="product_price"
        label="单价(元)"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <div>{{ row.product_price / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="product_num"
        label="数量"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="subtotal"
        label="小计(元)"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <div style="color: #ff1111">￥{{ row.paid_money / 100 }}</div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 订单总价 -->
    <div class="common-card normal-margin-bottom total-card">
      <el-descriptions :column="1">
        <el-descriptions-item label="商品总价"
          >￥{{ info.total_money / 100 }}</el-descriptions-item
        >
        <el-descriptions-item label="运费"
          >￥{{ info.total_post_fee / 100 }}</el-descriptions-item
        >
        <el-descriptions-item label="实付款">
          <span style="font-size: 16px; font-weight: bold; color: #ff1111"
            >￥{{ info.paid_money / 100 }}</span
          >
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderDetail",
  data() {
    return {
      info: {},
      activities: [],
      orderInfo: {
        orderNumber: "20250801123456",
        status: "已完成",
        orderTime: "2025-08-01 15:30:00",
      },
      deliveryInfo: {
        receiver: "张三",
        address: "北京市海淀区xxx街道xxx小区",
        phone: "13800138000",
        deliveryMethod: "快递",
        expectedDeliveryTime: "2025-08-02",
      },
      paymentInfo: {
        paymentMethod: "支付宝",
        paymentStatus: "已支付",
        paymentTime: "2025-08-01 15:35:00",
      },
      productList: [],
      totalPrice: {
        productTotal: 500,
        shippingFee: 0,
        actualPayment: 500,
      },
    };
  },
  computed: {},
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      // 订单详情
      this.post(
        {
          order_id: this.$route.query.id,
        },
        "/api/order/query"
      ).then((res) => {
        this.info = res.data;
        this.productList = this.info.order_product_list;
        this.info.order_product_list.forEach((item) => {
          if (item.product_model === "post" && item.consignee_info)
            item.consignee_info = JSON.parse(item.consignee_info);
        });
      });

      // 订单流程记录
      this.post(
        {
          order_id: this.$route.query.id,
        },
        "/api/order/refund_detail"
      ).then((res) => {
        this.activities = res.data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.common-card {
  width: 100%;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.order-status {
  border-right: 1px solid #eee;
  width: 350px;
  height: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .order-no {
    color: #999;
    .el-button {
      width: fit-content;
      margin: 0;
      display: inline-block;
      padding: 0;
    }
  }
  .status-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
  }

  .status-title i {
    font-size: 24px;
  }

  .el-button {
    width: 120px;
    display: block;
    margin: 0 auto;
  }
}
.order-step {
  flex: 1;
  width: 1px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  ::v-deep .el-step__icon.is-text {
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #c0c4cc;
    color: white;
  }
  ::v-deep .el-step__line {
    top: 13px;
  }
  ::v-deep .el-step__line-inner {
    border-color: #c0c4cc;
  }
  .process-title {
    color: #666;
    font-weight: bold;
    font-size: 14px;
    margin-top: 20px;
  }
  .process-description {
    color: #666;
    font-size: 12px;
    // margin-top: 45px;
  }
  ::v-deep .is-finish .el-step__icon {
    background: #67c23a;
  }
}

.order-info-card {
  display: flex;
  ::v-deep .el-descriptions {
    flex: 1;
    flex-shrink: 0;
    border-right: 1px solid rgba(153, 153, 153, 0.1);
    padding: 0 20px;
    .el-descriptions-item__label {
      width: 90px;
    }
  }
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 4px;
}
.total-card {
  margin-top: 20px;
  background: #fafafa;
  box-shadow: none;
  ::v-deep .el-descriptions__body {
    background: none;
    text-align: right;

    .el-descriptions-item__label {
      width: 90%;
      text-align: right;
      justify-content: flex-end;
    }
    .el-descriptions-item__content {
      justify-content: flex-end;
    }
  }
}
</style>



