<template>
    <div class="bigBox">
        <MOSTY.FromPage :title="props.title" @closeDialog="handleClose">
            <template #content>
                <MOSTY.Assort :title="'申报信息'" />
                <el-form class="mosty-from-wrap" label-suffix="：" ref="ruleFormRef" label-width="130px"
                    :model="formData" :inline="true" :rules="rules" :disabled="props.type == 'view'">
                    <el-row style="width: 100%;">
                        <el-col :span="24">
                            <el-form-item label="安全动态名称" prop="name">
                                <el-input v-model="formData.name" maxlength="30" placeholder="请输入安全动态名称"
                                    :disabled="props.type == 'view' || props.type == 'approve'" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="width: 100%;">
                        <el-col :span="24">
                            <el-form-item label="安全动态内容" prop="content">
                                <div class="contents">
                                    <vue-ueditor-wrap v-model="formData.content" editor-id="editor"
                                        :config="editorConfig"
                                        :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" />
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row style="width: 100%;">
                        <el-col :span="12">
                            <el-form-item label="动态组织部门" style="display: flex;">
                                <el-input v-model="formData.deptName"
                                    :disabled="props.type == 'view' || props.type == 'approve'" placeholder="请选择动态组织部门"
                                    clearable>
                                    <template #append>
                                        <el-button @click="ChooesDdld('01')">选择</el-button></template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="动态组织人" prop="userName" style="display: flex">
                                <el-input v-model="formData.userName"
                                    :disabled="props.type == 'view' || props.type == 'approve'" placeholder="请选择动态组织人"
                                    readonly clearable>
                                    <template #append>
                                        <el-button class='cursor' @click="ChooesDdld('03')"
                                            :disabled="props.type == 'view' || props.type == 'approve'">选择</el-button></template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row style="width: 100%;">
                        <el-col :span="12">
                            <el-form-item label="撰稿人" prop="writer" style="display: flex">
                                <el-input v-model="formData.writer"
                                    :disabled="props.type == 'view' || props.type == 'approve'" placeholder="请选择撰稿人"
                                    readonly clearable>
                                    <template #append>
                                        <el-button class='cursor'
                                            :disabled="props.type == 'view' || props.type == 'approve'"
                                            @click="ChooesDdld('04')">选择</el-button></template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发布时间" prop="time">
                                <el-date-picker v-model="formData.time"
                                    :disabled="props.type == 'view' || props.type == 'approve'" style="width:100%"
                                    type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发布类型" prop="level">
                                <el-select disabled v-model="formData.level">
                                    <el-option v-for="item in B_BZ_DTCJ" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <MOSTY.Assort :title="'动态图片'" />
                    <el-form-item label="动态标题图片" style="width: 100%;" prop="titleFile">
                        <div style='display:flex;'>
                            <MOSTY.Upload :width="'100%'" :disabled="props.type == 'view' || props.type == 'approve'"
                                :limit="1" :nopicer="false" :isImg="true" :ShowfileList="false"
                                v-model="formData.titleFile" :nameshow='true' :gsgfList="['jpg', 'png']">
                            </MOSTY.Upload>
                        </div>
                    </el-form-item>
                    <el-form-item label="其他动态图片" style="width: 100%;">
                        <div style='display:flex;'>
                            <MOSTY.Upload :width="'100%'" :disabled="props.type == 'view' || props.type == 'approve'"
                                :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                                v-model="formData.otherFile" :nameshow='true' :gsgfList="['jpg', 'png']">
                            </MOSTY.Upload>
                        </div>
                    </el-form-item>
                    <MOSTY.Assort :title="'审批信息'" v-if="type == 'approve' || type == 'view'" />
                    <el-row style="width: 100%;" v-if="type == 'approve' || type == 'view'">
                        <el-col :span="12">
                            <el-form-item label="审批意见" style="width: 100%;">
                                <el-radio-group v-model="formData.state" class="ml-4"
                                    :disabled="props.type == 'view' || props.type == 'edit'">
                                    <el-radio label="02">通过</el-radio>
                                    <el-radio label="03">不通过</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否置顶" style="width: 100%;">
                                <el-radio-group v-model="formData.isTop" class="ml-4"
                                    :disabled="props.type == 'view' || props.type == 'edit'">
                                    <el-radio :label="0">是</el-radio>
                                    <el-radio :label="1">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="width: 100%;" v-if="type == 'approve' || type == 'view'">
                        <el-col :span="24">
                            <el-form-item label="审批反馈" prop="reviewerMsg">
                                <el-input v-model="formData.reviewerMsg"
                                    :disabled="props.type == 'view' || props.type == 'edit'" type="textarea"
                                    placeholder="请输入审批反馈意见。" autosize></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
            <template #footer>

                <el-button type="primary" @click="submit(ruleFormRef)" v-loading='saveloading'
                    v-if="props.type !== 'view'"><el-icon>
                        <DocumentChecked />
                    </el-icon>
                    <span>{{type==='approve' ? '提交' : '保存'}}</span></el-button>
                <el-button @click="handleClose"><el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span></el-button>
            </template>
            <template #dwbox>
                <!-- 选择责任人 -->
                <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
                    @choosedUsers="getSonValue"></ChooseUser>
                <Choosebm :showDdld="showDept" @closezzjg="closezzjg" @listdata="getSonValue" :zzlx="zzlx" />
            </template>
        </MOSTY.FromPage>
    </div>
</template>

<script setup>
import { watch, ref, getCurrentInstance, defineAsyncComponent, onMounted, computed } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { getItem } from "@/utils/storage"
import { timeValidate } from "@/utils/tools.js";
/** 组织层级 */
const orgLevel = getItem("deptId").orgLevel
const { proxy } = getCurrentInstance();
const { B_BZ_DTCJ } = proxy.$dict("B_BZ_DTCJ")
//点击下载二维码
const saveloading = ref(false)
const rules = {
    name: [{ required: true, message: "安全动态名称", trigger: "blur" }],
    content: [{ required: true, message: "安全动态内容", trigger: "blur" }],
    // titleFile: [{ required: true, message: "动态标题图片", trigger: "blur" }],
    writer: [{ required: true, message: "撰稿人", trigger: "blur" }],
    time: [{ required: true, message: "请选择动态时间", trigger: "change" }],
};
const formData = ref({ isTop: '1', state: '02' })
const editorConfig = {
    serverUrl: '',
    UEDITOR_HOME_URL: '/UEditorPlus/',
    readonly: false
}
const zzlx = ref(null)
const props = defineProps({
    type: {
        default: '',
        type: String
    },
    title: {
        default: '',
        type: String
    },
    id: {
        default: '',
        type: String
    },
});
const showDept = ref(false); //选择部门
const emit = defineEmits("close");
const ruleFormRef = ref();
const leaderid = ref('');
const singleShow = ref(false);
const chooseUserVisible = ref(false);
const memberList = ref([]); //成员选择的id回显
//监听富文本
watch(
    () => formData.MarkdownEdit,
    (val) => {
        if (val) {
            formData.MarkdownEdit = val
        }
    }
);
watch(
    () => B_BZ_DTCJ.value,
    (val) => {
        if (val && props.title && props.title.indexOf("新增") > -1) {
            /** 层级对应对象 (orgLevel 11，10 ： 字典的01， 20,21.字典 02， 其他的03) */
            let levelObj = {
                '10': '01',
                '11': '01',
                '20': '02',
                '21': '02',
                '30': '03',
                '31': '03',
                '40': '03',
            }
            if (orgLevel > 9 && orgLevel < 100) {
                formData.value.level = levelObj[orgLevel] || '03'
            }
        }
    },{immediate: true}
);
onMounted(() => {
    if (props.id) {
        queryDetail()
    }
    if(props.title.includes('新增')){
      // 自动填充【撰稿人】和【时间】
        formData.value.time = timeValidate(new Date())
        formData.value.writer = localStorage.getItem('USERNAME');
        formData.value.writerId = localStorage.getItem('USERID');
    }
    if (props.type == 'view' || props.type == 'approve') {
        editorConfig.readonly = true
    }
});
// 查询详情
const queryDetail = () => {
    getApi({ id: props.id }, "/mosty-jcgl/securityDynamics/selectOne").then((res) => {
        formData.value = Object.assign(formData.value, res)
        if(props.type === 'approve') {
            formData.value.state = '02'; // 默认状态为通过
        }
    })
}
// 生效时间只能选当天及之前的
const disabledDate = (time) => {
    return time.getTime() < Date.now();
};
//选择部门
const ChooesDdld = (val) => {
    zzlx.value = val;
    if (val == "01") {
        showDept.value = true;
    } else {
        leaderid.value = formData.value.userId;
        singleShow.value = true;
        chooseUserVisible.value = true;
    }
}
// 关闭弹框
const handleClose = val => {
    if (props.type !== 'view') {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                emit("close");
            })
            .catch(() => {
                // catch error
            })
    } else {
        emit("close");
    }

}
//关闭选择人员弹窗
const closezzjg = (val) => {
    showDept.value = val;
};
const getSonValue = (value) => {
    if (zzlx.value == "01") {
        formData.value.deptName = value.orgName;
        formData.value.deptId = value.id;
    // 撰稿人
    } else if (zzlx.value == "04") {
        formData.value.writer = value[0].userName;
        formData.value.writerId = value[0].id;
    }
    else {
        formData.value.userName = value[0].userName;
        formData.value.userId = value[0].id;
    }
};
// 保存
const submit = async (ruleFormRef) => {
    saveloading.value = true
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            if (props.type == 'approve') {
                let _data = {
                    id: props.id,
                    isTop: formData.value.isTop,
                    reviewerMsg: formData.value.reviewerMsg,
                    state: formData.value.state
                }
                postApi(_data, "/mosty-jcgl/securityDynamics/examineSecurityDynamicsInfo").then(() => {
                    ElMessage.success("审批成功");
                    emit("close", true);
                }).finally(() => {
                    saveloading.value = false
                })
            } else {
                let _url = props.id ? 'editSecurityDynamics' : 'saveSecurityDynamics'
                if (props.id) {
                    formData.value.id = props.id
                }
                formData.value.titleFile = formData.value.titleFile ? formData.value.titleFile.toString() : ''
                formData.value.otherFile = formData.value.otherFile ? formData.value.otherFile.toString() : ''
                postApi(formData.value, "/mosty-jcgl/securityDynamics/" + _url).then(() => {
                    ElMessage.success(props.id ? "修改成功" : "保存成功");
                    emit("close", true);
                }).finally(() => {
                    saveloading.value = false
                })
            }
        } else {
            saveloading.value = false
        }
    });
};
</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-image {
    margin: 0;
    padding: 1px;
}

.erweim {
    text-align: center;
    margin-right: 10px;

    >img {
        width: 148px;
        height: 148px;
        display: block;
        border: 1px solid var(--el-color-primary);
    }
}

.contents {
    width: 100%;
    margin: 10px auto;
}


::v-deep .el-form {
    // width: 1525px;
    margin: auto;
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: start;
    // padding: 10px 56px !important;
}

::v-deep .el-form-item__content {
    margin-left: 10px !important;
}

.el-form-item {
    display: flex;
    margin-right: 20px;
}

.bigBox {
    display: block !important;
    padding-right: 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;
    }
}

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

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

::v-deep .edui-default .edui-editor {
    width: 100% !important;
}

::v-deep .edui-default .edui-editor-iframeholder {
    width: 100% !important;
}
</style>
