<template>
    <div class="choose-role-main">
        <div class="import-data-top">
            <div style="display: flex;align-items: center;">
                <span v-show="roleList && roleList.length" style="margin-right: 40px;">{{$t('cs.common.text.alreadyChoose',{num: roleList.length})}}</span>
                <el-link v-show="roleList && roleList.length" type="primary"><span  @click.stop="clearRoleList">{{$t('cs.common.text.clear')}}</span></el-link>
            </div>
            <el-input
                :placeholder="`${$t('cs.common.text.searchPlaceholder')}...`"
                size="small"
                v-model="filterText"
                @keyup.enter.native="searchAllCompany"
                prefix-icon="el-icon-search"
                style="width:240px;"
            ></el-input>
        </div>
        <div style="height: calc(100% - 46px);display: flex; border: 1px solid #dcdfe6;box-sizing: border-box;flex-direction: column;" >
            <div v-show="treeData.length" class="choose-main-role-choose-all">
                <span>{{$t('cs.common.text.selectAll')}}</span>
                <el-checkbox @change="chooseAllRole" v-model="allChecked"></el-checkbox>
            </div>
            <div class="department-tree" ref="roleListBox">
                <!-- 默认左侧树 -->
                <el-tree ref="roleListTree" :class="[haveScroll && treeData.length ? 'g-noScroll' : '']" 
                    :empty-text="$t('cs.common.text.noData')" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" node-key="id" :default-expand-all="false"
                    :highlight-current="true" :data="treeData" :props="treeData" :current-node-key="currentNode" @node-click="treeClick">
                    <span class="tree-slot" slot-scope="{ data }" :title="data.name">
                    <!-- 资源表 -->
                    <span class="flex-align-center" @click.stop="chooseRole(data)">
                        <span class="tree-slot-content">
                        <span class="title">{{ data.name }}</span>
                        </span>
                        <el-checkbox @click.stop.native="clickStop($event)" @change="chooseRole(data,true)" v-model="data.checked"></el-checkbox>
                    </span>
                    </span>
                </el-tree>
            </div>
        </div>
        
    </div>
</template>
<script scoped>
// @ is an alias to /src
import  CoreAPI from "../../Common/JS/CoreAPI";
export default {
    props: {
        roleList: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data() {
        return {
            filterText: '',
            defaultExpandedKeys: [],
            currentNode: '',
            allChecked: false,
            haveScroll: false,
            treeData: []
        };
    },
    watch: {
        treeData: function(params) {
            this.treeHaveScroll();
        }
    },
    methods: {
        treeHaveScroll() {
            setTimeout(() => {
                this.$nextTick(() => {
                    this.haveScroll = this.$refs?.roleListBox?.offsetWidth == this.$refs?.roleListTree?.$el?.offsetWidth;
                });
            });
        },
        getAuthorizeRoleList(filterValue) {
            let _this = this;
            let postData = {
                systemId: CloudServiceCommon.Props.systemId
            };
            if(filterValue && filterValue != '') {
                postData.filterModel = {
                    "filterGroupModel": [
                        {
                            "filterFields": [
                                {
                                    "operationType": 10,
                                    "fieldType": 10,
                                    "fieldName": "name",
                                    "fieldValue": filterValue
                                }
                            ],
                            "logicType": 0
                        }
                    ]
                }
            }
            CoreAPI.getAuthorizeRoleList(postData).then(
                function (res) {
                    for(let i = 0; i < res.length; i++) {
                        res[i].checked = false;
                        if(_this.roleList && _this.roleList.length > 0) {
                            _this.roleList.forEach(function(target) {
                                target.roleId == res[i].id ? res[i].checked = true : ''
                            })
                        }
                    }
                    console.log(res)
                    _this.treeData = res
                    _this.checkRoleListDataState()
                },
                function (error) {
                    _this.$message.error(error.msg);
                }
            );
        },
        checkRoleListDataState() {
            let _this = this;
            for(var i = 0; i < _this.treeData.length; i++) {
                if(!_this.treeData[i].checked) {
                    return _this.allChecked = false;
                }
            }
            _this.allChecked = true;
        },
        treeClick(data) {
            let _this = this;
            data.checked = !data.checked
        },
        //回车搜索
        searchAllCompany() {
            let _this = this;
            //延迟5s执行搜索
            let timer = setTimeout(() => {
                this.$nextTick(() => {
                    let filterValue = _this.filterText.trim()
                    _this.getAuthorizeRoleList(filterValue)
                    clearTimeout(timer);
                    return;
                });
            }, 500);
        },
        chooseRole(item, isCheckBox){
            let hasTarget = false;
            let _this = this;
            !isCheckBox ? item.checked = !item.checked : ''
            _this.roleList.forEach(function(target, index) {
                if(item.id == target.roleId) {
                    hasTarget = true
                    !item.checked ?  _this.roleList.splice(index ,1) : ''
                }
            })
            !hasTarget ? _this.roleList.push({
                "roleId": item.id,
                "roleName": item.name
            }) : ''
            _this.checkRoleListDataState()
        },
        chooseAllRole() {
            let _this = this;
            _this.isChooseAllRole = true;
            if(_this.allChecked) {
                _this.treeData.forEach(function(item) {
                    let hasTarget = false;
                    _this.roleList.forEach(function(target, index) {
                        if(item.id == target.roleId) {
                            hasTarget = true
                            !item.checked ?  _this.roleList.splice(index ,1) : ''
                        }
                    })
                    !hasTarget ? _this.roleList.push({
                        "roleId": item.id,
                        "roleName": item.name
                    }) : ''
                })
            }else{
                this.$emit("clearRoleListFunc")
            }
            _this.treeData?.forEach(element => {
                element.checked = _this.allChecked
            });
        },
        clearRoleList() {
            for(var i = 0; i < this.treeData.length; i++ ) {
                this.treeData[i].checked = false
            }
            this.allChecked = false
            this.$emit("clearRoleListFunc")
        },
        ergodicTree(tree, isChoose){
            let _this = this;
            tree?.forEach(element => {
                element.checked = isChoose
                if(element.children && element.children.length > 0) {
                    _this.ergodicTree(element.children, isChoose)
                }
            });
        },
        clickStop(e) {
            if (e.target.tagName === "INPUT") return;
        }
    },
    created() {
        let _this = this;
        _this.getAuthorizeRoleList()
    }
};
</script>
<style lang="less">
.choose-role-main .el-input--small .el-input__icon {
    font-size: 14px;
}
.choose-role-main .el-input__inner {
    font-size: 14px;
}
.choose-role-main .g-tree-solt-con {
    display: flex;
    align-items: center;
    width: 100%;
}
.choose-role-main .g-tree-solt-con p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    padding-right: 10px;
}
.choose-role-main .tree-box {
    height: calc(100% - 42px);
    overflow: auto;
}
.choose-role-main .el-tree {
    height: 100%;
    overflow: initial;
    padding-right: 8px;
}
</style>
<style lang="less" scoped>
.choose-role-main {
    width: 100%;
    height: 100%;
    padding-top: 0;
    color: #303133;
    .g-noData {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc(100% - 90px);
        text-align: center;
        color: #909399;
    }
    .flex-align-center {
        position: relative;
        .el-checkbox {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    .g-noScroll {
        padding-right: 16px;
    }
}
.choose-role-main .import-data-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 34px;
    flex-wrap: wrap;
    margin: 0px 0 12px 0;
    overflow: hidden;
    flex-shrink: 0;
}
html .el-dialog__body .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
body .el-dialog__body .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: #f5f7fa !important;
}

.role-list {
    padding-left: 12px;
    margin: 0;
    .list-item {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .role-item-icon {
        margin-right: 10px;
        color: #909399;
    }
}
.department-tree {
    width: 100%;
    height: calc(100% - 36px);
    box-sizing: border-box;
    overflow: auto;

    .el-tree .tree-slot-content {
        width: calc(100% - 30px);
    }
    /deep/.el-tree-node__content>.el-tree-node__expand-icon {
        padding: 2px;
    }
}
.choose-main-role-choose-all {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 24px;
    box-sizing: border-box;
    flex-shrink: 0;
}
</style>
