<template>
    <div :class="ui" class="hc-tasks-user">
        <div class="tasks-user-box">
            <div class="tag-user-list" @click="showModalClick">
                <template v-for="(item,index) in UserDataList" :key="index">
                    <el-tag>{{ setCheckboxUserName(item) }}</el-tag>
                    <HcIcon v-if="(UserDataList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag"/>
                </template>
                <div v-if="UserDataList.length <= 0" class="tasks-placeholder"> 点击这里选择任务人</div>
            </div>
        </div>

        <!--选择任务人-->
        <el-dialog v-model="showModal" class="hc-modal-border hc-modal-nop" destroy-on-close draggable title="选择任务人"
                   width="62rem">
            <div class="hc-tasks-user-modal-content-box">
                <div class="tree-box">
                    <el-scrollbar>
                        <ElTree :data="ElTreeData" :default-expanded-keys="[0]" :props="ElTreeProps" accordion
                                class="hc-tree-node-box" highlight-current node-key="roleId" @node-click="ElTreeNodeClick"/>
                    </el-scrollbar>
                </div>
                <div class="user-box">
                    <div class="y-user-list-box">
                        <div class="title-box">
                            <div class="title">可选择</div>
                        </div>
                        <div class="user-list">
                            <el-scrollbar>
                                <el-checkbox-group v-model="checkboxUserList">
                                    <template v-for="item in signUserList">
                                        <div class="user-item checkbox-li">
                                            <el-checkbox
                                                :label="`${item['certificateUserName']}-${item['certificateUserId']}`">
                                                <div class="item-user-name">{{ item['certificateUserName'] }}</div>
                                            </el-checkbox>
                                        </div>
                                    </template>
                                </el-checkbox-group>
                            </el-scrollbar>
                        </div>
                    </div>
                    <div class="s-user-list-box">
                        <div class="title-box">
                            <div class="title">已选择({{ checkboxUserList.length }})</div>
                        </div>
                        <div class="user-list">
                            <el-scrollbar>
                                <template v-for="(item,index) in checkboxUserList" :key="index">
                                    <el-tag closable @close="delCheckboxUser(index)">{{ setCheckboxUserName(item) }}
                                    </el-tag>
                                </template>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="showModal = false">
                        <HcIcon name="close"/>
                        <span>取消</span>
                    </el-button>
                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
                        <HcIcon name="check"/>
                        <span>确定</span>
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import tasksFlowApi from '~api/tasks/flow';
import {getArrValue, deepClone} from "js-fast-way"

//参数
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    //选中的用户数组
    users: {
        type: String,
        default: ''
    },
    projectId: {
        type: [String, Number],
        default: ''
    },
    contractId: {
        type: [String, Number],
        default: ''
    }
})

//变量
const showModal = ref(false)
const sequenceModal = ref(false)
const checkboxUserList = ref([])
const UserDataList = ref([])
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)

//树数据
const ElTreeProps = {children: 'childRoleList', label: 'roleName'}
const ElTreeData = ref([{
    roleName: '全部人员',
    roleId: 0,
    childRoleList: [],
    signPfxFileList: []
}])

//监听
watch(() => [
    props.users,
    props.projectId,
    props.contractId,
], ([users, pid, cid]) => {
    projectId.value = pid
    contractId.value = cid
    setUserDataList(users)
})

//渲染完成
onMounted(() => {
    setUserDataList(props.users)
    queryAllRoleList()
})

//处理用户数据
const setUserDataList = (users) => {
    if (users) {
        const usersArr = users.split(',')
        UserDataList.value = usersArr
        checkboxUserList.value = usersArr
    } else {
        UserDataList.value = []
        checkboxUserList.value = []
    }
}

//展开弹窗
const showModalClick = () => {
    showModal.value = true
}

//获取系统所有角色划分
const signUserList = ref([])
const queryAllRoleList = async () => {
    const {error, code, data} = await tasksFlowApi.queryAllRoleList({
        contractId: contractId.value
    })
    //处理数据
    if (!error && code === 200) {
        let signList = [], dataArr = getArrValue(data)
        ElTreeData.value[0].childRoleList = dataArr
        if (dataArr.length > 0) {
            dataArr.forEach(item => {
                signList = signList.concat(item.signPfxFileList)
            })
        }
        ElTreeData.value[0].signPfxFileList = signList
        signUserList.value = signList
    } else {
        signUserList.value = []
        ElTreeData.value[0].childRoleList = []
        ElTreeData.value[0].signPfxFileList = []
    }
}

//树被点击
const ElTreeNodeClick = (data) => {
    signUserList.value = getArrValue(data?.signPfxFileList)
}

//处理已选择的用户问题
const setCheckboxUserName = (item) => {
    if (item) {
        const itemArr = item.split('-')
        if (itemArr.length > 0 && itemArr[0]) {
            return itemArr[0]
        } else {
            return ''
        }
    } else {
        return ''
    }
}

//删除已选择的用户
const delCheckboxUser = (index) => {
    checkboxUserList.value.splice(index, 1);
}

//事件
const emit = defineEmits(['change'])

//确认选择
const sureSignUserLoading = ref(false)
const sureSignUserClick = () => {
    let newUser = [], newUserId = [], users = '';
    const dataList = deepClone(checkboxUserList.value)
    UserDataList.value = dataList
    if (dataList.length > 0) {
        sureSignUserLoading.value = true
        //封装数据
        dataList.forEach(item => {
            const itemArr = item.split('-')
            if (itemArr.length > 0 && itemArr[0]) {
                users = users ? `${users},${item}` : item
                newUser.push({
                    userId: itemArr[1],
                    userName: itemArr[0],
                })
                newUserId.push(itemArr[1])
            }
        })
        showModal.value = false
        sureSignUserLoading.value = false
        emit('change', newUser, newUserId, users)
    } else {
        window.$message?.warning('请先选择任务人员，或点击取消')
    }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>

<style lang="scss">
.hc-tasks-user .tasks-user-box .tag-user-list {
    .el-tag {
        --el-icon-size: 14px;
        padding: 0 10px;
        height: 26px;
        margin: 4px 0;
    }
}
.hc-tasks-user-modal-content-box {
    .checkbox-li .el-checkbox {
        width: 100%;
        .el-checkbox__input {
            position: absolute;
            right: 0;
            .el-checkbox__inner {
                width: 18px;
                height: 18px;
                &:after {
                    height: 9px;
                    left: 6px;
                    top: 2px;
                }
            }
        }
        .el-checkbox__label {
            flex: 1;
            padding-left: 0;
            padding-right: 20px;
        }
    }
    .user-list {
        .el-tag {
            margin-right: 10px;
            margin-top: 12px;
        }
    }
}
</style>
