<template>
    <div class="bigBox">
        <MOSTY.FromPage :title="props.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.type == 'view'">
                    <el-form-item label="姓名:" prop="personName">
                        <el-input v-model="fromObj.personName" placeholder="请输入姓名" style="width: 335px" />
                    </el-form-item>
                    <el-form-item label="性别:" prop="sex">
                        <MOSTY.DictRidioAndSelect :dictData="D_BZ_XB" style="width: 335px" placeholder="请选择性别"
                            v-model="fromObj.sex" selectType="select" />
                    </el-form-item>
                    <el-form-item label="身份证号:" prop="idCard">
                        <MOSTY.IdentityCard width="335px" v-model="fromObj.idCard" clearable />
                    </el-form-item>
                    <el-form-item label="证书类型:" prop="certificateType">
                        <MOSTY.DictRidioAndSelect :dictData="D_BZ_PYYYLX" style="width: 335px" placeholder="请选择证书类型"
                            v-model="fromObj.certificateType" selectType="select" />
                    </el-form-item>
                    <el-form-item label="证书编号:" prop="certificateNumber">
                        <el-input v-model="fromObj.certificateNumber" style="width: 335px" />
                    </el-form-item>
                    <el-form-item label="证书图片:" style="width: 100%">
                        <MOSTY.Upload width="150px" :limit="1" :nopicer="false" :isImg="true" :ShowfileList="false"
                            v-model="fromObj.certificateImg">
                        </MOSTY.Upload>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="submit(ruleFormRef)" v-loading='saveloading'
                    v-if="props.type == 'edit'"> <el-icon>
                        <DocumentChecked />
                    </el-icon>
                    <span>保存</span></el-button>
                <el-button @click="black"> <el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span></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 * as rule from "@/utils/rules.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_PYYYLX, D_BZ_XB, D_BZ_HZZT } = proxy.$dict("D_BZ_PYYYLX", "D_BZ_XB", "D_BZ_HZZT");
const saveloading = ref(false)
const rules = {
    personName: [{ required: true, message: "人员姓名", trigger: "blur" }],
    sex: [{ required: true, message: "性别", trigger: "blur" }],
    ...rule.identityCardRule({ require: true, validator: true }, "idCard"),
    certificateType: [{ required: true, message: "证书类型", trigger: "blur" }],
    certificateNumber: [{ required: true, message: "证书编号", trigger: "blur" }],
};
const props = defineProps({
    type: {
        type: String,
        default: ''
    },
    id: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    relatedPartyId: {
        type: String,
        default: ''
    },
});
const fromObj = ref({})
const emit = defineEmits("saveSuccess", "close");
const ruleFormRef = ref();
onMounted(() => {
    getmain()
});
// 保存
const submit = async (ruleFormRef) => {
    saveloading.value = true
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            if (fromObj.value) {
                fromObj.value.relatedPartyId = props.relatedPartyId
                if (fromObj.value.id) {
                    postApi(fromObj.value, "/mosty-jcgl/relatedPartyPerson/editRelatedPartyPerson")
                        .then(() => {
                            ElMessage.success("修改成功");
                            emit("saveSuccess");
                        }).finally(() => {
                            saveloading.value = false
                        })
                } else {
                    postApi(fromObj.value, "/mosty-jcgl/relatedPartyPerson/saveRelatedPartyPerson")
                        .then((res) => {
                            ElMessage.success("新增成功");
                            emit("saveSuccess");
                        }).finally(() => {
                            saveloading.value = false
                        })
                }
            }
        } else {
            ElMessage.error("请输入必填项!");
            saveloading.value = false
        }
    });
};
//获取详情
function getmain() {
    if (props.id) {
        getApi({ id: props.id }, "/mosty-jcgl/relatedPartyPerson/selectOne").then((res) => {
            if (res) {
                fromObj.value = res
            }
        });
    }
}

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

};

</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;
    height: calc(100vh - 136px) !important;
}

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

.headBox {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-bottom: 10px;
}

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

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