<template>
    <el-dialog v-model="showDialog" title="人员选择" append-to-body top="5vh" :close-on-click-modal="false" width="1080px" draggable>
        <div class="transfer-user-container">
            <div class="user-container">
                <div class="user-table-container">
                    <div class="user-table-header">用户列表</div>
                    <el-form :inline="true" :model="queryForm" class="search-form">
                        <el-form-item>
                            <el-input v-model="queryForm.username" placeholder="用户名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="queryForm.mobile" placeholder="手机号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <fast-select v-model="queryForm.gender" dict-type="user_gender" clearable placeholder="性别"></fast-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getDataList">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table class="user-table" v-loading="dataListLoading" :data="dataList" height="100%" border style="width: 100%" @selection-change="selectionChangeHandle">
                        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                        <el-table-column prop="username" label="用户名" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="realName" label="姓名" header-align="center" align="center"></el-table-column>
                        <fast-table-column prop="gender" label="性别" dict-type="user_gender"></fast-table-column>
                    </el-table>
                    <el-pagination
                    style="margin: 10px;"
                        :current-page="page"
                        :page-sizes="pageSizes"
                        :page-size="limit"
                        :total="total"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="sizeChangeHandle"
                        @current-change="currentChangeHandle"
                    ></el-pagination>
                </div>
                <div class="user-btns-container">
                    <el-button type="primary" @click="handleToLeft" :disabled="!currentSelectRight.length">
                        <el-icon><ArrowLeftBold /></el-icon>
                    </el-button>
                    <el-button type="primary" @click="handleToRight" :disabled="!dataListTableSelection!.length">
                        <el-icon><ArrowRightBold /></el-icon>
                    </el-button>
                </div>
                <div class="user-target-container">
                    <div class="user-target-header">选中列表（点击选中）</div>
                    <div class="user-target-list">
                        <div class="user-target-item" :class="{active: currentSelectRight.includes(item.username as string)}" v-for="(item,index) in rightList" :key="index" @click="handleClickRight(item)">{{ item.realName }}</div>
                    </div>
                </div>
            </div>
        </div>
			
        <template #footer>
            <el-button @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="handleSave">确定</el-button>
		</template>
    </el-dialog>
</template>

<script setup lang="ts" name="FastTransferUser">
    import { computed,ref,watch,PropType } from 'vue';
    import useFastTransferUser from './useFastTransferUser';
    const props = defineProps({
        modelValue: Boolean,
        selectList: {
            type: Array as PropType<typeof dataList.value>,
            default: () => ([])
        },
    })
    const emits = defineEmits(['update:modelValue','confirm']);
    const showDialog = computed({
        get: () => props.modelValue,
        set: val => emits('update:modelValue',val)
    })
    const { getDataList,selectionChangeHandle,sizeChangeHandle,currentChangeHandle,queryForm,dataList,dataListLoading,page,pageSizes,limit,total,dataListTableSelection,resetData } = useFastTransferUser();
    watch(showDialog,val => {
        if(val) {
            resetData();
            currentChangeHandle(1);
            rightList.value = props.selectList.map(i => {
                return {
                    ...i
                }
            });
            currentSelectRight.value = [];
        }
    })
    const rightList: typeof dataList = ref([]);
    const handleToRight = () => {
        const primaryKeyList = rightList.value.map(i => i.username);
        rightList.value = dataListTableSelection!.value?.reduce((pre,cur) => {
            if(!primaryKeyList.includes(cur.username)) pre.push(cur);
            return pre;
        },rightList.value);
    }
    const currentSelectRight = ref<string[]>([]);
    const handleToLeft = () => {
        rightList.value = rightList.value.reduce((pre,cur) => {
            if(!currentSelectRight.value.includes(cur.username as string)) pre.push(cur);
            return pre;
        },[] as typeof dataList.value);
        currentSelectRight.value = [];
    }
    const handleClickRight = (item: typeof dataList.value[number]) => {
        const index = currentSelectRight.value.findIndex(i => i === item.username)
        if(currentSelectRight.value.includes(item.username as string)) currentSelectRight.value.splice(index,1);
        else currentSelectRight.value.push(item.username as string);
    }

    const handleSave = () => {
        emits('confirm',rightList.value);
        showDialog.value = false;
    }
</script>

<style lang="scss" scoped>
.transfer-user-container {
    display: flex;
    flex-direction: column;
    height: 75vh;
    .user-container {
        flex: 1;
        display: flex;
        overflow: auto;
        .user-table-container {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            border: 1px solid #ebeef5;
            box-sizing: border-box;
            border-radius: 4px;
            overflow: hidden;
            .user-table-header {
                height: 40px;
                line-height: 40px;
                background: #f5f7fa;
                border-bottom: 1px solid #ebeef5;
                box-sizing: border-box;
                padding: 0 10px;
            }
            .search-form {
                padding: 10px 10px 0;
            }
            :deep(.el-form-item--default) {
                margin-bottom: 10px;
            }

            .user-table {
                flex: 1;
            }
        }
        .user-btns-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100px;
            :deep(.el-button+.el-button) {
                margin-left: 0;
                margin-top: 10px;
            }
        }
        .user-target-container {
            width: 200px;
            display: flex;
            flex-direction: column;
            border: 1px solid #ebeef5;
            box-sizing: border-box;
            border-radius: 4px;
            overflow: hidden;
            .user-target-header {
                height: 40px;
                line-height: 40px;
                background: #f5f7fa;
                border-bottom: 1px solid #ebeef5;
                box-sizing: border-box;
                padding: 0 10px;
            }
            .user-target-list {
                flex: 1;
                overflow-y: auto;
                .user-target-item {
                    line-height: 40px;
                    padding: 0 10px;
                    border-top: 1px solid #ebeef5;
                    cursor: pointer;
                    &:first-child {
                        border-top: none;
                    }
                    &.active {
                        background: #ecf5ff;
                        color: #409eff;
                    }
                }
            }
        }
    }
}

</style>