<template>
  <el-drawer
    :title="'评价详情 · ' + (detail.memberNickName || '')"
    :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="评分">
          <el-rate v-model="scoreValue" disabled show-score text-color="#ff9900" score-template="{value} 分" />
        </el-descriptions-item>
        <el-descriptions-item label="评价时间">{{ parseTime(detail.createTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="评价内容" :span="2">
          <div class="review-content">{{ detail.content || '—' }}</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="detail.reviewPics && detail.reviewPics.length" label="晒图" :span="2">
          <div class="pics-row">
            <image-preview
              v-for="(pic, idx) in detail.reviewPics"
              :key="idx"
              :src="pic"
              :width="72"
              :height="72"
              class="pic-item"
            />
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">评价对象</h4>
      <p class="section-tip">一行一评：本条评价对应订单中的一个商品行，展示提交时商品快照（名称来自订单明细）。</p>
      <div class="goods-target mb16">
        <image-preview v-if="detail.goodsMainPic" :src="detail.goodsMainPic" :width="64" :height="64" />
        <div class="goods-text">
          <div class="goods-name">{{ detail.goodsName || '—' }}</div>
          <div class="sub-text">{{ detail.goodsSpec || '默认' }}</div>
        </div>
      </div>

      <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="头像">
          <image-preview v-if="detail.memberAvatar" :src="detail.memberAvatar" :width="40" :height="40" />
          <span v-else>—</span>
        </el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">关联订单</h4>
      <el-descriptions :column="1" 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>

      <h4 class="section-header">商家回复</h4>
      <el-descriptions :column="1" border size="small" class="mb16">
        <el-descriptions-item label="回复状态">
          <el-tag size="small" :type="replyStatusTag(detail.replyStatus)">{{ replyStatusLabel(detail.replyStatus) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="detail.replyContent" label="回复内容">
          <div class="review-content">{{ detail.replyContent }}</div>
        </el-descriptions-item>
        <el-descriptions-item v-if="detail.replyBy" label="回复人">{{ detail.replyBy }}</el-descriptions-item>
        <el-descriptions-item v-if="detail.replyTime" label="回复时间">{{ parseTime(detail.replyTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item v-if="!detail.replyContent" label="提示">
          <span class="pending-tip">待回复，买家评价已在 C 端展示</span>
        </el-descriptions-item>
      </el-descriptions>

      <div class="action-bar">
        <el-button type="primary" plain @click="handleReply" v-hasPermi="['agri:seller:review:reply']">
          {{ detail.replyContent ? '修改回复' : '回复评价' }}
        </el-button>
        <el-button type="danger" plain @click="handleDelete" v-hasPermi="['agri:seller:review:remove']">删除评价</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getSellerReview, delSellerReview } from "@/api/agri/seller/review"

export default {
  name: "SellerReviewDetail",
  props: {
    visible: { type: Boolean, default: false },
    reviewId: { type: [Number, String], default: null }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {}
    }
  },
  computed: {
    scoreValue: {
      get() {
        return this.detail.score != null ? Number(this.detail.score) : 0
      },
      set() {}
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.reviewId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    }
  },
  methods: {
    loadDetail() {
      this.loading = true
      getSellerReview(this.reviewId).then(response => {
        this.detail = response.data || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    replyStatusLabel(status) {
      const map = { UNREPLIED: "未回复", REPLIED: "已回复" }
      return map[status] || "—"
    },
    replyStatusTag(status) {
      const map = { UNREPLIED: "warning", REPLIED: "success" }
      return map[status] || "info"
    },
    handleReply() {
      this.$emit("reply", this.detail)
    },
    handleDelete() {
      this.$modal.confirm("删除后 C 端将不再展示该评价，且买家无法再次评价该商品行（一行一评），是否继续？").then(() => {
        return delSellerReview(this.reviewId)
      }).then(() => {
        this.$modal.msgSuccess("删除成功")
        this.localVisible = false
        this.$emit("success")
      }).catch(() => {})
    },
    handleViewOrder() {
      this.$emit("view-order", this.detail)
    }
  }
}
</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;
}
.section-tip {
  margin: 0 0 10px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}
.mb16 {
  margin-bottom: 16px;
}
.review-content {
  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;
}
.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;
}
.pending-tip {
  color: #E6A23C;
}
.order-link {
  padding: 0;
}
.action-bar {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #EBEEF5;
}
</style>
