<template>
  <el-dialog ref="formDialogRef" :model-value="visible" title="关闭事件" width="750px" append-to-body @close="closeDialog">
    <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="伤亡情况">
            <el-row>
              <el-col :span="8">
                <el-form-item label="死亡" prop="deaths">
                  <el-input v-model="form.deaths">
                    <template #append>人</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="受伤" prop="injuries">
                  <el-input v-model="form.injuries">
                    <template #append>人</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="失联" prop="missing">
                  <el-input v-model="form.missing">
                    <template #append>人</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="总结报告" prop="fileNames">
            <FileUpload v-model="form.fileNames" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { closeEvent, getEventDetail } from '@/api/duty/eventing';

interface Form {
  eventId: string;
  deaths: string;
  injuries: string;
  missing: string;
  fileNames?: any;
}
interface Props {
  modelValue: boolean;
  eventId: string;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['update:modelValue']);
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      getEventDetail({ eventId: props.eventId }).then((res) => {
        form.value = res.data;
        debugger;
      });
    }
    visible.value = props.modelValue;
  }
);
const router = useRouter();
const visible = ref(false);
const form = ref<Form>({
  deaths: '',
  injuries: '',
  missing: '',
  fileNames: []
});
const rules = reactive({
  deaths: [{ required: true, message: '死亡人数不能为空', trigger: 'blur' }],
  injuries: [{ required: true, message: '受伤人数不能为空', trigger: 'blur' }],
  missing: [{ required: true, message: '失踪人数不能为空', trigger: 'blur' }]
});
const formRef = ref();
const buttonLoading = ref(false);

// 关闭事件
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      closeEvent({ eventId: props.eventId, ...form.value }).then(() => {
        proxy?.$modal.msgSuccess('关闭事件成功');
        router.go(-1);
      });
    };
  });
};

const closeDialog = () => {
  emits('update:modelValue', false);
};
</script>

<style lang="scss" scoped></style>
