<template>
  <div class="inspection-container">
    <h2>机房巡检管理</h2>
    
    <!-- 顶部操作区 -->
    <div class="top-operation">
      <el-button type="primary" @click="startInspection">开始巡检</el-button>
      <el-button type="success" @click="goToTaskManagement">巡检任务管理</el-button>
    </div>
    
    <!-- 中间巡检记录列表 -->
    <div class="inspection-records">
      <el-table :data="inspectionRecords" style="width: 100%">
        <el-table-column prop="taskName" label="任务名" width="180"></el-table-column>
        <el-table-column prop="taskDescription" label="任务说明" ></el-table-column>
        <el-table-column prop="inspectionResult" label="巡检结果" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.inspectionResult === '正常' ? 'success' : 'danger'">
              {{ scope.row.inspectionResult }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="resultDescription" label="结果说明" width="200"></el-table-column>
        <el-table-column prop="inspector" label="巡检人员" width="120"></el-table-column>
        <el-table-column prop="inspectionTime" label="巡检时间" width="180"></el-table-column>
        <el-table-column prop="workPhoto" label="工作照" width="120">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.workPhoto"
              fit="cover"
              style="width: 80px; height: 60px; cursor: pointer"
              @click="previewImage(scope.row.workPhoto)"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 图片预览对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      title="工作照预览"
      width="800px"
    >
      <img :src="dialogImageUrl" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script>
import { getTaskList } from '@/api/newApi/inspection'
export default {
  data() {
    return {
      inspectionRecords: [],
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  created() {
    this.getInspectionRecords()
  },
  methods: {
    // 获取任务列表
    getInspectionRecords() {
      getTaskList().then(res => {
        if (res.code === 200) {
          this.inspectionRecords = res.data
        }
      })
    },
    startInspection() {
      this.$router.push('/inspection/input')
    },
    goToTaskManagement() {
      this.$router.push('/inspection/task-management')
    },
    previewImage(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.inspection-container {
  padding: 20px;
}

.top-operation {
  margin-bottom: 20px;
}

.top-operation .el-button {
  margin-right: 10px;
}

.inspection-records {
  margin-top: 20px;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 20px;
}
</style>