<template>
    <div class="bigBox">
        <MOSTY.FromPage :title="props.formData.title" @closeDialog="black">
            <template #content>
                <MOSTY.Assort :title="'基础信息'" />
                <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="fromObj" :inline="true"
                    :rules="rules" :disabled="!props.formData.saveBtnShow">
                    <!-- 只隐藏,保存的时候还是需要 -->
                    <el-form-item v-show="false" label="所属场所:" prop="sitename" v-if='fromObj.sitename'>
                        <el-input v-model="fromObj.sitename" style="width: 337px" disabled />
                    </el-form-item>
                    <el-form-item v-show="false" :label="fromObj.publicarea == '1' ? '所属场区:' : '所属建筑物:'"
                        prop="buildingname" v-if='fromObj.buildingname'>
                        <el-input v-model="fromObj.buildingname" style="width: 337px" disabled />
                    </el-form-item>
                    <el-form-item v-show="false" label="所属楼层:" prop="floorname" v-if='fromObj.floorname'>
                        <el-input v-model.number="fromObj.floorname" style="width: 337px" disabled />
                    </el-form-item>
                    <el-form-item v-show="false" :label="fromObj.publicarea == '1' ? '场区部位:' : '所属部位:'" prop="partname"
                        v-if='fromObj.partname'>
                        <el-input v-model="fromObj.partname" disabled style="width: 337px" />
                    </el-form-item>
                    <el-form-item v-if="props.obj.name" label="所属设备:" prop="name">
                        <el-input v-model="props.obj.name" disabled style="width: 337px" />
                    </el-form-item>
                    <el-form-item label="责任部门:" prop="responsibilitydeptname" v-if='fromObj.responsibilitydeptname'>
                        <el-input v-model="fromObj.responsibilitydeptname" disabled style="width: 337px" />
                    </el-form-item>
                    <el-form-item label="岗位负责人:" prop="responsibilitypersonname" v-if='fromObj.responsibilitypersonname'
                        style='width:954px;'>
                        <el-input v-model="fromObj.responsibilitypersonname" type="textarea" :rows="4" disabled
                            style="width: 100%" />
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="灭火器类型:" prop="sblx">
                        <MOSTY.DictTree v-model="fromObj.sblx" :zdlist="sbsslist" :placeholder='"请选择灭火器类型"'
                            :disabled='fromObj.disabled' :type='"array"' style="width: 337px;"
                            @nameChange='sblxChange' />
                    </el-form-item>
                    <el-form-item label="灭火器状态:" prop="state" v-if="props.formData.id">
                        <div style="width: 337px;">
                            <MOSTY.DictRidioAndSelect :dictData="D_BZ_SYZT" v-model="fromObj.state"
                                selectType="radio" />
                        </div>
                    </el-form-item>
                    <el-form-item label="灭火器名称:" prop="name"
                        :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
                        <el-input v-model="fromObj.name" placeholder="请输入灭火器名称" clearable
                            style="width: 337px"></el-input>
                    </el-form-item>
                    <el-form-item label="型号:" prop="type">
                        <el-input v-model="fromObj.type" style="width: 337px" />
                    </el-form-item>
                    <el-form-item label="规格:" prop="specification">
                        <el-input v-model="fromObj.specification" style="width: 337px">
                            <template #append>
                                <span v-if="fromObj.sblx == '200201010300'">L</span>
                                <span v-else>KG</span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="生产日期:" prop="time">
                        <el-date-picker v-model="fromObj.time" type="date" value-format="YYYY-MM-DD"
                            style="width: 337px" placeholder="请选择生产日期" :disabled-date="disablednowDate1"
                            @change="timeChange" />
                    </el-form-item>
                    <el-form-item label="有效期:" prop="validateDate">
                        <el-input style="width: 337px" disabled v-model="other.validateTime" placeholder="">
                            <template #append>
                                年
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="到期日期:" prop="time">
                        <el-date-picker v-model="other.endTime" type="date" value-format="YYYY-MM-DD"
                            style="width: 337px" placeholder="" disabled />
                    </el-form-item>
                    <el-form-item label="生产厂家:" prop="manufacturer">
                        <el-input v-model="fromObj.manufacturer" placeholder="请输入生产厂家" clearable
                            style="width: 337px"></el-input>
                    </el-form-item>
                    <el-form-item label="灭火器图片:" style='width:100%;'>
                        <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                            v-model="fromObj.picture" :nameshow='true' :gsgfList="['jpg', 'png']"
                            :disabled="!props.formData.saveBtnShow" @filehandleChange="changeFiles">
                        </MOSTY.Upload>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="submit(ruleFormRef)" v-loading='saveloading'
                    v-if="props.formData.saveBtnShow">
                    <el-icon>
                        <DocumentChecked />
                    </el-icon>保存
                </el-button>
                <el-button @click="black"> <el-icon>
                        <DocumentDelete />
                    </el-icon>关闭</el-button>
                <!-- <el-button type="primary" @click="submit(ruleFormRef,'copy')" v-loading='saveloading'
                    v-if="props.formData.saveBtnShow&& !props.formData.id">复制</el-button> -->
            </template>
        </MOSTY.FromPage>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import dayjs from "dayjs";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { disablednowDate1 } from "@/utils/tools.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const { D_BZ_SYZT } = proxy.$dict("D_BZ_SYZT");

const rules = {
    sitename: [{ required: true, message: "请输入场所名称", trigger: "blur" }],
    buildingname: [{ required: true, message: "请选择所属建筑物", trigger: "blur" }],
    floorname: [{ required: true, message: "请选择所属楼层", trigger: "blur" }],
    partname: [{ required: true, message: "请选择所属部位", trigger: "blur" }],
    responsibilitypersonname: [{ required: true, message: "请选择岗位负责人", trigger: "blur" }],
    responsibilitydeptname: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    sblx: [{ required: true, message: "请选择灭火器类型", trigger: "blur" }],
    type: [{ required: true, message: "请输入型号", trigger: "blur" }],
    state: [{ required: true, message: "灭火器状态", trigger: "blur" }],
    ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 2, lastNum: 1 }, "specification"),
    time: [{ required: true, message: "请选择生产日期", trigger: "blur" }],
    manufacturer: [{ required: true, message: "请输入生产厂家", trigger: "blur" }],
};
const props = defineProps({
    formData: {
        type: Object,
        default: {}
    },
    obj: {
        type: Object,
        default: {}
    }
});
const saveloading = ref(false)
const sbsslist = ref([])
const fromObj = ref({})
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const other = ref({
    validateTime: '',
    endTime: ''
})
onMounted(() => {
    getaqbslb()
    if (props.formData.id) {
        getmain(props.formData.id)
    } else {
        fromObj.value = props.formData
    }
    setValidateTime()
});
/** 设置 有效期和到期日期 */
const setValidateTime = () => {
    let pzj = fromObj.value.sblx
    if (!pzj) {
        other.value.validateTime = ''
        other.value.endTime = ''
        return // --------- 没有类型就退出
    }

    getApi({}, `/mosty-base/sysConfigNew/getValue/${pzj}`).then(res => {
        if (res) {
            other.value.validateTime = isNaN(res) ? '' : res;
            // 到期日期
            if (res > 0 && res < 999999 && fromObj.value.time) {
                other.value.endTime = dayjs(fromObj.value.time).add(res, 'year').format('YYYY-MM-DD')
            } else {
                other.value.endTime = ''
            }
        }
    })
}
//子设备设施类型
function getaqbslb() {
    getApi({ dm: '20020101', zdbh: 'D_TB_JCYWLX', level: 2 }, '/mosty-base/sysDict/getJcyelxDictTree').then(res => {
        sbsslist.value = res[0].itemList
    })
}
const sblxChange = (val) => {
    getxzqh()
    setValidateTime()
}
const timeChange = (val) => {
    setValidateTime()
}
//获取子设备名称
function getxzqh(val) {
    fromObj.value.name = val
}

/** 保存 
 * @type {string} type 为 copy 时，为复制
 */
const submit = async (ruleFormRef, type) => {
    saveloading.value = true
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            if (fromObj.value) {
                fromObj.value.picture = fromObj.value.picture ? fromObj.value.picture.toString() : null
                fromObj.value.state = fromObj.value.state || '01'
                if (fromObj.value.parentid) {
                    if (fromObj.value.id) {
                        postApi(fromObj.value, "/mosty-jcgl/xf/updateTbXfOne")
                            .then(() => {
                                ElMessage.success("修改成功");
                                emit("changePage", 'xg');
                            }).finally(() => {
                                saveloading.value = false
                            })
                    } else {
                        postApi(fromObj.value, "/mosty-jcgl/xf/addTbMhqOne")
                            .then((res) => {
                                ElMessage.success(`${type == 'copy' ? '复制' : '新增'}成功`);
                                if (type != 'copy') emit("changePage", 'xz', res);
                            }).finally(() => {
                                saveloading.value = false
                            })
                    }
                } else {
                    if (fromObj.value.ind || fromObj.value.ind == 0) {
                        ElMessage.success("修改成功");
                        emit("changePage", 'xg', fromObj.value);
                        saveloading.value = false
                    } else {
                        ElMessage.success("新增成功");
                        emit("changePage", 'xz', fromObj.value);
                        saveloading.value = false
                    }
                }
            }
        } else {

            ElMessage.error("请输入必填项!");
            saveloading.value = false
        }
    });
};
//获取详情
function getmain(id) {
    if (id) {
        getApi({ id: id }, "/mosty-jcgl/xf/queryDetail").then((res) => {
            if (res) {
                res.responsibilitypersonname = res.responsibilitypersonname ? res.responsibilitypersonname.replace(/（null）/g, '') : ''
                fromObj.value = res;
                fromObj.value.saveBtnShow = props.formData.saveBtnShow;
                fromObj.value.publicarea = props.formData.publicarea ? props.formData.publicarea : null;
                fromObj.value.sfcq = props.formData.sfcq ? props.formData.sfcq : null;
                setValidateTime()
            }
        });
    }
}

const black = () => {
    if (props.formData.saveBtnShow) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                // 关闭上一次的表单校验
                ruleFormRef.value.clearValidate();
                emit("changePage");
            })
            .catch(() => {
                // catch error
            })
    } else {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage");
    }

};

</script>

<style lang="scss" scoped>
.table-lable {
    margin: 10px;
    color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
    display: none !important;
}

::v-deep .el-pagination {
    justify-content: center !important;
}



::v-deep .el-form {
    // width: 1580px;
    margin: auto;
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: start;
}

.el-form-item {
    display: flex;
    margin-right: 20px;
}

.bigBox {
    display: block !important;
    padding: 0 14px;
    box-sizing: border-box;
}




::v-deep .el-table .cell {
    padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
    padding-left: 0px !important;

    >input {
        width: 100%;
        height: 33px;
    }
}



::v-deep .el-upload-list {
    width: 50%;
}

::v-deep .el-form-item__content {
    margin-left: 0px !important;
}
</style>