<template>
  <el-drawer
    :title="'商品详情 · ' + (detail.goodsName || detail.goodsSn || '')"
    :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.goodsSn || '—' }}</el-descriptions-item>
        <el-descriptions-item label="商品状态">
          <el-tag size="small" :type="goodsStatusTag(detail.goodsStatus)">{{ goodsStatusLabel(detail.goodsStatus) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商品名称" :span="2">{{ detail.goodsName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="售价">{{ detail.salePrice != null ? detail.salePrice : '—' }}</el-descriptions-item>
        <el-descriptions-item label="库存">{{ detail.stock != null ? detail.stock : '—' }}</el-descriptions-item>
        <el-descriptions-item label="销量">{{ detail.salesCount != null ? detail.salesCount : '—' }}</el-descriptions-item>
        <el-descriptions-item label="主图">
          <image-preview v-if="detail.mainPic" :src="detail.mainPic" :width="80" :height="80" />
          <span v-else>—</span>
        </el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">归属信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="店铺名称">{{ detail.shopName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="商户名称">{{ detail.merchantName || '—' }}</el-descriptions-item>
        <el-descriptions-item label="商品分类" :span="2">{{ detail.categoryPath || '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">审核信息</h4>
      <el-descriptions :column="2" border size="small" class="mb16">
        <el-descriptions-item label="提交时间">{{ parseTime(detail.submitTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item label="审核时间">{{ parseTime(detail.auditTime) || '—' }}</el-descriptions-item>
        <el-descriptions-item v-if="detail.goodsStatus === '3'" label="驳回原因" :span="2">
          <span class="reject-reason">{{ detail.rejectReason || '—' }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="detail.goodsStatus === '4'" label="下架时间">{{ parseTime(detail.offShelfTime) || '—' }}</el-descriptions-item>
      </el-descriptions>

      <h4 class="section-header">商品服务快照</h4>
      <el-table v-if="detail.serviceSnapshots && detail.serviceSnapshots.length" border size="small" :data="detail.serviceSnapshots" class="mb16">
        <el-table-column label="服务名称" prop="serviceName" />
        <el-table-column label="简介" prop="serviceIntro" :show-overflow-tooltip="true" />
        <el-table-column label="图标" width="80">
          <template slot-scope="scope">
            <image-preview :src="scope.row.serviceIcon" :width="40" :height="40" />
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="empty-tip mb16">暂无勾选服务项</div>

      <h4 v-if="detail.detailContent" class="section-header">商品详情</h4>
      <div v-if="detail.detailContent" class="detail-content mb16" v-html="detail.detailContent"></div>

      <!-- 操作区 -->
      <div v-if="showActions" class="action-bar">
        <template v-if="detail.goodsStatus === '1'">
          <el-button type="success" @click="handleAuditPass" v-hasPermi="['agri:goods:audit']">审核通过</el-button>
          <el-button type="danger" plain @click="rejectOpen = true" v-hasPermi="['agri:goods:audit']">审核驳回</el-button>
        </template>
        <el-button v-if="detail.goodsStatus === '2'" type="warning" plain @click="handleOffShelf" v-hasPermi="['agri:goods:offshelf']">下架</el-button>
      </div>
    </div>

    <!-- 驳回弹窗 -->
    <el-dialog title="审核驳回" :visible.sync="rejectOpen" width="480px" append-to-body>
      <el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" label-width="90px">
        <el-form-item label="驳回原因" prop="rejectReason">
          <el-input v-model="rejectForm.rejectReason" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请填写驳回原因，商家可见" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitReject">确 定</el-button>
        <el-button @click="rejectOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-drawer>
</template>

<script>
import { getGoods, auditGoods, offShelfGoods } from "@/api/agri/goods"

export default {
  name: "GoodsDetail",
  props: {
    visible: { type: Boolean, default: false },
    goodsId: { type: [Number, String], default: null },
    showActions: { type: Boolean, default: true }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      detail: {},
      rejectOpen: false,
      rejectForm: { rejectReason: "" },
      rejectRules: {
        rejectReason: [{ required: true, message: "请填写驳回原因", trigger: "blur" }]
      }
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.goodsId) {
        this.loadDetail()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    }
  },
  methods: {
    /** 加载商品详情 */
    loadDetail() {
      this.loading = true
      getGoods(this.goodsId).then(response => {
        this.detail = response.data || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    goodsStatusLabel(status) {
      const map = { "0": "未上架", "1": "待审核", "2": "出售中", "3": "审核失败", "4": "已下架" }
      return map[status] || "—"
    },
    goodsStatusTag(status) {
      const map = { "1": "warning", "2": "success", "3": "danger", "4": "info" }
      return map[status] || "info"
    },
    /** 审核通过 */
    handleAuditPass() {
      this.$modal.confirm("确认审核通过该商品？").then(() => {
        return auditGoods({ goodsIds: [this.goodsId], pass: true })
      }).then(() => {
        this.$modal.msgSuccess("审核通过")
        this.localVisible = false
        this.$emit("success")
      }).catch(() => {})
    },
    /** 提交驳回 */
    submitReject() {
      this.$refs["rejectForm"].validate(valid => {
        if (!valid) {
          return
        }
        auditGoods({
          goodsIds: [this.goodsId],
          pass: false,
          rejectReason: this.rejectForm.rejectReason
        }).then(() => {
          this.$modal.msgSuccess("已驳回")
          this.rejectOpen = false
          this.localVisible = false
          this.$emit("success")
        })
      })
    },
    /** 下架 */
    handleOffShelf() {
      this.$modal.confirm("确认下架该商品？").then(() => {
        return offShelfGoods({ goodsIds: [this.goodsId] })
      }).then(() => {
        this.$modal.msgSuccess("下架成功")
        this.localVisible = false
        this.$emit("success")
      }).catch(() => {})
    }
  }
}
</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;
}
.reject-reason {
  color: #F56C6C;
}
.empty-tip {
  color: #909399;
  font-size: 13px;
}
.detail-content {
  padding: 12px;
  background: #fafafa;
  border-radius: 4px;
  line-height: 1.6;
}
.action-bar {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #EBEEF5;
}
</style>
