<template>
  <el-drawer
    :title="'售后详情 · ' + (detail.aftersaleNo || '')"
    :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-steps :active="progressActive" finish-status="success" align-center class="progress-steps mb16">
        <el-step title="商家处理" description="买家已提交，待商家处理" />
        <el-step title="售后完结" description="处理结果同步至买家端" />
      </el-steps>

      <h4 class="section-header">售后信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="售后编号">{{ detail.aftersaleNo || '—' }}</el-descriptions-item>
        <el-descriptions-item label="售后状态">
          <el-tag size="small" :type="aftersaleStatusTag(detail.aftersaleStatus)">
            {{ detail.aftersaleStatusText || aftersaleStatusLabel(detail.aftersaleStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请类型">{{ detail.applyTypeText || applyTypeLabel(detail.applyType) }}</el-descriptions-item>
        <el-descriptions-item label="售后原因">{{ detail.applyReason || '—' }}</el-descriptions-item>
        <el-descriptions-item label="退货数量">{{ returnQuantityText(detail) }}</el-descriptions-item>
        <el-descriptions-item label="申请金额">¥{{ detail.applyAmount != null ? detail.applyAmount : '—' }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ parseTime(detail.createTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="完结时间">{{ parseTime(detail.finishTime) || '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">商品信息</h4>
      <div class="goods-target mb16">
        <image-preview v-if="detail.goodsImage" :src="detail.goodsImage" :width="64" :height="64" />
        <div class="goods-text">
          <div class="goods-name">{{ detail.goodsName || '—' }}</div>
          <div class="sub-text">{{ detail.goodsSpec || '默认' }}</div>
          <div class="sub-text">购买数量 × {{ detail.quantity != null ? detail.quantity : '—' }}</div>
        </div>
      </div>

      <h4 class="section-header">订单信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="订单编号">
          <el-button v-if="detail.orderId && detail.orderNo" type="text" class="order-link" @click="handleViewOrder">{{ detail.orderNo }}</el-button>
          <span v-else-if="detail.orderNo">{{ detail.orderNo }}</span>
          <span v-else>—</span>
        </el-descriptions-item>
        <el-descriptions-item label="订单总金额">¥{{ detail.payAmount != null ? detail.payAmount : '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">买家/收货信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="会员名称">{{ detail.memberNickName || '—' }}</el-descriptions-item>
        <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="detail.description" class="section-header">补充说明</h4>
      <div v-if="detail.description" class="text-block mb16">{{ detail.description }}</div>

      <h4 v-if="detail.evidencePics && detail.evidencePics.length" class="section-header">凭证图片</h4>
      <div v-if="detail.evidencePics && detail.evidencePics.length" class="pics-row mb16">
        <image-preview
          v-for="(pic, idx) in detail.evidencePics"
          :key="idx"
          :src="pic"
          :width="72"
          :height="72"
          class="pic-item"
        />
      </div>

      <h4 class="section-header">处理结果</h4>
      <el-descriptions :column="1" border size="small" class="mb16">
        <el-descriptions-item v-if="detail.processResult" label="商家处理">
          <div class="text-block">{{ detail.processResult }}</div>
        </el-descriptions-item>
        <el-descriptions-item v-else label="提示">
          <span class="pending-tip">待处理，请填写处理结果并完结售后</span>
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="canFinish" class="action-bar">
        <el-button type="primary" plain @click="handleFinish" v-hasPermi="['agri:seller:aftersale:finish']">处理售后</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getSellerAftersale } from "@/api/agri/seller/aftersale"

const APPLY_TYPE_MAP = {
  "1": "仅退款-未发货",
  "2": "仅退款-已发货",
  "3": "退货退款"
}

const AFTERSALE_STATUS_MAP = {
  "1": "进行中",
  "2": "已完结"
}

export default {
  name: "SellerAftersaleDetail",
  props: {
    visible: { type: Boolean, default: false },
    aftersaleId: { type: [Number, String], default: null }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {}
    }
  },
  computed: {
    progressActive() {
      return this.detail.aftersaleStatus === "2" ? 2 : 0
    },
    canFinish() {
      return this.detail.aftersaleStatus === "1"
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.aftersaleId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    },
    aftersaleId(val) {
      if (val && this.localVisible) {
        this.loadDetail()
      }
    }
  },
  methods: {
    applyTypeLabel(type) {
      return APPLY_TYPE_MAP[type] || "—"
    },
    aftersaleStatusLabel(status) {
      return AFTERSALE_STATUS_MAP[status] || "—"
    },
    aftersaleStatusTag(status) {
      const map = { "1": "warning", "2": "success" }
      return map[status] || "info"
    },
    returnQuantityText(detail) {
      if (detail.applyType === "1") {
        return "—"
      }
      return detail.returnQuantity != null ? detail.returnQuantity : "—"
    },
    loadDetail() {
      if (!this.aftersaleId) {
        return
      }
      this.loading = true
      getSellerAftersale(this.aftersaleId).then(response => {
        this.detail = response.data || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    reload() {
      this.loadDetail()
    },
    handleViewOrder() {
      this.$emit("view-order", this.detail)
    },
    handleFinish() {
      this.$emit("finish", this.detail)
    }
  }
}
</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;
}
.progress-steps {
  padding: 8px 0 4px;
}
.mb16 {
  margin-bottom: 16px;
}
.goods-target {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 4px;
}
.goods-name {
  font-weight: 500;
  color: #303133;
}
.sub-text {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}
.text-block {
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.pics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pic-item {
  flex-shrink: 0;
}
.pending-tip {
  color: #E6A23C;
}
.order-link {
  padding: 0;
}
.action-bar {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #EBEEF5;
}
</style>
