<template>
    <div class="bigBoxs">
        <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
            <template #content>
                <MOSTY.Assort :title="'基础信息'" />
                <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="150px" :model="data.fromObj"
                    :inline="true" :rules="rules" :disabled="!props.saveBtnShow">
                    <el-form-item label="发生时间：" prop="time">
                        <el-date-picker v-model="data.fromObj.time" type="data" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" placeholder="请选择发生时间" :disabled-date="disablednowDate1"
                            style="width: 337px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="单位：" prop="orgname">
                        <el-input v-model="data.fromObj.orgname" readonly clearable style="width: 337px" />
                    </el-form-item>
                    <el-form-item label="部门：" prop="deptnames" style="overflow-x: scroll; width: 100%;">
                        <el-input type="textarea" readonly autosize v-model="data.fromObj.deptnames" placeholder="请选择部门"
                            style="width:90%">
                        </el-input>
                        <el-button class='cursor' @click="chooseUserOrDept('01')">选择</el-button>
                    </el-form-item>
                    <el-form-item label="事故人员：" prop="usernames" style="overflow-x: scroll;width: 100%;">
                        <el-input type="textarea" readonly autosize v-model="data.fromObj.usernames"
                            placeholder="请选择事故人员" style="width: 90%;">

                        </el-input>
                        <el-button class='cursor' @click="chooseUserOrDept('02')">选择</el-button>
                    </el-form-item>

                    <el-form-item label="发生地点:" prop="address" style="overflow-x: scroll;width: 100%;">
                        <el-input v-model="data.fromObj.address" type="textarea" autosize autocomplete="off"
                            style="width: 100%;" />
                    </el-form-item>
                    <el-form-item label="发生过程和后果:" prop="consequences" style="overflow-x: scroll;width: 100%;">
                        <el-input v-model="data.fromObj.consequences" type="textarea" autosize autocomplete="off"
                            style="width: 100%;" />
                    </el-form-item>
                    <el-form-item label="初步原因分析:" prop="reason" style="overflow-x: scroll;width: 100%;">
                        <el-input v-model="data.fromObj.reason" type="textarea" autosize autocomplete="off"
                            style="width:100%" />
                    </el-form-item>
                    <el-form-item label="附件:" style="width: 100%;">
                        <MOSTY.Upload :isAutoWidth="true" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
                            v-model="data.fromObj.files" :placeholder="'请上传pdf,ofd, doc, docx,wps或 图片'"
                            :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'wps']"
                            :showinput="true" :delrow="delrow">
                        </MOSTY.Upload>

                    </el-form-item>
                </el-form>
            </template>
            <template #footer>

                <el-button type="primary" :loading="loading" @click="handleSave(ruleFormRef)" v-if="props.saveBtnShow">
                    <span><el-icon>
                            <DocumentChecked />
                        </el-icon>保存</span>
                </el-button>
                <el-button @click="CloseEvent" type="primary">
                    <span><el-icon>
                            <DocumentDelete />
                        </el-icon>关闭</span>
                </el-button>
            </template>
        </MOSTY.FromPage>
        <ChooseDept v-if="showDept" :formInfo="cybmList" :showDdld="showDept" @closezzjg="showDept = false"
            @listdata="getUserOrDept" :Isstrictly='false' />
        <ChooseUser v-model="chooseUserVisible" :Single="false" :data="memberList" :leaderid="leaderid"
            :deptId="data.fromObj.orgid" @choosedUsers="getUserOrDept"></ChooseUser>
    </div>

</template>

<script setup>
import {
    ref,
    onMounted,
    defineProps,
    defineEmits,
    reactive,
    getCurrentInstance
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseDept from "@/components/MyComponents/ChooseDept/Depart.vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { disablednowDate1 } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const rules = reactive({
    time: [{ required: true, message: "请选择发生时间", trigger: "change" }],
    orgname: [{ required: true, message: "单位不能为空", trigger: "change" }],
    deptnames: [{ required: true, message: "部门不能为空", trigger: "change" }],
    usernames: [{ required: true, message: "事故人员不能为空", trigger: "change" }],
    address: [{ required: true, message: "发生地点不能为空", trigger: "change" }],
    consequences: [{ required: true, message: "发生过程和后果不能为空", trigger: "change" }],
    reason: [{ required: true, message: "初步原因分析不能为空", trigger: "change" }],

});
const zzlx = ref(null);
const memberList = ref([]); //成员选择的id回显
const chooseUserVisible = ref(false);
const cybmList = ref([]);
const showDept = ref(false)
const loading = ref(false)
const emits = defineEmits(["close"]);
const props = defineProps({
    rowId: String,
    title: String,
    saveBtnShow: {
        default: true,
        type: Boolean
    }
});
const data = reactive({
    fromObj: {},
    tbOndutymanagesonList: {}
});
const delrow = ref({}); //删除文件列表
onMounted(() => {
    data.fromObj = {};
    data.fromObj.orgname = getItem("deptId").ssdwmc
    data.fromObj.orgid = getItem("deptId").ssdwid
    if (props.rowId) {
        getmain(props.rowId)
    }

});
//详情
const getmain = (id) => {
    if (id) {
        getApi(
            { id }, "/mosty-jcgl/wssj/getInfo").then((res) => {
                if (res) {
                    data.fromObj = res;
                }
            });
    }
};

const chooseUserOrDept = (val) => {
    zzlx.value = val;
    if (val == "01") {
        cybmList.value = data.fromObj.deptids ? data.fromObj.deptids.split(',') : []

        showDept.value = true;
    } else {
        memberList.value = data.fromObj.userids ? data.fromObj.userids.split(',') : []
        chooseUserVisible.value = true;
    }
};
const getUserOrDept = (val) => {
    if (zzlx.value == '01') {
        if (val && val.length > 0) {
            data.fromObj.deptids = val
                .map((item) => {
                    return item.id;
                }).toString();
            data.fromObj.deptnames = val.map((item) => {
                return item.orgName;
            }).toString();
        } else {
            data.fromObj.deptnames = []
            data.fromObj.deptids = []
        }
    } else {

        memberList.value = val.map((item) => {
            return item.id;
        });
        data.fromObj.usernames = val.map(it => { return it.userName }).toString();
        data.fromObj.userids = val.map(it => { return it.id }).toString();
    }
};
const CloseEvent = () => {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
};
const ruleFormRef = ref();
const handleSave = async (ruleFormRef) => {
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            loading.value = true
            data.fromObj.files = data.fromObj.files ? data.fromObj.files.toString() : "";
            if (data.fromObj) {
                if (data.fromObj.id) {
                    postApi(
                        data.fromObj,
                        "/mosty-jcgl/wssj/edit"
                    )
                        .then((res) => {
                            ElMessage.success("修改成功");
                            emits("close");
                        }).finally(() => {
                            loading.value = false
                        })
                } else {
                    postApi(
                        data.fromObj,
                        "/mosty-jcgl/wssj/add"
                    )
                        .then((res) => {
                            ElMessage.success("新增成功");
                            emits("close");
                        }).finally(() => {
                            loading.value = false
                        })

                }
            }
        } else {
            ElMessage.error("请输入必填项");
        }
    });
};

</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
    flex-wrap: nowrap !important;
}

.el-form {
    width: 80%;
    margin: 20px auto;
    flex-wrap: wrap;
    justify-content: start;

}

.el-form-item {
    text-align: center;
    margin-right: 10px;
}

.addbtn {
    margin-bottom: 10px;
}

.bigBox {
    display: block !important;
    padding: 0 14px;
    box-sizing: border-box;
}

.tabbox {
    max-height: 300px;
    overflow-y: scroll;

    .input {
        width: 100%;
        height: 100%;
    }
}

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

.img_fix {
    width: 915px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
</style>