<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">
                        <el-input v-model="fromObj.sitename" style="width: 337px" disabled />
                    </el-form-item>
                    <el-form-item :label="fromObj.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname">
                        <el-select v-model="fromObj.buildingname" @change="cahngejzwmc" clearable style="width: 337px"
                            placeholder="请选择">
                            <el-option v-for="item in jzwlist" :key="item" :label="item.buildingname"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属楼层:" prop="floorname" v-if="fromObj.publicarea != '1'">
                        <el-select v-model="fromObj.floorname" @change="cahngelcmc" clearable style="width: 337px"
                            placeholder="请选择">
                            <el-option v-for="item in lclist" :key="item" :label="item.floorname" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="fromObj.publicarea == '1' ? '场区部位:' : '所属部位:'" prop="partname">
                        <el-select v-model="fromObj.partname" @change="cahngebw" clearable style="width: 337px"
                            placeholder="请选择">
                            <el-option v-for="item in bwlist" :key="item"
                                :label="item.partname ? item.partname : item.qtmc" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备编号:" prop="sbbh">
                        <el-input v-model="fromObj.sbbh" clearable style="width: 337px"></el-input>
                    </el-form-item>
                    <el-form-item label="设备名称:" prop="name">
                        <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-input>
                    </el-form-item>
                    <el-form-item label="摄像头类型:" prop="cameraType" v-if="fromObj.sblx == '06'">
                        <el-select v-model="fromObj.cameraType" style="width: 337px;">
                            <el-option v-for="item in D_BZ_SXTLX" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="摄像头IP地址:" prop="ipaddr" v-if="fromObj.sblx == '06'">
                        <el-input v-model="fromObj.ipaddr" clearable style="width: 337px"></el-input>
                    </el-form-item>
                    <el-form-item label="摄像头端口号:" prop="port" v-if="fromObj.sblx == '06'">
                        <el-input v-model="fromObj.port" type="number" clearable style="width: 337px"></el-input>
                    </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 { ref, onMounted, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const saveloading = ref(false)
const { D_BZ_SXTLX } = proxy.$dict("D_BZ_SXTLX")
const rules = {
    sitename: [{ required: true, message: "请输入场所名称", trigger: "blur" }],
    cameraType: [{ required: true, message: "请选择摄像头类型", trigger: "blur" }],
    buildingname: [{ required: true, message: "请选择所属建筑物", trigger: "blur" }],
    floorname: [{ required: true, message: "请选择所属楼层", trigger: "blur" }],
    partname: [{ required: true, message: "请选择所属部位", trigger: "blur" }],
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
    sbbh: [{ required: true, message: "请输入设备编号", trigger: "blur" }],
    ipaddr: [{ required: true, message: "请输入摄像头IP地址", trigger: "blur" }],
    port: [{ required: true, message: "请输入摄像头端口号", trigger: "blur" }],
    location: [{ required: true, message: "请输入具体位置", trigger: "blur" }],
};
const props = defineProps({
    formData: {
        type: Object,
        default: {}
    }
});
const fromObj = ref({})
const jzwlist = ref([])
const lclist = ref([])
const bwlist = ref([])
const emit = defineEmits("saveSuccess");
const ruleFormRef = ref();
onMounted(() => {
    console.log(props.formData.sblx)
    fromObj.value.sblx = props.formData.sblx
    fromObj.value.sitename = props.formData.sitename
    fromObj.value.siteid = props.formData.siteid
    fromObj.value.zbid = props.formData.parentid
    getjzwlist(props.formData.siteid)
    if (props.formData.id) {
        getmain(props.formData.id)
    }
});
//获取建筑物列表
function getjzwlist(placeid) {
    getApi({ placeid }, "/mosty-jcgl/building/queryBuildingByPlaceid").then(res => {
        jzwlist.value = res ? res : []
    })
}
//获取建筑物名称
function cahngejzwmc(val) {
    jzwlist.value.forEach(item => {
        if (item.id == val) {
            fromObj.value.buildingid = item.id
            fromObj.value.buildingname = item.buildingname
            fromObj.value.publicarea = item.publicarea
            fromObj.value.floorname = ""
            fromObj.value.floorid = ""
            fromObj.value.partname = ""
            fromObj.value.partid = ""
            if (item.publicarea == "1") {
                getbw2data(item.id)
            } else {
                getlcdata(item.id)
            }
        }
    })
}
//根据建筑物查询楼层
function getlcdata(id) {
    getApi({ id }, "/mosty-jcgl/floor/queryFloorByBuildId").then(res => {
        lclist.value = res ? res : []
    })
}
//获取楼层名称
function cahngelcmc(val) {
    lclist.value.forEach(item => {
        if (item.id == val) {
            fromObj.value.floorid = item.id
            fromObj.value.floorname = item.floorname
            fromObj.value.partname = ""
            fromObj.value.partid = ""
            getbwdata(item.id)
        }
    })
}

// (新)根据楼层id查询部位
function getbwdata(id) {
    getApi({ id }, "/mosty-jcgl/part/getListByFloorid").then(res => {
        bwlist.value = res ? res : []
    })
}
//(新)根据建筑物id查询部位
function getbw2data(id) {
    getApi({ id }, "/mosty-jcgl/part/getListByBuildid").then(res => {
        bwlist.value = res ? res : []
    })
}
//获取当前部位
const cahngebw = val => {
    bwlist.value.forEach(item => {
        if (item.id == val) {
            fromObj.value.partid = item.id
            fromObj.value.partname = item.partname ? item.partname : item.qtmc
        }
    })
}
// 保存
const submit = async (ruleFormRef) => {
    saveloading.value = true
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            if (fromObj.value) {
                if (fromObj.value.id) {
                    postApi(fromObj.value, "/mosty-jcgl/aqsbssZb/update").then(() => {
                        ElMessage.success("修改成功");
                        emit("saveSuccess", 'xg');
                    }).finally(() => {
                        saveloading.value = false
                    })
                } else {
                    postApi(fromObj.value, "/mosty-jcgl/aqsbssZb/add").then((res) => {
                        ElMessage.success("新增成功");
                        emit("saveSuccess", 'xz', res);
                    }).finally(() => {
                        saveloading.value = false
                    })
                }
            }
        } else {
            ElMessage.error("请输入必填项!");
            saveloading.value = false
        }
    });
};
//获取详情
function getmain(id) {
    if (id) {
        getApi({ id: id }, "/mosty-jcgl/aqsbssZb/getInfo").then((res) => {
            if (res) {
                fromObj.value = res;
                fromObj.value.saveBtnShow = props.formData.saveBtnShow;
                fromObj.value.publicarea = res.publicarea ? res.publicarea : null;
                getlcxq(res.buildingid);
                getjzwlist(res.siteid)
                getbwdata(res.floorid)
            }
        });
    }
}
//获取建筑物详情
function getlcxq(id) {
    getApi({}, `/mosty-jcgl/building/getBuildingById/${id}`).then(res => {
        fromObj.value.publicarea = res.publicarea ? res.publicarea : "2"
        if (fromObj.value.publicarea == "1") {
            getbw2data(id)
        } else {
            getlcdata(id)
        }
    })
}
const black = () => {
    if (props.formData.saveBtnShow) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？').then(() => {
            ruleFormRef.value.clearValidate();
            emit("saveSuccess");
        })
    } else {
        ruleFormRef.value.clearValidate();
        emit("saveSuccess");
    }
};

</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>