<template>
  <el-dialog
    v-model="dialogVisible"
    title="查看异常"
    width="500px"
    :close-on-click-modal="false"
    @close="onCancel"
  >
    <el-form label-width="80px">
      <el-form-item label="异常说明">
        <div >
          {{ abnormalData?.condition || '暂无异常说明' }}
        </div>
      </el-form-item>
      <el-form-item label="异常类型">
      <el-select v-model="abnormalData.damage_type" :disabled="true" placeholder="请选择异常类型">
        <el-option label="严重损坏" :value="0" />
        <el-option label="中度损坏" :value="1" />
        <el-option label="轻度损坏" :value="2" />
      </el-select>
    </el-form-item>

      <el-form-item label="照片" v-if="abnormalData?.photos?.length">
        <el-image
          v-for="(photo, index) in abnormalData.photos"
          :key="index"
          style="width: 100px; height: 100px; margin-right: 10px;"
          :src="photo"
          :preview-src-list="photoUrls"
          :initial-index="index"
          :preview-teleported="true"
          :z-index="3000"
          fit="cover"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';

interface Photo {
  filename: string;
  data: string;
}

interface AbnormalData {
  condition: string;
  photos: Photo[];
  damage_type: number;
}

const props = defineProps<{
  visible: boolean;
  abnormalData?: AbnormalData;
}>();

const emit = defineEmits(['update:visible']);

const dialogVisible = ref(props.visible);

// 监听 props.visible 的变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal;
});

// 监听 dialogVisible 的变化
watch(() => dialogVisible.value, (newVal) => {
  emit('update:visible', newVal);
});

// 统一处理 abnormalData，避免模板 undefined
const abnormalData = computed<AbnormalData>(() => {
  return props.abnormalData ?? { condition: '', photos: [], damage_type: 0 };
});

// 获取照片URL列表用于预览
const getPhotoUrls = () => {
  return abnormalData.value.photos.map(photo => photo);
};

const onCancel = () => {
  emit('update:visible', false);
};

// 预览用的图片 URL 列表
const photoUrls = computed(() => getPhotoUrls());

defineExpose({
  dialogVisible
});
</script>

<style scoped>
.el-image {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
</style> 