<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="data.fromObj"
                    :inline="true" :rules="rules" :disabled="!props.formData.saveBtnShow">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="检测日期:" prop="installationdate">
                                <el-date-picker v-model="data.fromObj.installationdate" type="date"
                                    value-format="YYYY-MM-DD" style="width: 337px" placeholder="请选择检测日期" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="检测机构:" prop="logoname">
                                <el-input v-model="data.fromObj.logoname" placeholder="请输入检测机构" clearable
                                    style="width: 337px"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="有效期限:" prop="logoname">
                                <el-input v-model="data.fromObj.logoname" placeholder="请输入有效期限" clearable
                                    style="width: 337px"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="检测描述:" prop="logoname">
                                <el-input v-model="data.fromObj.logoname" type="textarea" clearable
                                    style="width:92.55%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="检测结论:" prop="logoname">
                                <el-input v-model="data.fromObj.logoname" type="textarea" clearable
                                    style="width: 92.55%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注:" prop="logoname">
                                <el-input v-model="data.fromObj.logoname" type="textarea" placeholder="请输入备注" clearable
                                    style="width: 92.55%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div>
                    <MOSTY.Assort :title="'附件信息'" />
                </div>
                <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="data.fromObj"
                    :inline="true" :rules="rules" :disabled="!props.formData.saveBtnShow">
                    <el-form-item label="附件:" style='width:800px;'>
                        <MOSTY.Upload :width="'100%'" :widthNumber="840" :limit="4" :nopicer="true" :isImg="false"
                            :ShowfileList="true" v-model="data.fromObj.uploadList" :showinput="false" :delrow="delrow"
                            @filehandleChange="changeFile" :disabled="!props.formData.saveBtnShow">
                        </MOSTY.Upload>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="submit(ruleFormRef)" v-if="props.formData.saveBtnShow"> <el-icon>
                        <DocumentChecked />
                    </el-icon>保存</el-button>
                <el-button @click="black"> <el-icon>
                        <DocumentDelete />
                    </el-icon> 关闭</el-button>
            </template>
            <template #dwbox>
                <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
                    @choosedUsers="getSonValue"></ChooseUser>
            </template>
        </MOSTY.FromPage>
    </div>
</template>

<script setup>
import {
    reactive,
    ref,
    getCurrentInstance,
    defineAsyncComponent,
    onMounted,

} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
    formData: {
        type: Object,
        default: {}
    }
});
const placename = ref("");
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const data = reactive({
    fromObj: {},
});
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const zzlx = ref(null);
const rules = reactive({
});

const getSonValue = (value) => {
    if (zzlx.value == "01") {
        data.fromObj.responsibilitypersonname = value[0].userName;
        data.fromObj.responsibilityperson = value[0].id;
        data.fromObj.responsibilitydept = value[0].deptId;
        data.fromObj.responsibilitydeptname = value[0].deptName;
    }

};
// 保存
const submit = async (ruleFormRef) => {
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            if (data.fromObj.file) {
                data.fromObj.file = data.fromObj.file.toString();
            }
            if (data.fromObj) {
                if (data.config.title == "安全标识新增") {
                    postApi(data.fromObj, "/mosty-jcgl/sitelogo/addTbSitelogoOne")
                        .then((res) => {
                            ElMessage.success("新增成功");
                            emit("changePage", "Todilog");
                        }).catch((err) => {
                        })
                }
                if (data.config.title == "安全标识编辑") {
                    postApi(data.fromObj, "/mosty-jcgl/sitelogo/updateTbSitelogoOne")
                        .then((res) => {
                            ElMessage.success("新增成功");
                            emit("changePage", "Todilog");
                        }).catch((err) => {
                        })

                }
            }
        }
    });
};
//获取详情
function getmain(id) {
    if (id) {
        getApi({ id: id }, "/mosty-jcgl/sitelogo/queryTbSitelogoById").then((res) => {
            if (res) {
                data.fromObj = JSON.parse(JSON.stringify(res));
                data.fromObj.file = data.fromObj.file
                    ? data.fromObj.file.split(",")
                    : null;
                data.fromObj.allname = data.fromObj.roomname;
                placename.value = data.fromObj.sitename;
            }
        });
    }
}
const black = () => {
    if (props.formData.saveBtnShow) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                // 关闭上一次的表单校验
                ruleFormRef.value.clearValidate();
                emits("close");
            })
            .catch(() => {
                // catch error
            })
    } else {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage");
    }

};

onMounted(() => {
    getmain(props.formData.id);
});

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

.el-form {
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

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