<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 label="所属场所:" prop="sitename" v-if='fromObj.sitename'>
                        <el-input v-model="fromObj.sitename" style="width: 337px" disabled />
                    </el-form-item>
                    <el-form-item :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 label="所属楼层:" prop="floorname" v-if='fromObj.floorname'>
                        <el-input v-model.number="fromObj.floorname" style="width: 337px" disabled />
                    </el-form-item>
                    <el-form-item :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 label="子设备类型:" prop="sblx">
                        <MOSTY.DictTree v-model="fromObj.sblx" :zdlist="sbsslist" :placeholder='"请选择子设备类型"'
                            :disabled='fromObj.disabled' :type='"array"' style="width: 337px;" @nameChange='getxzqh' />
                    </el-form-item>
                    <el-form-item label="设备名称:" prop="name"
                        :rules="[{ required: true, message: '请输入设备名称', trigger: 'blur' }]">
                        <el-input v-model="fromObj.name" style="width: 337px" />
                    </el-form-item>
                    <el-form-item label="安装位置:" prop="location">
                        <el-input v-model="fromObj.location" clearable 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:100%;'>
                        <el-input v-model="fromObj.responsibilitypersonname" type="textarea" :rows="4" disabled
                            style="width: 100%" />
                    </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>
            </template>
        </MOSTY.FromPage>
    </div>
</template>

<script setup>
import {
    reactive,
    ref,
    onMounted,
    getCurrentInstance
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
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" }],
    sblx: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
    location: [{ required: true, message: "请选择安装位置", trigger: "blur" }]
};
const props = defineProps({
    formData: {
        type: Object,
        default: {}
    }
});
const saveloading = ref(false)
const sbsslist = ref([])
const fromObj = ref({})
const emit = defineEmits("changePage");
const ruleFormRef = ref();
onMounted(() => {
    fromObj.value = props.formData
    getaqbslb()
    if (props.formData.id) {
        getmain(props.formData.id)
    }
});
//子设备设施类型
function getaqbslb() {
    getApi({ zdbh: 'D_BZ_AQSBSSZBLX', dm: '40', level: 4 }, '/mosty-base/sysDict/getJcyelxDictTree').then(res => {
        sbsslist.value = res[0].itemList
    })
}
//获取子设备名称
function getxzqh(val) {
    fromObj.value.name = val
}

// 保存
const submit = async (ruleFormRef) => {
    saveloading.value = true
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            if (fromObj.value) {
                if (fromObj.value.zbid) {
                    if (fromObj.value.id) {
                        postApi(fromObj.value, "/mosty-jcgl/SbglAqsbssZb/updateTbSbglAqsbssZbOne")
                            .then(() => {
                                ElMessage.success("修改成功");
                                emit("changePage", 'xg')
                            }).finally(() => {
                                saveloading.value = false
                            })
                    } else {
                        postApi(fromObj.value, "/mosty-jcgl/SbglAqsbssZb/addTbSbglAqsbssZbOne")
                            .then((res) => {
                                ElMessage.success("新增成功");
                                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/SbglAqsbssZb/queryTbSbglAqsbssZbById").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;
            }
        });
    }
}

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>
::v-deep .el-form-item__content {
    margin-left: 0px !important;
}

.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%;
}
</style>