<template>
  <div class="coupon-audit-list">
    <el-card>
      <el-tabs v-model="activeTab" @tab-change="loadData">
        <el-tab-pane label="待审核" name="pending"></el-tab-pane>
        <el-tab-pane label="已审核" name="reviewed"></el-tab-pane>
      </el-tabs>
      <div class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="120px" inline>
            <el-form-item label="权益编号:">
              <el-input v-model="searchForm.productId" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <div class="button-group" style="margin-left: 20px;">
              <el-button type="primary" @click="loadData">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>

      <el-table :data="pagedTableData" stripe style="width: 100%">
        <el-table-column label="操作" min-width="100" fixed="left">
          <template #default="scope">
            <el-button
              v-if="activeTab === 'pending'"
              type="text"
              size="small"
              @click="openAudit(scope.row)"
            >审批</el-button>
            <el-button
              v-else
              type="text"
              size="small"
              @click="openAudit(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="权益商品名称" min-width="160" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.productName || '未关联' }}</template>
        </el-table-column>
        <el-table-column label="权益编号" width="140" align="center">
          <template #default="scope">{{ scope.row.productId || '-' }}</template>
        </el-table-column>
        <el-table-column label="类型" width="150" align="center">
          <template #default="scope">
            <el-tag :type="typeTag(scope.row.type)" size="small">{{ typeLabel(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="importCount" label="数量" width="120" align="center" />
        <el-table-column prop="creator" label="创建人" width="120" align="center" />
        <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
        <el-table-column prop="auditorName" label="审核人" width="120" align="center">
          <template #default="scope">
            <span>{{ scope.row.auditorName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" width="180" align="center">
          <template #default="scope">
            <span>{{ scope.row.auditTime || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="120" align="center">
          <template #default="scope">
            <el-tag :type="auditStatusTag(scope.row.auditStatus)" size="small">{{ auditStatusLabel(scope.row.auditStatus) }}</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-section">
        <span>Total {{ tableData.length }}</span>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="prev, pager, next, sizes, jumper"
          :page-sizes="[10, 20, 50]"
          :total="tableData.length"
        />
      </div>
    </el-card>

    <el-dialog
      :title="currentRow && currentRow.auditStatus === 'pending' ? '券码审批' : '审核详情'"
      v-model="auditDialogVisible"
      width="560px"
      @closed="resetAuditDialog"
    >
      <el-form v-if="currentRow" label-width="150px" label-position="left" class="audit-detail-form">
        <el-form-item label="权益商品名称">{{ currentRow.productName || '未关联' }}</el-form-item>
        <el-form-item label="权益编号">{{ currentRow.productId || '-' }}</el-form-item>
        <el-alert
          v-if="!currentRow.productId"
          type="info"
          :closable="false"
          style="margin: 0 0 12px;"
          title="该批次未关联权益商品，审核通过后暂不导入，将在关联的权益商品首次上架通过后再导入。"
        />
        <el-form-item label="类型">
          <el-tag :type="typeTag(currentRow.type)" size="small">{{ typeLabel(currentRow.type) }}</el-tag>
        </el-form-item>
        <el-form-item label="数量">{{ currentRow.importCount }}</el-form-item>
        <el-form-item label="使用有效期开始时间">{{ currentRow.effectiveTime || '-' }}</el-form-item>
        <el-form-item label="使用有效期结束时间">{{ currentRow.expireTime || '-' }}</el-form-item>
        <el-form-item label="创建人">{{ currentRow.creator }}</el-form-item>
        <el-form-item label="创建时间">{{ currentRow.createTime }}</el-form-item>
        <template v-if="currentRow.auditStatus !== 'pending'">
          <el-form-item label="审核人">{{ currentRow.auditorName || '-' }}</el-form-item>
          <el-form-item label="审核时间">{{ currentRow.auditTime || '-' }}</el-form-item>
          <el-form-item label="审核结果">
            <el-tag :type="currentRow.auditStatus === 'approved' ? 'success' : 'danger'" size="small">
              {{ currentRow.auditStatus === 'approved' ? '审核通过' : '审核驳回' }}
            </el-tag>
          </el-form-item>
        </template>
      </el-form>

      <template #footer>
        <span v-if="currentRow && currentRow.auditStatus === 'pending'">
          <el-button type="danger" @click="confirmAudit('reject')">驳回</el-button>
          <el-button type="primary" @click="confirmAudit('approve')">通过</el-button>
        </span>
        <span v-else>
          <el-button @click="auditDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

export default {
  name: 'CouponAuditList',
  data() {
    return {
      activeTab: 'pending',
      searchForm: { productId: '' },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      auditDialogVisible: false,
      currentRow: null
    }
  },
  created() {
    this.loadData()
  },
  activated() {
    this.loadData()
  },
  computed: {
    pagedTableData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.tableData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    loadData() {
      const params = new URLSearchParams()
      params.append('auditStatus', this.activeTab)
      if (this.searchForm.productId) params.append('productId', this.searchForm.productId)
      request.get('/api/coupon-audit/list?' + params.toString()).then(res => {
        this.tableData = res.data || []
        this.currentPage = 1
      }).catch(() => {})
    },
    handleReset() {
      this.searchForm = { productId: '' }
      this.loadData()
    },
    typeLabel(t) {
      return {
        import: '导入',
        recycle_unissued: '未发放券码回收',
        recycle_expired: '已过期券码回收',
        recycle_wrong: '导错码券码回收'
      }[t] || t
    },
    typeTag(t) {
      return {
        import: 'success',
        recycle_unissued: 'warning',
        recycle_expired: 'info',
        recycle_wrong: 'danger'
      }[t] || ''
    },
    auditStatusLabel(s) {
      return {
        pending: '待审核',
        approved: '审核通过',
        rejected: '审核驳回'
      }[s] || s
    },
    auditStatusTag(s) {
      return {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
      }[s] || ''
    },
    openAudit(row) {
      this.currentRow = row
      this.auditDialogVisible = true
    },
    resetAuditDialog() {
      this.currentRow = null
    },
    confirmAudit(action) {
      request.post(`/api/coupon-audit/${action}`, {
        id: this.currentRow.id
      }).then(() => {
        ElMessage.success(action === 'approve' ? '审核通过' : '已驳回')
        this.auditDialogVisible = false
        this.loadData()
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.coupon-audit-list { padding: 0; }
.search-section { display: flex; flex-direction: column; }
.search-row { margin-bottom: 0; }
.search-row .el-form { display: flex; flex-wrap: wrap; gap: 0; }
.search-row .el-form-item { margin-right: 0; margin-bottom: 8px; }
.button-group { display: flex; gap: 5px; }
.audit-detail-form .el-form-item { margin-bottom: 8px; }
.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
</style>
