<template>
  <div class="audit-list">
    <el-card>
      <el-tabs v-model="activeTab" @tab-click="loadData">
        <el-tab-pane label="待审核" name="pending"></el-tab-pane>
        <el-tab-pane label="审核通过" name="approved"></el-tab-pane>
        <el-tab-pane label="审核驳回" name="rejected"></el-tab-pane>
      </el-tabs>
      <div class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="80px" inline>
            <el-form-item label="权益名称:">
              <el-input v-model="searchForm.bizName" placeholder="关键字" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="权益编号:">
              <el-input v-model="searchForm.bizId" placeholder="请输入" style="width: 150px"></el-input>
            </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="tableData" stripe style="width: 100%">
        <el-table-column label="操作" min-width="140" fixed="left">
          <template #default="scope">
            <el-button
              v-if="activeTab === 'pending'"
              type="text"
              size="small"
              @click="goDetail(scope.row.id)"
            >审批</el-button>
            <el-button
              v-else
              type="text"
              size="small"
              @click="goDetail(scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="bizName" label="权益名称" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="bizId" label="权益编号" min-width="140"></el-table-column>
        <el-table-column label="审核类型" min-width="140">
          <template #default="scope">
            <el-tag :type="auditTypeTag(scope.row.auditType)" size="small">
              {{ auditTypeLabel(scope.row.auditType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bizModuleName" label="业务模块" min-width="140"></el-table-column>
        <el-table-column prop="submitterName" label="提交人" min-width="140"></el-table-column>
        <el-table-column prop="submitTime" label="提交时间" min-width="180"></el-table-column>
        <el-table-column prop="auditorName" label="审核人" min-width="140">
          <template #default="scope">
            <span>{{ scope.row.auditorName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" min-width="180">
          <template #default="scope">
            <span>{{ scope.row.auditTime || '-' }}</span>
          </template>
        </el-table-column>
      </el-table>

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

<script>
import request from '@/utils/request'

export default {
  name: 'AuditList',
  data() {
    return {
      activeTab: 'pending',
      searchForm: {
        bizName: '',
        bizId: ''
      },
      tableData: []
    }
  },
  created() {
    this.loadData()
  },
  activated() {
    this.loadData()
  },
  watch: {
    $route(to) {
      if (to.path === '/customization/hsbc/audit') {
        this.loadData()
      }
    }
  },
  methods: {
    loadData() {
      const params = new URLSearchParams()
      params.append('auditStatus', this.activeTab)
      if (this.searchForm.bizName) params.append('bizName', this.searchForm.bizName)
      if (this.searchForm.bizId) params.append('bizId', this.searchForm.bizId)
      request.get('/api/audit/list?' + params.toString()).then(res => {
        this.tableData = res.data || []
      }).catch(() => {})
    },
    handleReset() {
      this.searchForm = { bizName: '', bizId: '' }
      this.loadData()
    },
    auditTypeLabel(t) {
      return { new: '新增', offshelf: '下架' }[t] || t
    },
    auditTypeTag(t) {
      return { new: 'success', offshelf: 'danger' }[t] || ''
    },
    auditStatusLabel(s) {
      return { pending: '待审核', approved: '已通过', rejected: '已驳回' }[s] || s
    },
    auditStatusTag(s) {
      return { pending: 'warning', approved: 'success', rejected: 'danger' }[s] || ''
    },
    goDetail(id) {
      this.$router.push(`/customization/hsbc/audit/${id}`)
    }
  }
}
</script>

<style scoped>
.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;
}
.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
</style>
