<template>
  <div class="inspection-input-container">
    <h2>巡检录入</h2>
    
    <!-- 巡检任务信息 -->
    <div class="inspection-info">
      <div class="info-header">
        <h3>{{ taskName }}</h3>
      </div>
      <div class="info-details">
        <div class="info-item">
          <span class="label">巡检人：</span>
          <span>{{ inspector }}</span>
        </div>
        <div class="info-item">
          <span class="label">工号：</span>
          <span>{{ inspectorId }}</span>
        </div>
        <div class="info-item">
          <span class="label">开始时间：</span>
          <span>{{ inspectionStartTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前时间：</span>
          <span>{{ currentTime }}</span>
        </div>
      </div>
    </div>
    
    <!-- 指标分类及巡检点 -->
    <div class="indicator-categories">
      <div v-for="(category, categoryIndex) in categories" :key="categoryIndex" class="category-section">
        <h4>{{ category.name }}</h4>
        <div v-for="indicator in category.indicators" :key="indicator.name" class="indicator-item">
          <div class="indicator-name">{{ indicator.name }}</div>
          <div class="indicator-result">
            <el-radio-group v-model="indicator.result">
              <el-radio label="正常">正常</el-radio>
              <el-radio label="异常">异常</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 结果说明 -->
    <div class="result-description">
      <h4>结果说明</h4>
      <el-input
        v-model="resultDescription"
        type="textarea"
        placeholder="如有异常项，请填写详细说明"
        rows="4"
        :required="hasAbnormalResults"
      ></el-input>
      <div v-if="hasAbnormalResults && !resultDescription" class="error-tip">
        存在异常项，结果说明为必填项
      </div>
    </div>
    
    <!-- 上传工作照 -->
    <div class="work-photo-upload">
      <h4>上传工作照</h4>
      <div class="upload-section">
        <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :on-change="handlePhotoUpload"
          :show-file-list="false"
        >
          <el-image
            v-if="workPhoto"
            :src="workPhoto"
            fit="cover"
            style="width: 200px; height: 150px; cursor: pointer"
          ></el-image>
          <el-button v-else size="large" type="primary">点击上传工作照</el-button>
        </el-upload>
        
        <div class="photo-validation" v-if="workPhoto">
          <div class="validation-item" :class="{ 'valid': isPhotoTimeValid }">
            <i class="el-icon-check" v-if="isPhotoTimeValid"></i>
            <i class="el-icon-close" v-else></i>
            工作照拍摄时间符合要求
          </div>
          <div class="validation-item" :class="{ 'valid': isPhotoFeatureValid }">
            <i class="el-icon-check" v-if="isPhotoFeatureValid"></i>
            <i class="el-icon-close" v-else></i>
            工作照拍摄环境特征符合要求
          </div>
        </div>
      </div>
    </div>
    
    <!-- 提交按钮 -->
    <div class="submit-section">
      <el-button type="primary" size="large" @click="submitInspection" style="width: 200px;">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskName: '机房巡检A区',
      inspector: '小A',
      inspectorId: 'jc_xiaoA',
      inspectionStartTime: '2026年1月13日 星期二 16:30',
      currentTime: '',
      categories: [
        {
          name: '环境指标监控',
          indicators: [
            { name: '温度检查', result: '' },
            { name: '湿度检查', result: '' }
          ]
        },
        {
          name: '电力系统',
          indicators: [
            { name: '电压检查', result: '' },
            { name: '电流检查', result: '' }
          ]
        },
        {
          name: '洁净度',
          indicators: [
            { name: '机房清洁度', result: '' }
          ]
        }
      ],
      resultDescription: '',
      workPhoto: '',
      isPhotoTimeValid: false,
      isPhotoFeatureValid: false
    }
  },
  computed: {
    hasAbnormalResults() {
      return this.categories.some(category => 
        category.indicators.some(indicator => indicator.result === '异常')
      )
    }
  },
  mounted() {
    this.updateCurrentTime()
    setInterval(this.updateCurrentTime, 1000)
  },
  methods: {
    updateCurrentTime() {
      const now = new Date()
      const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }
      this.currentTime = now.toLocaleString('zh-CN', options)
    },
    handlePhotoUpload(file) {
      this.workPhoto = URL.createObjectURL(file.raw);
      
      //一定是对的模拟
      this.isPhotoTimeValid = true
      this.isPhotoFeatureValid = true
    },
    submitInspection() {
      // 验证所有巡检点都已填写结果
      console.log('Categories data:', this.categories)
      
      // 详细检查每个指标的结果
      let hasEmptyResult = false
      this.categories.forEach((category, categoryIndex) => {
        category.indicators.forEach((indicator, indicatorIndex) => {
          console.log(`Category ${categoryIndex}, Indicator ${indicatorIndex}:`, indicator.name, 'Result:', indicator.result)
          if (!indicator.result) {
            hasEmptyResult = true
            console.log( indicator.name)
          }
        })
      })
      
      console.log(hasEmptyResult)
      
      if (hasEmptyResult) {
        this.$message({ type: 'error', message: '请完成所有巡检点的结果填写' })
        return
      }
      
      // 验证异常结果必须填写说明
      if (this.hasAbnormalResults && !this.resultDescription) {
        this.$message({ type: 'error', message: '存在异常项，结果说明为必填项' })
        return
      }
      
      // 验证工作照上传
      if (!this.workPhoto) {
        this.$message({ type: 'error', message: '请上传工作照' })
        return
      }
      
      // 验证工作照时间和特征
      if (!this.isPhotoTimeValid) {
        this.$message({ type: 'error', message: '工作照拍摄时间不符合要求' })
        return
      }
      
      if (!this.isPhotoFeatureValid) {
        this.$message({ type: 'error', message: '工作照拍摄环境特征不符合要求' })
        return
      }
      
      // 模拟提交操作
      this.$confirm('确定要提交巡检结果吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        // 模拟生成巡检记录
        this.$message({ type: 'success', message: '巡检提交成功，系统已生成巡检记录' })
        
        // 跳转回巡检管理页面
        setTimeout(() => {
          this.$router.push('/inspection/task-management')
        }, 1500)
      }).catch(() => {
        this.$message({ type: 'info', message: '取消提交' })
      })
    }
  }
}
</script>

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

.inspection-info {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 30px;
}

.info-header {
  margin-bottom: 15px;
}

.info-header h3 {
  margin: 0;
  color: #303133;
}

.info-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  margin-right: 5px;
  color: #606266;
}

.indicator-categories {
  margin-bottom: 30px;
}

.category-section {
  margin-bottom: 30px;
}

.category-section h4 {
  margin-bottom: 15px;
  color: #303133;
}

.indicator-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #ffffff;
}

.indicator-name {
  width: 180px;
  font-weight: 500;
}

.indicator-result {
  flex: 1;
}

.inspection-result {
  display: flex;
  gap: 20px;
}

.result-description {
  margin-bottom: 30px;
}

.result-description h4 {
  margin-bottom: 10px;
  color: #303133;
}

.error-tip {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 5px;
}

.work-photo-upload {
  margin-bottom: 30px;
}

.work-photo-upload h4 {
  margin-bottom: 15px;
  color: #303133;
}

.upload-section {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.photo-validation {
  margin-top: 20px;
}

.validation-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #f56c6c;
}

.validation-item.valid {
  color: #67c23a;
}

.validation-item i {
  margin-right: 8px;
  font-size: 16px;
}

.submit-section {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>