<template>
    <div class="dataAuthorization">
        <div class="box">
            <div class="box-left">
                <div class="box-left-bt">
                    授权对象
                </div>
                <div class="box-left-tree">
                    <el-tree
                        :data="authorizationItem.data"
                        :props="authorizationItem.defaultProps"
                        v-loading="authorizationItem.loading"
                    >
                        <span
                            class="custom-tree-node"
                            :class="{'tree-row-on': filterForm.data.topicId === data.id}"
                            style="width:100%; font-size:12px;"
                            slot-scope="{ node, data }"
                        >
                            <p
                                style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
                                :title="node.label"
                                @click="selectByTopicId(data)"
                            >{{ node.label }}</p>
                        </span>
                    </el-tree>
                </div>
            </div>
            <div class="box-right">
                <div class="box-top">
                    <el-form
                        class="box-top-form"
                        size="mini"
                        label-width="60px"
                        inline
                    >
                        <el-form-item label="对象列表">
                            <el-select
                                filterable clearable
                                v-model="filterForm.data.ObjList"
                                placeholder="对象列表"
                                style="width: 150px;"
                            ></el-select>
                        </el-form-item>
                        <el-form-item label="授权类型">
                            <el-select
                                filterable clearable
                                v-model="filterForm.data.accreditType"
                                placeholder="授权类型"
                                style="width: 150px;"
                            >
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="0px">
                            <el-button
                                type="primary"
                                size="mini"
                            >保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="box-bottom">
                    <div class="box-bottom-left">
                        <el-tree
                            ref="powerItem"
                            :data="powerItem.data"
                            :props="powerItem.defaultProps"
                            node-key="id"
                            show-checkbox
                            v-loading="powerItem.loading"
                            @check-change="powerItemChange"
                        ></el-tree>
                    </div>
                    <div class="box-bottom-right">
                        <div class="details-box">
                            <p class="bt">数据库记录（{{dataDetails.existing.length}}条记录）</p>
                            <div class="nr">
                                <div
                                    class="nr-item"
                                    v-for="(item, index) of dataDetails.existing"
                                    :key="index"
                                >{{ item.name }}</div>
                            </div>
                        </div>
                        <div class="details-box">
                            <p class="bt">本次新增（{{dataDetails.add.length}}条记录）</p>
                            <div class="nr">
                                <div
                                    class="nr-item"
                                    v-for="(item, index) of dataDetails.add"
                                    :key="index"
                                >+ {{ item.name }}</div>
                            </div>
                        </div>
                        <div class="details-box">
                            <p class="bt">本次移除（{{dataDetails.del.length}}条记录）</p>
                            <div class="nr">
                                <div
                                    class="nr-item"
                                    v-for="(item, index) of dataDetails.del"
                                    :key="index"
                                >- {{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'dataAuthorization',
    data () {
        return {
            activeMenu: '',
            filterForm: {
                data: {
                    ObjList: '能介表',
                    accreditType: '白名单'
                },
                rules: {

                }
            },
            authorizationItem: {
                loading: false,
                data: [
                    {
                        id: '1',
                        name: '所有记录',
                        children: [
                            {
                                id: '2',
                                name: '[制氧分厂]煤气计划',
                                children: []
                            },
                            {
                                id: '3',
                                name: '[制氧分厂]天然气计划',
                                children: []
                            },
                            {
                                id: '4',
                                name: '[一炼钢分厂]煤气计划',
                                children: []
                            }
                        ]
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            },
            powerItem: {
                loading: false,
                data: [
                    {
                        id: '1',
                        name: '动力',
                        children: [
                            {
                                id: '2',
                                name: '液氮',
                                children: []
                            },
                            {
                                id: '3',
                                name: '液氧',
                                children: []
                            },
                            {
                                id: '12',
                                name: '蒸汽',
                                children: []
                            },
                            {
                                id: '13',
                                name: '汽油',
                                children: []
                            },
                            {
                                id: '14',
                                name: '天然气',
                                children: []
                            }
                        ]
                    },
                    {
                        id: '5',
                        name: '电力',
                        children: [
                            {
                                id: '6',
                                name: '电',
                                children: []
                            },
                            {
                                id: '7',
                                name: 'TRT发电',
                                children: []
                            }
                        ]
                    },
                    {
                        id: '8',
                        name: '水',
                        children: [
                            {
                                id: '9',
                                name: '生产水',
                                children: []
                            },
                            {
                                id: '10',
                                name: '原水',
                                children: []
                            },
                            {
                                id: '11',
                                name: '循环水',
                                children: []
                            }
                        ]
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            },
            dataDetails: {
                existing: [],
                add: [],
                del: []
            }
        }
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    mounted () {
        let that = this;
        that.getPowerItemData();
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 获取权限列表
        getPowerItemData () {
            let that = this;
            // 通过id设置默认选择
            that.$refs['powerItem'].setCheckedKeys(['2', '13', '14', '6', '7']);
            that.dataDetails.existing = [];
            that.dataDetails.add = [];
            that.dataDetails.del = [];
            // 从node中获取数据，设置existing
            for (let item of that.$refs['powerItem'].getCheckedNodes()) {
                if (item.children.length === 0) {
                    that.dataDetails.existing.push(item);
                }
            }
        },
        // 选择授权对象
        selectByTopicId (data) {
            console.log(data);
        },
        // 权限更变时触发,判断新增与移除
        powerItemChange () {
            let that = this;
            that.dataDetails.add = [];
            that.dataDetails.del = [];
            // 获取有效节点
            let arr = [];
            for (let item of that.$refs['powerItem'].getCheckedNodes()) {
                if (item.children.length === 0) {
                    arr.push(item);
                }
            }
            // 获取新增项
            for (let item of arr) {
                let repeat = false; // 是否存在与dataDetails中
                for (let i = 0; i < that.dataDetails.existing.length; i++) {
                    if (that.dataDetails.existing[i] === item) {
                        repeat = true;
                        break;
                    }
                }
                if (!repeat) {
                    that.dataDetails.add.push(item);
                }
            }
            // 获取移除项
            for (let item of that.dataDetails.existing) {
                let repeat = false; // 是否存在与arr中
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] === item) {
                        repeat = true;
                        break;
                    }
                }
                if (!repeat) {
                    that.dataDetails.del.push(item);
                }
            }
        }
    }
}
</script>

<style lang="less">
.dataAuthorization {
    min-width: 700px;
    height: 100%;
    .box {
        height: 100%;
        padding: 15px 15px 0 15px;
        .box-left {
            float: left;
            width: 200px;
            height: calc(100% - 3px);
            overflow: auto;
            .box-left-bt {
                line-height: 47px;
                font-size: 16px;
                border-bottom: 1px solid #ccc;
            }
            .box-left-tree {
                height: calc(100% - 50px);
                overflow: auto;
                padding: 7px 7px 0 0;
                .tree-row-on {
                    color: #3279e8;
                }
            }
        }
        .box-right {
            height: 100%;
            border-left: 1px solid #ccc;
            margin-left: 200px;
            .box-top {
                .box-top-form {
                    padding: 7px 0 0 7px;
                    border-bottom: 1px solid #ccc;
                    height: 48px;
                }
            }
            .box-bottom {
                height: calc(100% - 50px);
                padding-left: 7px;
                .box-bottom-left {
                    width: calc(100% - 300px);
                    height: 100%;
                    padding-top: 7px;
                    padding-right: 7px;
                    float: left;
                }
                .box-bottom-right {
                    width: 300px;
                    height: 100%;
                    padding-top: 7px;
                    padding-left: 10px;
                    border-left: 1px solid #ccc;
                    float: left;
                    .details-box {
                        height: calc((100% - 21px) / 3);
                        margin-bottom: 7px;
                        .bt {
                            height: 30px;
                            line-height: 30px;
                        }
                        .nr {
                            height: calc(100% - 30px);
                            padding: 4px 9px;
                            border: 1px solid #ccc;
                            overflow: auto;
                            .nr-item {
                                width: 100%;
                                height: 23px;
                                line-height: 23px;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }
        // 去除下边框
        .el-tree-node__label {
            border-bottom: none;
        }
    }
}
</style>
