<template>
    <div class="bigBox" ref="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="150px"
                    :model="formData" :inline="true" :rules="rules">
                    <el-row style="width: 100%;">
                        <el-col :span="24">
                            <el-form-item label="事件类型" prop="type">
                                <MOSTY.DictRidioAndSelect class="ml12" :dictData="D_BZ_AQJSLX" v-model="formData.type"
                                    selectType="radio" :disabled="false" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="width: 100%;">
                        <el-col :span="24">
                            <el-form-item label="安全警示标题" prop="title">
                                <el-input v-model="formData.title" maxlength="30" placeholder="请输入通知公告标题"
                                    :disabled="props.type == 'view'" 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="安全警示数据来源" prop="title">
                                <MOSTY.DictRidioAndSelect class="ml12" :dictData="D_BZ_QY" v-model="formData.qysource"
                                    selectType="radio" @onChange="qySourceChange" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="撰稿人" style="display: flex" prop="writer">
                                <el-input v-if="formData.qysource === '1'" v-model="formData.writer"
                                    :disabled="props.type == 'view' || props.type == 'approve'" placeholder="请选择撰稿人"
                                    readonly clearable>
                                    <template #append>
                                        <el-button class='cursor' :disabled="props.type == 'view'"
                                            @click="ChooesDdld('04')">选择</el-button></template>
                                </el-input>
                                <el-input v-else v-model="formData.writer" :disabled="props.type == 'view'"
                                    placeholder="请选择撰稿人" clearable maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="width: 100%;" v-if="formData.issuedTime">
                        <el-col :span="24">
                            <el-form-item label="发布时间" prop="time">
                                <span style="color:#000;">{{ formData.issuedTime }}</span>
                                <!-- <el-date-picker v-model="formData.time" placeholder="请设定时间" :disabled="true"
                                    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-row>
                    <MOSTY.Assort :title="'事故事件附件'" />
                    <el-form-item label="安全警示图片/视频" style="width: 100%;" prop="titleFile">
                        <div style='display:flex;'>
                            <MOSTY.Upload :widthNumber="width" :disabled="props.type == 'view'" :limit="1"
                                :nopicer="false" :isImgOrVideo="true" :ShowfileList="false" v-model="formData.titleFile"
                                :nameshow='true' :gsgfList="['jpg', 'png','mp4']">
                            </MOSTY.Upload>
                        </div>
                    </el-form-item>
                    <el-form-item label="安全警示附件" style="width: 100%;">
                        <div style='display:flex;'>
                            <MOSTY.Upload :widthNumber="width" :disabled="props.type == 'view'" :limit="5"
                                :nopicer="true" :isImg="false" :ShowfileList="true" placeholder="请上传word或pdf,wps文件"
                                v-model="formData.otherFile" :showinput='true'
                                :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']">
                            </MOSTY.Upload>
                        </div>
                    </el-form-item>
                </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>保存</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" :deptId="deptId" :data="memberList"
                    :leaderid="leaderid" @choosedUsers="getSonValue"></ChooseUser>
            </template>
        </MOSTY.FromPage>
    </div>
</template>

<script setup>
import { watch, ref, getCurrentInstance, onMounted, computed, nextTick } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
const { proxy } = getCurrentInstance();
const { D_BZ_AQJSLX, D_BZ_QY } = proxy.$dict("D_BZ_AQJSLX", "D_BZ_QY");
import { timeValidate } from "@/utils/tools.js"
//点击下载二维码
const saveloading = ref(false)
const rules = {
    title: [{ required: true, message: "安全警示名称", trigger: "blur" }],
    type: [{ required: true, message: "请选择安全警示类型", trigger: "blur" }],
    content: [{ required: true, message: "安全警示内容", trigger: "blur" }],
    // titleFile: [{ required: true, message: "安全警示图片", trigger: "blur" }],
    // time: [{ required: true, message: "请选择动态时间", trigger: "change" }],
    receivingRange: [{ required: true, message: "请选择下发范围", trigger: "change" }],
    writer: [{ required: true, message: "请选择撰稿人", trigger: "change" }],
};
const deptId = JSON.parse(window.localStorage.getItem("deptId")).ssbmid
const USERNAME = window.localStorage.getItem("USERNAME")
const USERID = window.localStorage.getItem("USERID")

const formData = ref({
    type: '01',
    receivingRange: '01',
    time: '',
    qysource: '1',
    writer: USERNAME,
    writerId: USERID,
})
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 bigBox = ref();
const leaderid = ref('');
const singleShow = ref(false);
const chooseUserVisible = ref(false);
const memberList = ref([]); //成员选择的id回显
const taskList = ref([])
const width = ref(null)
//监听富文本
watch(
    () => formData.MarkdownEdit,
    (val) => {
        if (val) {
            formData.MarkdownEdit = val
        }
    }
);
onMounted(() => {
    nextTick(() => {
        width.value = (bigBox.value.offsetWidth - 215)
    })
    if (props.id) {
        queryDetail()
    }
    if (props.type == 'view' || props.type == 'approve') {
        editorConfig.readonly = true
    }
});
// 查询详情
const queryDetail = () => {
    getApi({ id: props.id }, "/mosty-jcgl/safetyWarning/selectOne").then((res) => {
        formData.value = Object.assign(formData.value, res)
    })
}
const qySourceChange = () => {
    formData.value.writer = ''
    formData.value.writerId = ''

}
//选择部门
const ChooesDdld = (val) => {
    zzlx.value = val;
    if (val == "01") {
        showDept.value = true;
    } else {
        leaderid.value = formData.value.writerId;
        singleShow.value = true;
        chooseUserVisible.value = true;
    }
}
// 关闭单位部门弹框
const closeJhss = () => {
    taskList.value = []
    showDept.value = false
}
// 关闭弹框
const handleClose = () => {
    if (props.type !== 'view') {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                emit("close");
            })
            .catch(() => {
                // catch error
            })
    } else {
        emit("close");
    }

}
const getSonValue = (value) => {
    if (zzlx.value == "01") {
        formData.value.receiveDeptName = value.orgName;
        formData.value.receiveDeptId = value.id;
        formData.value.receivingRange = '04'
    } else if (zzlx.value == "04") {
        formData.value.writer = value[0].userName;
        formData.value.writerId = value[0].id;
    }
};
// 保存
const submit = async (ruleFormRef) => {
    saveloading.value = true
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            let _url = props.id ? 'editSafetyWarning' : 'saveSafetyWarning'
            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/safetyWarning/" + _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%;
    // display: flex; //
}

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

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