<template>
  <el-drawer
    :title="'订单详情 · ' + (detail.orderNo || '')"
    :visible.sync="localVisible"
    direction="rtl"
    size="68%"
    append-to-body
    custom-class="detail-drawer"
  >
    <div v-loading="loading" class="drawer-content">
      <h4 class="section-header">订单信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="订单编号">{{ detail.orderNo || '—' }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag size="small" :type="orderStatusTag(detail.orderStatus)">{{ detail.orderStatusLabel || orderStatusLabel(detail.orderStatus) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ parseTime(detail.createTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="店铺名称">{{ detail.shopName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="实付金额">{{ detail.payAmount != null ? detail.payAmount : '—' }}</el-descriptions-item>
        <el-descriptions-item label="运费">{{ detail.freightAmount != null ? detail.freightAmount : '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">商品明细</h4>
      <el-table v-if="detail.items && detail.items.length" border size="small" :data="detail.items" class="mb16">
        <el-table-column label="商品" min-width="200">
          <template slot-scope="scope">
            <div class="goods-cell">
              <image-preview v-if="scope.row.goodsImage" :src="scope.row.goodsImage" :width="50" :height="50" />
              <span>{{ scope.row.goodsName || '—' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="goodsSpec" width="100" />
        <el-table-column label="单价" prop="unitPrice" width="90" />
        <el-table-column label="数量" prop="quantity" width="70" />
      </el-table>

      <h4 class="section-header">收货信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="收货人">{{ consignee.consigneeName || detail.consigneeName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ consignee.consigneeMobile || detail.consigneeMobile || '—' }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">{{ consignee.consigneeAddress || detail.consigneeAddress || '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 v-if="logistics.logisticsCompany || logistics.trackingNo" class="section-header">物流信息</h4>
      <el-descriptions v-if="logistics.logisticsCompany || logistics.trackingNo" :column="2" border size="small" class="mb16">
        <el-descriptions-item label="物流公司">{{ logistics.logisticsCompany || '—' }}</el-descriptions-item>
        <el-descriptions-item label="物流单号">{{ logistics.trackingNo || '—' }}</el-descriptions-item>
        <el-descriptions-item label="配送方式">{{ logistics.deliveryTypeLabel || '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 v-if="traceList.length" class="section-header">物流轨迹</h4>
      <el-timeline v-if="traceList.length" class="mb16">
        <el-timeline-item v-for="(item, index) in traceList" :key="index" :timestamp="parseTime(item.traceTime)">
          {{ item.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-drawer>
</template>

<script>
import { getMemberOrder } from "@/api/agri/member"

export default {
  name: "MemberOrderDetail",
  props: {
    visible: { type: Boolean, default: false },
    memberId: { type: [Number, String], default: null },
    orderId: { type: [Number, String], default: null }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {},
      consignee: {},
      logistics: {},
      traceList: []
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.memberId && this.orderId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    }
  },
  methods: {
    loadDetail() {
      this.loading = true
      getMemberOrder(this.memberId, this.orderId).then(response => {
        const data = response.data || {}
        this.detail = data
        this.consignee = data.consignee || {}
        this.logistics = data.logistics || {}
        this.traceList = data.traceList || []
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    orderStatusLabel(status) {
      const map = { "0": "待支付", "1": "待发货", "2": "已发货", "3": "已完成", "4": "已关闭", "5": "已删除" }
      return map[status] || "—"
    },
    orderStatusTag(status) {
      const map = { "0": "warning", "1": "primary", "2": "", "3": "success", "4": "info", "5": "info" }
      return map[status] || "info"
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 0 20px 20px;
}
.section-header {
  margin: 16px 0 10px;
  font-size: 15px;
  color: #303133;
  border-left: 3px solid #409EFF;
  padding-left: 8px;
}
.mb16 {
  margin-bottom: 16px;
}
.goods-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
