<template>
  <el-dialog
    v-model="dialogVisible"
    title="异常操作"
    width="500px"
    :close-on-click-modal="false"
    @close="onCancel"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="异常说明">
        <el-input
          v-model="form.condition"
          type="textarea"
          :rows="3"
          placeholder="请输入异常说明"
        />
      </el-form-item>
      
      <el-form-item label="异常类型">
      <el-select v-model="form.damage_type" 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="照片">
        <el-upload
          class="upload-demo"
          list-type="picture-card"
          :action="action"
          :headers="{ Authorization: 'JWT ' + Session.get('token') }"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
           :file-list="fileList"
          multiple
          :on-remove="handleRemove"
        >
        <el-icon><Plus /></el-icon>
        </el-upload>
       <!--  <el-upload
          class="upload-demo"
          :action="action"
          :headers="{ Authorization: 'JWT ' + Session.get('token') }"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          :file-list="fileList"
          list-type="picture"
          multiple
          :on-remove="handleRemove"
        >
          <el-button type="primary">选择图片</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传jpg/png文件，且不超过5MB
            </div>
          </template>
        </el-upload> -->
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';
import { Session } from '/@/utils/storage';

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

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

const dialogVisible = ref(props.visible);
const action = ref(`${import.meta.env.VITE_API_URL}/api/system/upload/`);

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

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

const fileList = ref<any[]>([]);

const form = ref({
  damage_type:0,
  condition: '',
  photos: [] as Array<{
    filename: string;
    data: string;
  }>
});

const beforeUpload = (file: File) => {
  const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJPGOrPNG) {
    ElMessage.error('只能上传JPG/PNG格式的图片！');
    return false;
  }
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB！');
    return false;
  }
  return true;
};

const handleUploadSuccess = (response: any, file: any) => {
  if (response.code === 2000) {
    form.value.photos.push(response.data.url);
    ElMessage.success('上传成功');
  } else {
    ElMessage.error(response.msg || '上传失败');
  }
};

const handleUploadError = (error: any) => {
  ElMessage.error('上传失败：' + (error.message || '未知错误'));
};

const handleRemove = (file: any) => {
  const index = form.value.photos.findIndex(photo => photo.filename === file.name);
  if (index !== -1) {
    form.value.photos.splice(index, 1);
  }
};

const onCancel = () => {
  form.value = {
    damage_type:0,
    condition: '',
    photos: []
  };
  fileList.value = [];
  emit('update:visible', false);
};

const onConfirm = () => {
  emit('confirm', form.value);
  onCancel();
};

defineExpose({
  dialogVisible
});
</script>

<style scoped>
.upload-demo {
  text-align: left;
}
</style> 