<template>
    <div>
        <el-dialog width="1000px" height="500px" :model-value="props.modelValue" :title="props.title"
            :before-close="clostadd">
            <el-form :model="xfqcFrom" ref="formone" label-position="right" :rules="rules" label-width="130px"
                :disabled="!props.savebtn" :inline="true" style="display: block;">
                <el-form-item label="消防器材名称:" prop="equipmentname">
                    <el-input v-model="xfqcFrom.equipmentname" style="width: 300px" />
                </el-form-item>
                <el-form-item label="型号规则参数:">
                    <el-input v-model="xfqcFrom.modelparameter" style="width: 300px" />
                </el-form-item>
                <el-form-item label="采购时间:">
                    <el-date-picker v-model="xfqcFrom.purchasingtime" style="width: 300px" type="date"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择采购时间" />
                </el-form-item>
                <el-form-item label="生产厂家:">
                    <el-input v-model="xfqcFrom.manufacturer" style="width: 300px" />
                </el-form-item>
                <el-form-item label="器材数量:" prop="equipmentcount">
                    <el-input v-model="xfqcFrom.equipmentcount" type="number" style="width: 300px" />
                </el-form-item>
                <el-form-item label="器材单位:">
                    <el-select v-model="xfqcFrom.equipmentunit" clearable placeholder="请选择器材单位" style="width: 300px">
                        <el-option v-for="item in D_BZ_WPDW" :key="item" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="更换日期:">
                    <el-date-picker v-model="xfqcFrom.replacedate" style="width: 300px" type="date" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择更换日期" />
                </el-form-item>
                <el-form-item label="内部编号:">
                    <el-input v-model="xfqcFrom.internalnumber" style="width: 300px" />
                </el-form-item>
                <el-form-item label="所在位置:">
                    <el-input v-model="xfqcFrom.location" style="width: 762px" />
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input v-model="xfqcFrom.bz" :rows="3" type="textarea" style="width: 762px" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="saveData(formone)" v-if="props.savebtn">
                        <el-icon>
                            <DocumentChecked />
                        </el-icon>
                        <span>保存</span> </el-button>
                    <el-button @click="clostadd">
                        <el-icon>
                            <DocumentDelete />
                        </el-icon>
                        <span>关闭</span>
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from "vue";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
import * as rule from "@/utils/rules.js";
const { D_BZ_WPDW } = proxy.$dict("D_BZ_WPDW");
const rules = {
    equipmentname: [{ required: true, message: "请输入消防器材名称", trigger: "blur" }],
    ...rule.intRule({ validator: true, require: true }, "equipmentcount"),
};
const dialogFormVisible = ref(false);
const formone = ref(null);
const xfqcFrom = ref({});
const emits = defineEmits(["update:modelValue", "saveSuccess"]);
// 接收子组件传来的
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true
    },
    title: String,
    savebtn: {
        type: Boolean,
        required: true
    },

    formData: {
        type: Object,
        default: {}
    }
});
watch(
    () => props.modelValue,
    () => {
        xfqcFrom.value = props.formData || {}
    }
);

//关闭弹窗
function clostadd() {
    if (props.savebtn) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                formone.value.clearValidate();
                formone.value.resetFields()
                emits("update:modelValue", false);
            })
            .catch(() => {
                // catch error
            })
    } else {
        formone.value.clearValidate();
        formone.value.resetFields()
        emits("update:modelValue", false);
    }

}
// 保存数据
const saveData = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            let type = 'show'
            if (props.title == '消防器材新增') {
                type = 'add'
            } else if (props.title == '消防器材修改') {
                type = 'edit'
            }
            emits("saveSuccess", xfqcFrom.value, type);
            dialogFormVisible.value = false;
        } else {
            ElMessage.warning('请输入必填项！！！')
        }
    });
};

</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    --el-dialog-margin-top: 10vh !important;
}
</style>
