<template>
  <div class="inspection-manage-container">
    <vab-card>
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-form :inline="true" :model="queryForm" @submit.prevent>
            <el-form-item label="宿舍楼栋">
              <el-select v-model="queryForm.building" placeholder="选择楼栋" clearable style="width: 140px">
                <el-option label="北区1号楼" value="1" />
                <el-option label="北区2号楼" value="2" />
                <el-option label="南区A栋" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="检查类型">
              <el-select v-model="queryForm.type" placeholder="全部" clearable style="width: 120px">
                <el-option label="卫生检查" value="hygiene" />
                <el-option label="违章电器" value="safety" />
                <el-option label="晚归查寝" value="discipline" />
              </el-select>
            </el-form-item>
            <el-form-item label="检查日期">
              <el-date-picker v-model="queryForm.date" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-button type="primary" size="small" @click="handleAdd"> <vab-icon icon="add-line" /> 新增检查</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe style="height: calc(100vh - 400px);">
        <el-table-column prop="date" label="检查日期" width="120" sortable />
        <el-table-column prop="room" label="宿舍号" width="120" />
        <el-table-column prop="type" label="检查类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="评分" width="100" sortable>
          <template #default="{ row }">
            <span :class="getScoreClass(row.score)">{{ row.score }}分</span>
          </template>
        </el-table-column>
        <el-table-column prop="issues" label="存在问题" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="row.issues && row.issues.length">
              <el-tag v-for="issue in row.issues" :key="issue" size="small" type="danger" class="mr-5">{{ issue }}</el-tag>
            </span>
            <span v-else class="text-success">无异常</span>
          </template>
        </el-table-column>
        <el-table-column prop="inspector" label="检查人" width="120" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" text size="small" @click="handleEdit(row)"> <vab-icon icon="edit-line" /> 编辑</el-button>
            <el-button type="danger" text size="small" @click="handleDelete(row)"> <vab-icon icon="delete-line" /> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <vab-pagination
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </vab-card>

    <inspection-edit-dialog ref="inspectionEditDialogRef" @success="handleQuery" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import InspectionEditDialog from './components/InspectionEditDialog.vue'

defineOptions({
  name: 'InspectionManage',
})

const queryForm = reactive({
  building: '',
  type: '',
  date: '',
  pageNo: 1,
  pageSize: 10,
})

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const inspectionEditDialogRef = ref()

const getTypeLabel = (type) => {
  const map = { hygiene: '卫生检查', safety: '违章电器', discipline: '晚归查寝' }
  return map[type]
}
const getTypeTag = (type) => {
  const map = { hygiene: 'success', safety: 'danger', discipline: 'warning' }
  return map[type]
}
const getScoreClass = (score) => {
  if (score >= 90) return 'text-success font-bold'
  if (score < 60) return 'text-danger font-bold'
  return 'text-warning'
}

const generateMockData = () => {
  return [
    {
      id: 1,
      date: '2026-01-23',
      room: '北区1-302',
      type: 'hygiene',
      score: 95,
      issues: [],
      inspector: '王阿姨'
    },
    {
      id: 2,
      date: '2026-01-23',
      room: '北区1-305',
      type: 'hygiene',
      score: 55,
      issues: ['地面脏乱', '垃圾未倒'],
      inspector: '王阿姨'
    },
    {
      id: 3,
      date: '2026-01-22',
      room: '南区A-501',
      type: 'safety',
      score: 100,
      issues: [],
      inspector: '李安保'
    },
    {
      id: 4,
      date: '2026-01-22',
      room: '南区A-502',
      type: 'safety',
      score: 0,
      issues: ['使用大功率'],
      inspector: '李安保'
    }
  ]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  inspectionEditDialogRef.value.open()
}

const handleEdit = (row) => {
  inspectionEditDialogRef.value.open(row)
}

const handleDelete = (row) => {
  ElMessage.success('删除成功')
  handleQuery()
}

const handleCurrentChange = (val) => {
  queryForm.pageNo = val
  handleQuery()
}
const handleSizeChange = (val) => {
  queryForm.pageSize = val
  handleQuery()
}

handleQuery()
</script>

<style lang="scss" scoped>
.inspection-manage-container {
  .mr-5 { margin-right: 5px; }
  .text-success { color: var(--el-color-success); }
  .text-danger { color: var(--el-color-danger); }
  .text-warning { color: var(--el-color-warning); }
  .font-bold { font-weight: bold; }
}
</style>