<template>
    <div>
        <MOSTY.FromPage :title="props.Fromobj.title" @closeDialog="handleClose">
            <template #content>
                <div class="config">
                    <ul>
                        <li>
                            <span class="lew">日期</span>
                            <span class="lew">是否节假日</span>
                            <span class="lew">星期</span>
                            <span class="rew">{{ props.Fromobj.rwlx == '52' ? '值班部门' : '值班人员' }}</span>
                        </li>
                        <li v-for="(it, index) in bmxxlist" :key="it">
                            <span class="lew">{{ it.day }}</span>
                            <span class="lew">{{ it.dayOff == '2' ? '工作日' : '节假日' }}</span>
                            <span class="lew">{{ weekValidate(it.day) }}</span>
                            <span class="rew inpt">
                                <el-input v-if="props.Fromobj.rwlx == '52'" v-model="it.deptname" readonly autosize
                                    type="textarea" style="width: 90%;margin-right: 10px;"></el-input>
                                <el-input v-if="props.Fromobj.rwlx == '53'" v-model="it.username" readonly autosize
                                    type="textarea" style="width: 90%;margin-right: 10px;"></el-input>
                                <el-button @click="ChooesDdld(index, it)" type="primary">
                                    <span>选择</span>
                                </el-button>
                            </span>
                        </li>
                    </ul>
                </div>
            </template>
            <template #footer>

                <el-popconfirm v-if="props.Fromobj.rwid" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                    title="是否确定要提交?" @confirm="saveBtn">
                    <template #reference>
                        <el-button type="primary" :loading="saveloading">
                            <el-icon>
                                <DocumentChecked />
                            </el-icon>
                            <span>确认提交</span>
                        </el-button>
                    </template>
                </el-popconfirm>
                <el-button @click="handleClose" type="primary">
                    <el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span>
                </el-button>

            </template>
        </MOSTY.FromPage>

        <!-- 选择部门 -->
        <ChooseDept :formInfo="taskList" :showDdld="showJkssbm" :orgLevels="orgLevels" :parentId="deptId"
            @closezzjg="closeJhss" @listdata="getSonValue" :zzlx="zzlx" />
        <!--选择人员  -->
        <ChooseUser v-model="showPeople" :Single="false" :data="memberList" :deptId="deptcode" :searchType="'04'"
            @choosedUsers="getSonValue" :zzlx="zzlx" />
    </div>
</template>

<script setup>
// 引入
import {
    ref,
    onMounted,
    defineProps,
    defineEmits,
} from "vue";
import { getItem } from "@/utils/storage";
import { timeValidate, weekValidate } from "@/utils/tools.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import ChooseDept from "@/components/MyComponents/ChooseDept/Departbm.vue";
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute();
const taskList = ref([])
const showJkssbm = ref(false)
const loading = ref(false); //新增保存按钮截流
const bmxxlist = ref([])
const ruleFormRef = ref();
const zzlx = ref(null);
const ruleForm = ref({});
const emits = defineEmits(["changeAddVi", "changeclose"]);
const saveloading = ref(false);
const showPeople = ref(false);
const memberList = ref([]); //单选多选
const deptId = ref(getItem("deptId").ssdwid);
const deptcode = ref(getItem("deptId").ssbmid);
const orgLevels = ref(getItem("deptId").orgLevel);
const props = defineProps({

    Fromobj: Object,
    xqobj: Object
});
//获取详情
onMounted(() => {
    if (props.Fromobj.rwid) {
        if (props.Fromobj.rwlx == '52') {
            getzbbmList(props.Fromobj.rwid)
        } else {
            getzbryList(props.Fromobj.rwid)
        }

    }
});
//办公室根据任务制定下一周期的值班部门查询接口
function getzbbmList(id) {
    getApi({ rwid: id }, '/mosty-jcgl/onDuty/getDeptNextWeekDay').then((res) => {
        bmxxlist.value = res
    })

}
//值班部门根据任务制定下一周期的值班人员查询接口
function getzbryList(id) {
    getApi({ rwid: id }, '/mosty-jcgl/onDuty/getUserNextWeekDay').then((res) => {
        bmxxlist.value = res
    })

}
function ChooesDdld(val, item) {
    zzlx.value = val
    deptcode.value = null
    deptId.value = null
    if (props.Fromobj.rwlx == '52') {
        deptId.value = item.orgid
        taskList.value = item.deptidList ? item.deptidList : []
        showJkssbm.value = true
    } else {
        deptcode.value = item.deptid
        memberList.value = item.useridList ? item.useridList : []
        showPeople.value = true
    }

}
function closeJhss() {
    taskList.value = []
    showJkssbm.value = false
}
function getSonValue(val) {
    let userarr = [];
    if (props.Fromobj.rwlx == '52') {
        for (let i = 0; i < val.length; i++) {
            const element = val[i];
            userarr.push(element.orgName);
        }
        bmxxlist.value[zzlx.value].deptidList = val.map((item) => {
            return item.id;
        });
        bmxxlist.value[zzlx.value].deptname = userarr.toString();

    } else {
        for (let i = 0; i < val.length; i++) {
            const element = val[i];
            userarr.push(element.userName);
        }
        bmxxlist.value[zzlx.value].useridList = val.map((item) => {
            return item.id;
        });
        bmxxlist.value[zzlx.value].username = userarr.toString();

    }

}


// 关闭
const handleClose = () => {
    router.go(-1);
};


function saveBtn() {
    let isTrue = false
    if (props.Fromobj.rwlx == '52') {
        bmxxlist.value.forEach(item => {
            if (!item.deptidList || (item.deptidList && item.deptidList.length < 1)) {
                //有部门未选择
                isTrue = true
            }
        })
        if (isTrue) {
            ElMessage.warning("请选择每天的值班部门");
        } else {
            saveloading.value = true
            let obj = {
                id: bmxxlist.value[0].dutyId,
                dutyDeptList: bmxxlist.value.map(item => { return { 'deptidList': item.deptidList, 'day': item.day, 'dayOff': item.dayOff } })
            }
            saveFrom(obj, '/mosty-jcgl/onDuty/addDutyDept')
        }
    } else {
        bmxxlist.value.forEach(item => {
            if (!item.useridList || (item.useridList && item.useridList.length < 1)) {
                //有部门未选择
                isTrue = true
            }
        })
        if (isTrue) {
            ElMessage.warning("请选择每天的值班人员");
        } else {
            saveloading.value = true
            let obj = {
                id: bmxxlist.value[0].dutyDeptId,
                dutyUserList: bmxxlist.value.map(item => { return { 'useridList': item.useridList, 'day': item.day } })
            }
            saveFrom(obj, '/mosty-jcgl/onDuty/addDutyUser')
        }
    }

}
function saveFrom(obj, url) {
    saveloading.value = true
    postApi(obj, url).then(res => {
        ElMessage.success("提交成功");
        let params = {
            id: props.Fromobj.rwid,
            sfyd: "1",
            clzt: "02"
        };
        postApi(params, "/mosty-jcgl/rw/updateRw")
            .then((res) => {
                router.go(-1);
            });
    }).finally(() => {
        saveloading.value = false
    })
}
</script>

<style lang="scss" scoped>
.fj {
    .el-form {
        padding: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
        // width: 1170px;
        justify-content: flex-end;
    }

    .from_fix {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        margin-top: 10px;

        // .el-form-item--default .el-form-item__content {
        //   flex-wrap: nowrap !important;
        // }

        .el-input {
            width: 100%;
        }
    }
}

::v-deep .el-form-item__content {
    flex-wrap: nowrap !important;
}

.config {
    margin: 20px;

    >ul {
        width: 100%;

        >li {
            display: flex;
            justify-content: start;
            border-bottom: 1px solid var(--el-color-primary);
            color: #000;

            >span {
                display: block;
                padding: 10px;

                line-height: 32px;
            }

            .lew {
                text-align: center;
                width: 10%;
            }

            .rew {
                text-align: left;
                width: 70%;
            }

            .inpt {
                display: flex;
            }
        }
    }

    .el-form {
        width: 1341px;
        padding: 10px;
        margin: 10px auto;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .el-form-item {
        text-align: center;
    }
}

.pxdx_box {
    width: 500px;
}

::v-deep .el-dialog__body {
    overflow: auto !important;
    max-height: 540px !important;
}

.titleBox {
    align-items: center;
    margin: 0;
    padding: 0;
    height: 60px;
    border: 1px solid rgb(32, 75, 54);
    padding: 20px;
}

.form>div {
    position: relative;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    div {
        display: flex;
        align-items: center;

        .el-select {
            width: 65%;
        }
    }
}

.el-input {
    width: 75%;
}

.two .el-input {
    width: 65%;
}

.three {
    justify-content: flex-start !important;

    .el-select {
        width: 15%;
    }
}

.four {
    display: flex;
    align-items: center;

    span {
        width: 5%;
    }

    .el-textarea__inner {
        width: 95%;
    }
}

.group {
    margin-top: 50px;
    // background-color: red;
    position: relative;
}

.fj {
    margin-top: 50px;
    width: 100%;

    .content {
        width: 100%;
        display: flex;
        padding: 20px;

        div {
            display: flex;
            width: 85%;
            align-items: center;
        }

        justify-content: space-between;
    }
}

.jc {
    margin-top: 50px;
}

.tabBox {
    height: 300px !important;
}

.el-table {
    height: 300px !important;
    border: 1px solid var(--el-color-primary);
}

.el-form-item__content {
    flex-wrap: nowrap;
}

.el-collapse {
    border-color: var(--el-color-primary);
    // height: 460px;
}

::v-deep .el-collapse-item__header {
    border-bottom-color: var(--el-color-primary);
    color: #000 !important;
}

::v-deep .el-collapse-item__header.is-active {
    border-bottom-color: transparent;
}

::v-deep .el-date-editor .el-range-input {
    color: #0c0b0b !important;
}

::v-deep .el-range-editor.is-disabled input {
    background-color: #d3dbdd !important;
}

::v-deep .el-range-editor.is-disabled {
    background-color: #d3dbdd !important;
}
</style>
