<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-space>
            <el-button text @click="$router.back()">← 返回</el-button>
            <span>审核记录</span>
          </el-space>
          <el-button type="primary" size="small" @click="handleAdd">新增记录</el-button>
        </div>
      </template>
      <el-table v-loading="loading" :data="list" stripe>
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="approvalNumber" label="审核编号" min-width="160" />
        <el-table-column prop="approvalDate" label="审核日期" width="160" />
        <el-table-column prop="approvalContent" label="审核内容" min-width="240" />
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column label="操作" width="140" fixed="right">
          <template #default="s">
            <el-button type="primary" link icon="Edit" @click="handleEdit(s.row)">编辑</el-button>
            <el-button type="danger" link icon="Delete" @click="handleDelete(s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px" append-to-body>
      <el-form ref="recordFormRef" :model="recordForm" :rules="recordRules" label-width="100px">
        <el-form-item label="审核编号" prop="approvalNumber">
          <el-input v-model="recordForm.approvalNumber" placeholder="请输入审核编号" />
        </el-form-item>
        <el-form-item label="审核日期" prop="approvalDate">
          <el-date-picker v-model="recordForm.approvalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择审核日期" style="width:100%" />
        </el-form-item>
        <el-form-item label="审核内容" prop="approvalContent">
          <el-input v-model="recordForm.approvalContent" type="textarea" :rows="4" placeholder="请输入审核内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" :loading="submitLoading" @click="submitRecord">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="UnitRecord">
import { getRecordList, getRecord, saveRecord, delRecord } from '@/api/slgc/unit/index'
const { proxy } = getCurrentInstance()
const route = useRoute()
const loading = ref(true); const total = ref(0)
const list = ref([])
const queryParams = reactive({ pageNum: 1, pageSize: 10, unitId: route.query.id })

const dialogVisible = ref(false)
const dialogTitle = ref('')
const submitLoading = ref(false)
const recordFormRef = ref(null)
const recordForm = ref({ unitId: route.query.id, approvalNumber: '', approvalDate: '', approvalContent: '' })
const recordRules = {
  approvalNumber: [{ required: true, message: '请输入审核编号', trigger: 'blur' }],
  approvalDate: [{ required: true, message: '请选择审核日期', trigger: 'change' }],
  approvalContent: [{ required: true, message: '请输入审核内容', trigger: 'blur' }]
}

function getList() {
  loading.value = true
  getRecordList(queryParams).then(res => {
    list.value = res.rows; total.value = res.total; loading.value = false
  })
}

function handleAdd() {
  recordForm.value = { unitId: route.query.id, approvalNumber: '', approvalDate: '', approvalContent: '' }
  dialogTitle.value = '新增审核记录'
  dialogVisible.value = true
}

function handleEdit(row) {
  getRecord(row.id).then(res => {
    recordForm.value = { ...res.data, unitId: route.query.id }
    dialogTitle.value = '编辑审核记录'
    dialogVisible.value = true
  })
}

function handleDelete(row) {
  proxy.$modal.confirm('确认删除该审核记录？').then(() => {
    delRecord(row.id).then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
  })
}

function submitRecord() {
  recordFormRef.value.validate(valid => {
    if (!valid) return
    submitLoading.value = true
    saveRecord(recordForm.value).then(() => {
      proxy.$modal.msgSuccess('操作成功')
      dialogVisible.value = false
      getList()
    }).finally(() => { submitLoading.value = false })
  })
}

onMounted(() => { getList() })
</script>

<style scoped>
.card-header { font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
</style>
