<!--
@ 作者: 秦东
@ 时间: 2025-11-26 10:13:15
@ 备注: 编辑角色使用人
-->
<script lang='ts' setup>
import type { getSystemPower,AppPowerTree,systemList } from "@/api/system/roleapi/types";
import { savePickRoleMan,getPowerPageUser,getRolePeople } from "@/api/system/roleapi/postrole";
import type {  TreeInstance  } from 'element-plus'
import type {RoleListTree} from '@/api/role/types'
import { Search } from '@element-plus/icons-vue'
import SvgIcon from "@/components/SvgIcon/index.vue";

const squareUrl = ref<string>(
  "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
);

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    org: {
        type: Array as () => orgInfo[],
        default: () => []
    },
    roleInfo: {
        type: Object as () => RoleListTree,
        default: () => ({})
    }
})
const userLoading = ref(false)
const emit = defineEmits(['update:show'])
// const isShowsdf = computed(() => {
//     if(props.show){
//         getPowerPageUserSub()
//         // getPickUser()
//     }
//     return props.show
// })

const isShowsdf = computed({
    get(){
        console.log("------------------->",props.show)
        
        return props.show
    },
    set(val){
        emit('update:show', val)
    }
})


const roleInfo = computed(() => {
    return props.roleInfo
})
const orgTree = computed(() => {
    return props.org
})
const treeBoxHeightOrg = ref(400)
const treeRefOrgUser = ref<TreeInstance>()
const propsOrg = {
  value: 'id',
  label: 'name',
//   disabled:'status',
  children: 'child',
}
const userPage = reactive({
    page: 1,
    pageSize: 20,
    orgId: '',
    name: '',
    total: 0
})
const userPowerList = ref<systemList>({})	//人员树
const userPowerListPick = ref<systemList[]>([])	//人员树
const pickUserKey = ref<string[]>([])	//选择的使用人key
const searchQuery = ref('')	//行政组织搜索
//搜索行政组织
const onQuePeople = (query: string) => {
    console.log(query)
  treeRefOrgUser.value!.filter(query)
}
const filterMethodOrg = (query: string, node: any) => {
	return node.name!.includes(query)
}
/**
@ 作者: 秦东
@ 时间: 2025-11-26 10:19:05
@ 功能: 关闭弹窗
*/
const closeDialog = () => {
    emit('update:show', false)
    userPowerList.value =
    pickUserKey.value=[]
    userPowerListPick.value=[]
    userPage.page = 1
    userPage.name = ''
    userPage.orgId = ''
}
/**
@ 作者: 秦东
@ 时间: 2025-11-26 16:32:58
@ 功能: 选择行政组织
*/
const pickOrgTree = (node: any) => {
    userPage.page = 1
    userPage.name = ''
    userPage.orgId = node.id
    console.log(userPage)
    getPowerPageUserSub()
}

const getPowerPageUserSub = () => {
	userLoading.value = true
    getPowerPageUser(userPage).then(({data})=>{
        console.log("获取平台授权项目用户------->",data)
		userPowerList.value = data.list
        userPage.total = data.total
        userLoading.value = false
    })
}
const pickName = ref("")
const getPickUser = () => {
    getRolePeople({
        roleId: roleInfo.value.id*1,
        name: pickName.value
    }).then(({data})=>{
        console.log("获取角色使用人------->",data)
        if(data.list && Array.isArray(data.list)){
           userPowerListPick.value = data.list
        }else{
            userPowerListPick.value = []
        }
        
        pickUserKey.value = data.userKey
    })
}
const pickUserInfo = (item: any) => {
    let isPick = true
    if(pickUserKey.value.includes(item.id)){
        pickUserKey.value = pickUserKey.value.filter((i) => i !== item.id)
        isPick = false
    }else{
        pickUserKey.value.push(item.id)
        isPick = true
    }
    if(isPick){
        userPowerListPick.value.push(item)
    }else{
        userPowerListPick.value = userPowerListPick.value.filter((i) => i.id !== item.id)
    }
}
//判断是否已经选中
const isPick = (item: any) => {
    return pickUserKey.value.includes(item.id)
}
//删除选中的使用人
const delUserPick = (item: any) => {
    pickUserKey.value = pickUserKey.value.filter((i) => i !== item.id)
    userPowerListPick.value = userPowerListPick.value.filter((i) => i.id !== item.id)
}
/**
@ 作者: 秦东
@ 时间: 2025-11-27 10:18:29
@ 功能: 保存人员
*/
const saveRolePeople = () => {
    console.log("保存角色使用人------->",roleInfo.value.id*1,pickUserKey.value)
    savePickRoleMan({
        roleId: roleInfo.value.id*1,
        userKey: pickUserKey.value
    }).then((data)=>{
        console.log("保存角色使用人------->",data)
        if(data.code === 0){
            ElMessage.success("保存成功")
            closeDialog()
        }else{
            ElMessage.error(data.msg || "保存失败")
        }
    })
}
watch(() => props.show, (newVal) => {
    if(newVal){
        getPowerPageUserSub()
        getPickUser()
    }
},{
    immediate: true
})
watch(() => userPage.name, (newVal) => {
    getPowerPageUserSub()
},{
    immediate: true
})
onMounted(() => {
    // getPowerPageUserSub()
    // getPickUser()
})
</script>
<template>
    <el-dialog
        v-model="isShowsdf"
        :title="`编辑<<${roleInfo.label}>>角色使用人`"
        width="800"
        destroy-on-close
        :before-close="closeDialog"
    >
        <el-row class="dialog-row" :gutter="10">
            <el-col  :span="8">
                <div class="quan">
                    <div class="searchBox">
                        <el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :prefix-icon="Search" @input="onQuePeople" clearable />
                    </div>
					<el-tree-v2
                        ref="treeRefOrgUser"
                        style="max-width: 100%;"
                        :data="orgTree"
                        :props="propsOrg"
                        :filter-method="filterMethodOrg"
                        :height="treeBoxHeightOrg"
                        :v-loading="roleLoading"
                        :highlight-current="true"
                        :check-on-click-node="true"
                        :expand-on-click-node="false"
                        @node-click="pickOrgTree"
                    >
					</el-tree-v2>
                </div>
            </el-col>
            <el-col  :span="9">
                <div class="quan">
                    <div class="searchBox">
                        <el-input v-model="userPage.name" placeholder="请输入姓名、工号" :prefix-icon="Search" clearable />
                    </div>
                    <el-scrollbar v-loading="userLoading" height="370px">
                        <div v-for="item in userPowerList" :key="item.id"  :class="isPick(item)?'userBox active':'userBox'"  @click="pickUserInfo(item)">
							<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" />
							<div class="userInfo">
                                <el-text type="primary" >{{ item.name }}({{ item.code }})</el-text>
                                <el-text type="primary" >{{ item.org }}</el-text>
                            </div>
                            <div style="width: 40px;">
                                
                            </div>
						</div>                        
                    </el-scrollbar>
                    <div class="paginationBox">
                       
                        <el-pagination
							v-model:current-page="userPage.page"
                            :page-size="userPage.pageSize"
                            :pager-count="7"
                            layout="prev, pager, next"
                            :total="userPage.total"
							@change="getPowerPageUserSub"
                        />
                    </div>
                </div>
            </el-col>
            <el-col  :span="7">
                <div class="quan">
                    <div class="searchBox">
                        <!-- <el-input v-model="pickName" placeholder="请输入姓名、工号" :prefix-icon="Search" clearable /> -->
                         已经选择的使用人
                    </div>
                    <el-scrollbar height="415px">
                        <div v-for="item in userPowerListPick" :key="item.id"  class="userBox" >
							<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" />
							<div class="userInfo">
                                <el-text type="primary" >{{ item.name }}({{ item.code }})</el-text>
                                <el-text type="primary" >{{ item.org }}</el-text>
                            </div>
                            <div>
                                <svg-icon icon-class="dels" @click="delUserPick(item)" />
                            </div>
						</div>                        
                    </el-scrollbar>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="saveRolePeople">
                确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style  lang='scss' scoped>
.dialog-row{
    width: 100%;
    .quan{
        width: 100%;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .searchBox{
        padding: 5px 10px 5px 10px;
    }
    
}
.userBox{
            width: 100%;
           
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 10px;
            border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2);
			
            .userInfo{
                width: 60%;
            }
            div{
                span{
                    display: flex;
                    width: 100%;
                    padding: 0 5px;
                    color:rgba($color: #000000, $alpha: 0.6);
                }
            }
            svg{
                cursor: pointer;
                color: #FF0000;
            }
}
.userBox.active {
    background-color: #a0cfff;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>
