<template>
  <el-dialog title="添加材料出入库" v-model="visible" width="500px" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="出入库状态" prop="outPut">
        <el-select v-model="form.outPut" clearable placeholder="请选择出入库状态">
          <el-option v-for="item in out_put_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="材料数量" prop="number">
        <el-input-number v-model="form.number" placeholder="请输入预计使用数量" />
      </el-form-item>
      <el-form-item label="剩余库存数量" prop="residue">
        <el-input v-model="form.residue" placeholder="请输入剩余库存数量" />
      </el-form-item>
      <el-form-item label="出入库负责人" prop="operator">
        <el-input v-model="form.operator" placeholder="请输入出入库负责人" />
      </el-form-item>
      <el-form-item v-if="form.outPut === '1'" label="交接单位" prop="recipient">
        <el-input v-model="form.recipient" placeholder="请输入交接单位" />
      </el-form-item>
      <el-form-item v-if="form.outPut === '1'" label="领用人" prop="shipper">
        <el-input v-model="form.shipper" placeholder="请输入领用人" />
      </el-form-item>
      <el-form-item label="处理方式" prop="disposition">
        <el-input v-model="form.disposition" placeholder="请输入处理方式" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="操作时间" prop="outPutTime">
        <el-date-picker clearable v-model="form.outPutTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择操作时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="材料出入证明" prop="path">
        <file-upload v-model="form.path" :limit="1" :file-size="50" :file-type="['pdf']" />
      </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 { addMaterialsInventory } from '@/api/materials/materialsInventory';
import { MaterialsInventoryForm } from '@/api/materials/materialsInventory/types';

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

interface Props {
  materialsId?: string | number;
  projectId?: string | number;
}

const props = defineProps<Props>();

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

// 定义表单数据，注意结构与校验规则需要与接口对应
const form = reactive<MaterialsInventoryForm>({
  materialsId: props.materialsId,
  projectId: props.projectId,
  outPut: undefined,
  number: 1,
  outPutTime: '',
  residue: '',
  operator: '',
  path: '',
  disposition: '',
  recipient: '',
  shipper: '',
  remark: ''
});

// 定义校验规则
const rules = reactive({
  outPut: [{ required: true, message: '请选择出入库状态', trigger: 'blur' }],
  number: [{ required: true, message: '请输入材料数量', trigger: 'blur' }],
  residue: [{ required: true, message: '请输入剩余材料数量', trigger: 'blur' }],
  operator: [{ required: true, message: '请输入出入库负责人', trigger: 'blur' }],
  outPutTime: [{ required: true, message: '请选择操作时间', trigger: 'blur' }]
});

const formRef = ref();

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

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

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

defineExpose({
  openDialog
});
</script>
