<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="supervisionList" border>
      <el-table-column label="序号" type="index" width="55" align="center"/>
      <el-table-column label="GUID" prop="crCode" width="100" :show-overflow-tooltip="true"/>
      <el-table-column label="状态" prop="crState" width="100">
        <template #default="scope">
          {{ crStateFilter(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="审核信息" prop="crContent" :show-overflow-tooltip="true" min-width="180"/>
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleDetail(scope.row)">详情</el-button>
          <el-button link type="primary" icon="Check" @click="handleAudit(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
                @pagination="getList"/>

    <!-- 详情对话框 -->
    <el-dialog title="督导详情" v-model="detailVisible" width="800px" append-to-body>
      <el-tabs>
        <el-tab-pane label="附件">
          <el-table :data="attachments" border size="small">
            <el-table-column label="GUID" prop="guid" :show-overflow-tooltip="true"/>
            <el-table-column label="文件名" prop="fileName" :show-overflow-tooltip="true"/>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="分工">
          <el-table :data="divisions" border size="small">
            <el-table-column label="GUID" prop="guid" :show-overflow-tooltip="true"/>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="结果">
          <el-table :data="results" border size="small">
            <el-table-column label="GUID" prop="guid" :show-overflow-tooltip="true"/>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="审核督导" v-model="auditVisible" width="500px" append-to-body>
      <el-form :model="auditForm" label-width="80px">
        <el-form-item label="审核结果">
          <el-select v-model="auditForm.audit" style="width:100%">
            <el-option label="通过" value="1"/>
            <el-option label="不通过" value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input v-model="auditForm.auditInfo" type="textarea" :rows="3"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="auditVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {auditSupervision, getSupervisionDetail, listSupervision} from '@/api/hzz/supervision'
import {ElMessage} from 'element-plus'

const loading = ref(false)
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const supervisionList = ref([])

const detailVisible = ref(false)
const attachments = ref([])
const divisions = ref([])
const results = ref([])

const auditVisible = ref(false)
const auditForm = reactive({guid: '', audit: '1', auditInfo: ''})

const getList = async () => {
  loading.value = true
  try {
    const res = await listSupervision({pageNum: pageNum.value, pageSize: pageSize.value})
    supervisionList.value = res.rows || []
    total.value = res.total || 0
  } finally {
    loading.value = false
  }
}

const handleDetail = async (row) => {
  const res = await getSupervisionDetail(row.GUID)
  attachments.value = res.data?.attachments || []
  divisions.value = res.data?.divisions || []
  results.value = res.data?.results || []
  detailVisible.value = true
}

const handleAudit = (row) => {
  auditForm.guid = row.GUID
  auditForm.audit = '1'
  auditForm.auditInfo = ''
  auditVisible.value = true
}

const crStateFilter = (row) => {
  switch (row.crState) {
    case '5':
      return '进行中'
    case '6':
      return '未提交'
    case '7':
      return '未审批'
    case '8':
      return '已退回'
    case '9':
      return '已通过'
  }
}

const submitAudit = async () => {
  await auditSupervision(auditForm.guid, auditForm.audit, auditForm.auditInfo)
  ElMessage.success('审核完成')
  auditVisible.value = false
  getList()
}

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