<template>
  <el-drawer
    :title="'订单详情 · ' + (detail.orderNo || '')"
    :visible.sync="localVisible"
    direction="rtl"
    size="72%"
    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.memberNickName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="实付金额">{{ formatAmount(detail.payAmount) }}</el-descriptions-item>
        <el-descriptions-item label="运费">{{ formatAmount(detail.freightAmount) }}</el-descriptions-item>
        <el-descriptions-item label="配送方式">{{ detail.deliveryTypeLabel || '—' }}</el-descriptions-item>
        <el-descriptions-item label="支付状态">{{ payStatusLabel(detail.payStatus) }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ parseTime(detail.payTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="发货时间">{{ parseTime(detail.shipTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ parseTime(detail.finishTime) || '—' }}</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="220">
          <template slot-scope="scope">
            <div class="goods-cell">
              <image-preview v-if="scope.row.goodsImage" :src="scope.row.goodsImage" :width="50" :height="50" />
              <div>
                <div>{{ scope.row.goodsName || '—' }}</div>
                <div class="sub-text">{{ scope.row.goodsSpec || '默认' }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="unitPrice" width="90" align="center" />
        <el-table-column label="数量" prop="quantity" width="70" align="center" />
        <el-table-column label="小计" prop="lineAmount" width="90" align="center" />
      </el-table>
      <div v-else class="empty-tip mb16">暂无商品明细</div>

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

      <h4 v-if="hasShopDelivery" class="section-header">店铺发货信息</h4>
      <el-descriptions v-if="hasShopDelivery" :column="2" border size="small" class="mb16">
        <el-descriptions-item label="发货人">{{ detail.shopDelivery.shipperName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ detail.shopDelivery.shipperMobile || '—' }}</el-descriptions-item>
        <el-descriptions-item label="发货地区" :span="2">{{ shopDeliveryRegionText }}</el-descriptions-item>
        <el-descriptions-item label="详细地址" :span="2">{{ detail.shopDelivery.detailAddress || '—' }}</el-descriptions-item>
      </el-descriptions>
      <div v-else class="empty-tip mb16">
        尚未配置店铺发货信息，
        <el-button type="text" class="link-btn" @click="goDeliverySetting" v-hasPermi="['agri:seller:delivery:query']">前往配送设置</el-button>
      </div>

      <h4 v-if="hasLogisticsInfo" class="section-header">物流信息</h4>
      <el-descriptions v-if="hasLogisticsInfo" :column="2" border size="small" class="mb16">
        <template v-if="detail.deliveryType === '1'">
          <el-descriptions-item label="物流公司">{{ detail.logisticsCompany || '—' }}</el-descriptions-item>
          <el-descriptions-item label="快递单号">{{ detail.trackingNo || '—' }}</el-descriptions-item>
        </template>
        <template v-if="detail.deliveryType === '2'">
          <el-descriptions-item label="车辆号码">{{ detail.vehicleNo || '—' }}</el-descriptions-item>
          <el-descriptions-item label="配送员">{{ detail.courierName || '—' }}</el-descriptions-item>
          <el-descriptions-item label="配送员手机">{{ detail.courierMobile || '—' }}</el-descriptions-item>
        </template>
        <el-descriptions-item v-if="detail.shipRemark" label="发货备注" :span="2">{{ detail.shipRemark }}</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)"
          placement="top"
        >
          <div class="trace-title">{{ item.traceTypeLabel || traceTypeLabel(item.traceType) }}</div>
          <div class="trace-content">{{ item.content || '—' }}</div>
          <div v-if="item.createBy" class="trace-meta">操作人：{{ item.createBy }}</div>
        </el-timeline-item>
      </el-timeline>

      <div class="action-bar">
        <el-button
          v-if="canShip(detail)"
          type="primary"
          @click="$emit('ship', detail)"
          v-hasPermi="['agri:seller:ship:ship']"
        >去发货</el-button>
        <el-button
          v-if="canLogistics(detail)"
          type="primary"
          plain
          @click="$emit('logistics', detail)"
          v-hasPermi="['agri:seller:ship:ship']"
        >更新物流</el-button>
        <el-button
          v-if="canDelivered(detail)"
          type="success"
          plain
          @click="$emit('delivered', detail)"
          v-hasPermi="['agri:seller:ship:ship']"
        >商品到货</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getSellerShip } from "@/api/agri/seller/ship"

export default {
  name: "SellerShipDetail",
  props: {
    visible: { type: Boolean, default: false },
    orderId: { type: [Number, String], default: null }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {}
    }
  },
  computed: {
    traceList() {
      return this.detail.traceList || []
    },
    hasShopDelivery() {
      return this.detail.shopDelivery && this.detail.shopDelivery.settingId
    },
    shopDeliveryRegionText() {
      const region = this.detail.shopDelivery && this.detail.shopDelivery.region
      if (!region) {
        return "—"
      }
      const parts = [region.provinceName, region.cityName, region.districtName].filter(Boolean)
      return parts.length ? parts.join(" / ") : "—"
    },
    hasLogisticsInfo() {
      const d = this.detail
      return d.deliveryType === '1' && (d.logisticsCompany || d.trackingNo)
        || d.deliveryType === '2' && (d.vehicleNo || d.courierName || d.courierMobile)
        || d.shipRemark
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.orderId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    },
    orderId(val) {
      if (this.localVisible && val) {
        this.loadDetail()
      }
    }
  },
  methods: {
    loadDetail() {
      this.loading = true
      getSellerShip(this.orderId).then(response => {
        this.detail = response.data || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    reload() {
      if (this.orderId) {
        this.loadDetail()
      }
    },
    formatAmount(val) {
      return val != null ? val : '—'
    },
    payStatusLabel(status) {
      if (status === '0') return '未支付'
      if (status === '1') return '已支付'
      return '—'
    },
    orderStatusLabel(status) {
      const map = { "1": "待发货", "2": "已发货", "3": "已完成" }
      return map[status] || "—"
    },
    orderStatusTag(status) {
      const map = { "1": "primary", "2": "", "3": "success" }
      return map[status] || "info"
    },
    traceTypeLabel(type) {
      const map = { "1": "已发货", "2": "运输更新", "3": "已送达", "4": "确认收货" }
      return map[type] || "—"
    },
    canShip(row) {
      return row && row.orderStatus === '1'
    },
    canLogistics(row) {
      return row && row.orderStatus === '2'
    },
    canDelivered(row) {
      return row && row.orderStatus === '2'
    },
    goDeliverySetting() {
      this.$router.push({ path: "/seller/delivery" })
    }
  }
}
</script>

<style scoped lang="scss">
.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;
}
.sub-text {
  color: #909399;
  font-size: 12px;
  margin-top: 2px;
}
.empty-tip {
  color: #909399;
  font-size: 13px;
}
.link-btn {
  padding: 0;
}
.trace-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.trace-content {
  color: #606266;
}
.trace-meta {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}
.action-bar {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}
</style>
