<template>
  <el-dialog v-model="visible" :title="title" width="600px">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-form-item label="检查日期">
        <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%" />
      </el-form-item>
      <el-form-item label="宿舍房间">
        <el-cascader 
          v-model="form.room" 
          :options="roomOptions" 
          placeholder="选择楼栋/楼层/房间" 
          style="width: 100%" 
        />
      </el-form-item>
      <el-form-item label="检查类型">
        <el-radio-group v-model="form.type">
          <el-radio label="hygiene">卫生检查</el-radio>
          <el-radio label="safety">违章电器</el-radio>
          <el-radio label="discipline">晚归查寝</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="评分">
        <el-rate v-model="form.rate" :max="10" show-score text-color="#ff9900" />
      </el-form-item>

      <el-form-item label="存在问题">
        <el-checkbox-group v-model="form.issues">
          <el-checkbox label="地面脏乱" />
          <el-checkbox label="垃圾未倒" />
          <el-checkbox label="物品堆积" />
          <el-checkbox label="使用大功率" />
          <el-checkbox label="私拉乱接" />
          <el-checkbox label="人不在" />
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="现场照片">
         <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="3"
        >
          <vab-icon icon="add-line" />
        </el-upload>
      </el-form-item>

      <el-form-item label="备注说明">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const isEdit = ref(false)
const formRef = ref(null)

const form = reactive({
  id: '',
  date: new Date(),
  room: [],
  type: 'hygiene',
  rate: 8,
  issues: [],
  remark: ''
})

const roomOptions = [
  {
    value: '1',
    label: '北区1号楼',
    children: [
      {
        value: '1',
        label: '1层',
        children: [
          { value: '101', label: '101' },
          { value: '102', label: '102' },
        ]
      }
    ]
  }
]

const title = computed(() => isEdit.value ? '编辑检查记录' : '新增检查记录')

const open = (row) => {
  if (row) {
    isEdit.value = true
    Object.assign(form, { ...row, rate: row.score ? row.score / 10 : 8 })
  } else {
    isEdit.value = false
    Object.assign(form, { id: '', date: new Date(), room: [], type: 'hygiene', rate: 8, issues: [], remark: '' })
  }
  visible.value = true
}

const handleSubmit = () => {
  visible.value = false
  ElMessage.success('提交成功')
  emit('success')
}

defineExpose({
  open
})
</script>
