<template>
    <div>
        <el-dialog :title="'人员选择'" width="1200px" :show-close="false" v-model="props.modelValue" @close="closeDialog"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <!-- 组织机构信息 -->
            <div class="flex just-between treeBox2 ww100">
                <div class="tabBox" :class="Single ? 'table-box-radio' : ''" style="margin-top: 0px;height: 100%;">
                    <el-table stripe ref="UserRefs" v-loading="tableloading" @selection-change="handleSelectionChange"
                        :data="tableData" @row-click="changecoose" border :row-key="keyid" v-model="currentRow"
                        height='57vh'>
                        <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!Single" />
                        <el-table-column width="55" #default="{ row }" v-else>
                            <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
                        </el-table-column>
                        <el-table-column prop="username" align="center" label="姓名"></el-table-column>
                        <el-table-column prop="orgname" align="center" label="所属单位"></el-table-column>
                        <el-table-column prop="deptname" align="center" label="所属部门"></el-table-column>
                        <el-table-column align="center" label="人员类型">
                            <template #default="{ row }">
                                <dict-tag :options="D_BZ_RYLB_NEW" :value="row.peopletype" :tag="false" />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="cskbox" v-if="!Single">
                    <!-- 穿梭按钮 -->
                    <el-icon @click="pushRight">
                        <DArrowRight />
                    </el-icon>
                    <el-icon @click="pushLeft">
                        <DArrowLeft />
                    </el-icon>
                </div>
                <div class="listbox" v-if="!Single">
                    <!-- 选中的组员 -->
                    <ul>
                        <li :class="item.active ? 'activ' : ''" v-for="(item, index) in rightList" :key="item"
                            @click="clicklist(item, index)">
                            {{ item.username }}
                        </li>
                    </ul>
                </div>
            </div>
            <template #footer>
                <div class="flex just-between">
                    <el-pagination class="pagination" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page="listQuery.pageCurrent"
                        :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                        layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="handleSave">
                            <el-icon>
                                <DocumentChecked />
                            </el-icon>
                            <span>确定</span>
                        </el-button>
                        <el-button type="primary" @click="clearlist">
                            <el-icon>
                                <DocumentRemove />
                            </el-icon>
                            <span>清空</span>
                        </el-button>
                        <el-button @click="closed" type="primary">
                            <el-icon>
                                <DocumentDelete />
                            </el-icon>
                            <span>关闭</span>
                        </el-button>
                    </span>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
// 引入
import { defineProps, onMounted, ref, defineEmits, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
const rightList = ref([]); //右边列表数据
const diIndex = ref(); //点击右边列表数据
const leftList = ref([]); //存放右边被点击的数据
const total = ref(0);
const tableData = ref([]);
const { proxy } = getCurrentInstance()
const { D_BZ_RYLB_NEW } = proxy.$dict("D_BZ_RYLB_NEW")
const ridioIndex = ref(null);
const UserRefs = ref(null);
const tableloading = ref(false);
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 20,
});
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true
    },
    titleValue: {
        type: String,
        default: "选择人员"
    },
    ssdwid: {
        type: String,
        default: ""
    },
    hazardousfactors: {
        type: String,
        default: ""
    },
    // 选择成员
    data: {
        type: Array,
        default: []
    },

    //是否单选
    Single: {
        type: Boolean,
        default: true
    },

    key: {
        type: Number,
        default: 0
    },

});
const currentRow = ref(-1); //选中的数据
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
const closed = () => {
    UserRefs.value.clearSelection();
    leftList.value = [];
    rightList.value = [];
    currentRow.value = [];
    listQuery.value.loginName = []
    emits("update:modelValue", false);
};
const keyid = (row) => {
    return row.id;
};
onMounted(() => {
    UserRefs.value = null
    ridioIndex.value = null
    listQuery.value.ssdwid = props.ssdwid
    listQuery.value.hazardousfactors = props.hazardousfactors
    handleFilter();
})


const handleFilter = () => {
    listQuery.value.pageCurrent = 1;
    getListData();
};
const getListData = async () => {
    tableData.value = [];
    tableloading.value = true;
    getApi(listQuery.value, '/mosty-jcgl/occHazardOpr/getOprPage').then(res => {
        if (res) {
            tableData.value = res?.records;
            total.value = Number(res.total);
            tableloading.value = false;
            if (props.data && props.data.length > 0) {
                multipleUser(props.data);
            }
        }

    })


};
// 列表回显
function multipleUser(row) {
    // 左右清除历史缓存
    rightList.value = []
    tableData.value.forEach((val) => {
        UserRefs.value.toggleRowSelection(val, false);
    });
    if (row) {
        if (props.Single) {
            ridioIndex.value = row;
        } else {
            row.forEach((item) => {
                getApi({ id: item }, `/mosty-base/userFeign/getUserDetail`).then(res => {
                    if (res) {
                        rightList.value.push(res)
                        let map = new Map();
                        for (let item of rightList.value) {
                            map.set(item.id, item);
                        }
                        rightList.value = [...map.values()];
                    }
                })
                tableData.value.forEach((val) => {
                    if (item == val.id) {
                        UserRefs.value.toggleRowSelection(val, true);
                    }
                });
            });
        }
    } else {
        if (props.Single) {
            ridioIndex.value = null;
        }
    }
}
const handleSelectionChange = (val) => {
    currentRow.value = val;
};
//每一项点击事件
function changecoose(val) {
    if (props.Single) {
        ridioIndex.value = val.id
    } else {
        if (currentRow.value && currentRow.value.length > 0) {
            let rowid = []
            rowid = currentRow.value.filter(it => { return it.id == val.id })
            if (rowid.length > 0) {
                UserRefs.value.toggleRowSelection(val, false);

            } else {
                UserRefs.value.toggleRowSelection(val, true);
            }

        } else {
            UserRefs.value.toggleRowSelection(val, true);
        }
    }

}
//点击右箭头
function pushRight() {
    if (rightList.value.length == 0) {
        rightList.value = currentRow.value;
    } else {
        rightList.value.push(...currentRow.value)
        let map = new Map();
        for (let item of rightList.value) {
            map.set(item.id, item);
        }
        rightList.value = [...map.values()];
    }

}
//点击左箭头
function pushLeft() {
    //遍历右边选中的数据
    for (let i = 0; i < leftList.value.length; i++) {
        const e = leftList.value[i];
        if (e.id) {
            UserRefs.value.toggleRowSelection(e.id, false);
        }
        rightList.value.forEach((item, index) => {
            if (e.id == item.id) {
                rightList.value.splice(index, 1);
            }
        });
        if (currentRow.value.length > 0) {
            currentRow.value.forEach((item, index) => {
                if (e.id == item.id) {
                    currentRow.value.splice(index, 1);
                }
            });
        }

    }
}
//点击右边列表的每一项
function clicklist(item, index) {
    item.active = !item.active;
    diIndex.value = index;
    if (item.active) {
        leftList.value.push(item);
    } else {
        for (let i = 0; i < leftList.value.length; i++) {
            const element = leftList.value[i];
            if (element.id == item.id) {
                leftList.value.splice(i, 1);
            }
        }
    }
}
//点击清空列表
function clearlist() {
    leftList.value = [];
    rightList.value = [];
    currentRow.value = [];
    UserRefs.value.clearSelection();
}
const handleSave = () => {
    if (props.Single) {
        const info = tableData.value.find((item) => {
            return item.id === ridioIndex.value;
        });
        emits("choosedUsers", [info]);
        closed();
    } else {
        emits("choosedUsers", rightList.value);
        closed();
    }
    UserRefs.value.clearSelection();

};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
    listQuery.value.pageCurrent = currentPage;
    getListData();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
    listQuery.value.pageSize = currentSize;
    getListData();
};

</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-form--inline {
    padding-left: 0 !important;
}

::v-deep .el-radio__label {
    display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
    display: none !important;
}

:v-deep .el-tree-node {
    .is-leaf+el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
}

::v-deep .el-overlay-dialog {
    overflow: hidden !important;
}

:v-deep .el-checkbox .el-checkbox__inner {
    display: none;
}

:v-deep .wrap .el-checkbox__input.is-disabled {
    display: none;
}

.el-form {
    margin-top: 10px;
    display: flex;
    //   flex-wrap: wrap;
    justify-content: space-between;
}

.search {
    width: 300px;
    display: flex;
    position: absolute;
    right: 20px;
    top: 20px;
}

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

.flx {
    display: flex;
    width: 100%;

    .el-button {
        margin-left: 10px;
    }
}

.box {
    width: 100%;
    height: 516px;
    overflow-y: hidden;
    border: 1px solid var(--el-color-primary);
    display: flex;
    justify-content: space-between;
}

.treeBox2 {
    overflow: auto;
}

.cskbox {
    width: 40px;
    padding: 107px 0;
    margin-right: 20px;

    .el-icon {
        width: 4em !important;
        height: 6em !important;
    }

    .el-icon svg {
        width: 3em !important;
        height: 3em !important;
    }
}

.listbox {
    border: 1px solid var(--el-color-primary);
    width: 45%;
    overflow-y: scroll;

    ul>li {
        padding: 4px 10px;
        box-sizing: border-box;
    }

    .activ {
        background-color: var(--el-color-primary);
    }
}

.bot_font {
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #ffff;
    margin-top: 10px;
}

.fenye {
    margin-top: 10px;
}

::v-deep .el-dialog__body {
    overflow: auto !important;
    height: 600px !important;
}
</style>