<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="name"
                        :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
                        <el-input v-model="fromObj.name" placeholder="请输入附件名称" clearable
                            style="width: 335px"></el-input>
                    </el-form-item>
                    <el-form-item label="维修或操作时间:" prop="handleTime">
                        <el-date-picker v-model="fromObj.handleTime" style="width: 335px" type="date"
                            value-format="YYYY-MM-DD" placeholder="请选择维修或操作时间" :disabled-date="disablednowDate1" />
                    </el-form-item>
                    <el-form-item label="附件类型:" prop="type">
                        <el-select v-model="fromObj.type" disabled>
                            <el-option v-for="item in fjtypeArr" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-show="false" label="所属场所:" prop="sitename">
                        <el-input v-model="fromObj.sitename" style="width: 335px" disabled />
                    </el-form-item>
                    <el-form-item v-show="false" :label="fromObj.publicarea == '1' ? '所属场区:' : '所属建筑物:'"
                        prop="buildingname">
                        <el-input v-model="fromObj.buildingname" style="width: 335px" 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: 335px" 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: 335px" />
                    </el-form-item>
                    <el-form-item v-if="props.obj && props.obj.name" label="所属设备:">
                        <el-input v-model="props.obj.name" disabled style="width: 335px"></el-input>
                    </el-form-item>
                    <el-form-item label="责任部门:" prop="responsibilitydeptname">
                        <el-input v-model="fromObj.responsibilitydeptname" disabled style="width: 335px">
                            <template #append>
                                <el-button class='cursor' disabled @click="ChooesDdld('01')">选择</el-button></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="责任人:" prop="responsibilitypersonname" style="display: flex;width:100%;">
                        <el-input v-model="fromObj.responsibilitypersonname" type="textarea" :rows="4" disabled readonly
                            style="width: 93%" clearable>
                        </el-input>
                        <el-button class='cursor ml10' @click="ChooesDdld('02')" disabled>选择</el-button>
                    </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>
    <!-- 选择部门 -->
    <Choosebm :showDdld="showDept" @closezzjg="closezzjg" @listdata="getSonValue" :zzlx="zzlx" />
    <!-- 选择设备负责人 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" @choosedUsers="getSonValue"
        :deptId="fromObj.responsibilitydeptid">
    </ChooseUser>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { disablednowDate1 } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const { D_BZ_AQZZ } = proxy.$dict("D_BZ_AQZZ");
const saveloading = ref(false)
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" }],
    responsibilitydeptname: [{ required: true, message: "请选择责任部门", trigger: "blur" }],
    responsibilitypersonname: [{ required: true, message: "请选择责任人", trigger: "blur" }],
    handleTime: [{ required: true, message: "请选择维修或操作时间", trigger: "blur" }],

};
const props = defineProps({
    formData: {
        type: Object,
        default: {}
    },
    // 外面的数据 -表单
    obj: {
        default: null,
        type: Object
    },
    /** 其他参数 options */
    opt: {
        default: {
            type: '01' // 01 设备附件 02 预防性实验附件 03 防护装置 04 保护装置
        },
        type: Object
    }
});
const zzlx = ref(null);
const fromObj = ref({})
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const showDept = ref(false);
const memberList = ref([]);
const emit = defineEmits("saveSuccess");
const ruleFormRef = ref();

/** 附件类型 01 设备附件 02 预防性实验附件 03 防护装置 04 保护装置 */
const fjtypeArr = ref([
    { label: '设备附件', value: '01' },
    { label: '预防性实验附件', value: '02' },
    { label: '防护装置附件', value: '03' },
    { label: '保护装置附件', value: '04' },
])
onMounted(() => {
    fromObj.value = props.formData
    if (props.formData.id) {
        getmain(props.formData.id)
    } else {
        fromObj.value.type = props.opt.type || '01'
    }
});

//选择部门
function ChooesDdld(val) {
    zzlx.value = val;
    if (val == "01") {
        showDept.value = true;
    } else {
        if (fromObj.value.responsibilitydeptid) {
            memberList.value = fromObj.value.responsibilityperson ? fromObj.value.responsibilityperson.split(',') : [];
            singleShow.value = false;
            chooseUserVisible.value = true;
        } else {
            ElMessage.error("请先选择责任部门！!");
        }

    }
}
const getSonValue = (value) => {
    if (zzlx.value == "01") {
        fromObj.value.responsibilitydeptname = value.orgName;
        fromObj.value.responsibilitydeptid = value.id;
    }
    else {
        fromObj.value.responsibilitypersonname = value.map(item => {
            if (item.mobile) {
                return item.userName + '（' + item.mobile + '）'
            } else {
                return item.userName
            }
        }).toString();
        fromObj.value.responsibilityperson = value.map(item => {
            return item.id
        }).toString();
    }
};

//关闭弹窗
const closezzjg = (val) => {
    showDept.value = val;
};
// 保存
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/SbglBpdsbZb/editSbglBpdsbZbInfo")
                        .then(() => {
                            ElMessage.success("修改成功");
                            emit("saveSuccess", 'xg');
                        }).finally(() => {
                            saveloading.value = false
                        })
                } else {
                    postApi(fromObj.value, "/mosty-jcgl/SbglBpdsbZb/saveSbglBpdsbZbInfo")
                        .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/SbglBpdsbZb/selectOne").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;
                fromObj.value.sitename = props.formData.sitename ? props.formData.sitename : null;
                fromObj.value.buildingname = props.formData.buildingname ? props.formData.buildingname : null;
                fromObj.value.floorname = props.formData.floorname ? props.formData.floorname : null;
                fromObj.value.partname = props.formData.partname ? props.formData.partname : null;

            }
        });
    }
}

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