<template>
  <el-dialog title="添加机械出入场详情" v-model="visible" width="500px" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="出入场" prop="outPut">
        <el-select v-model="form.type" clearable placeholder="请选择出入场">
          <el-option v-for="item in machinery_entry_exit_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="检验证编号" prop="checkoutNumber">
        <el-input v-model="form.checkoutNumber" placeholder="请输入检验证编号" />
      </el-form-item>
      <el-form-item label="检验单位" prop="checkoutUnit">
        <el-input v-model="form.checkoutUnit" placeholder="请输入检验单位" />
      </el-form-item>
      <el-form-item label="检定日期/有效期" prop="checkoutDate">
        <el-date-picker clearable v-model="form.checkoutDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择检定日期/有效期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="施工类型状态" prop="outPut">
        <el-select v-model="form.status" clearable placeholder="请选择施工类型状态">
          <el-option v-for="item in sys_normal_disable" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="入场时间" prop="checkoutDate">
        <el-date-picker clearable v-model="form.entryTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择入场时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="图片" prop="picture">
        <image-upload v-model="form.picture" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { defineExpose, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { MachineryDetailForm } from '@/api/machinery/machineryDetail/types';
import { addMachineryDetail } from '@/api/machinery/machineryDetail';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { machinery_entry_exit_type, sys_normal_disable } = toRefs<any>(proxy?.useDict('machinery_entry_exit_type', 'sys_normal_disable'));

interface Props {
  machineryId: string | number;
}

const props = defineProps<Props>();

const visible = ref<boolean>(false);
const loading = ref<boolean>(false);

// 定义表单数据，注意结构与校验规则需要与接口对应
const form = reactive<MachineryDetailForm>({
  machineryId: props.machineryId,
  checkoutNumber: '',
  checkoutUnit: '',
  checkoutDate: '',
  status: undefined,
  type: undefined,
  entryTime: '',
  remark: '',
  picture: ''
});

// 定义校验规则
const rules = reactive({
  checkoutNumber: [{ required: true, message: '请输入检验证编号', trigger: 'blur' }],
  checkoutUnit: [{ required: true, message: '请输入检验单位', trigger: 'blur' }],
  checkoutDate: [{ required: true, message: '请选择检定日期', trigger: 'blur' }],
  entryTime: [{ required: true, message: '请选择进场时间', trigger: 'blur' }]
});

const formRef = ref();
const imageValue = ref([]);

const submitForm = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (!valid) return;
    loading.value = true;
    try {
      // 调用接口提交数据
      await addMachineryDetail({ ...form, machineryId: props.machineryId }).finally(() => (loading.value = false));
      ElMessage.success('提交成功');
      closeDialog();
    } catch (error) {
      ElMessage.error('提交失败');
    }
  });
};

const closeDialog = () => {
  visible.value = false;
  // 重置表单数据
  formRef.value.resetFields();
};

// 供外部调用的打开方法
const openDialog = () => {
  visible.value = true;
};

defineExpose({
  openDialog
});
</script>
