<template>
    <div class="view-container dempickupview sys-permissionmpickup-view">
        <card class='view-card view-no-caption  view-no-toolbar' :dis-hover="true" :padding="0" :bordered="false">
            <div class="content-container pickup-view">
                <div class="translate-contant">
                    <!--菜单分配-->
                    <div class="center" :style="{width : '50%',border:'0px solid red' }">
                        <context-menu-container class='design-tree-container' >
                            <div >
                                <div class="text">菜单分配</div>
                                <div class="roll">
                                    <el-tree
                                            class="tre"
                                            :data="this.CDdata"
                                            ref="CDtree"
                                            show-checkbox
                                            node-key="id"
                                            :default-expanded-keys="this.CDdataexpandedKeys"
                                            highlight-current
                                            :props="this.defaultProps"
                                            @check-change="handleCheckChange"
                                    >
                                    </el-tree>
                                </div>
                            </div>
                        </context-menu-container>
                    </div>
                    <!--权限分配-->
                    <div class="center" :style="{width : '50%',border:'0px solid red' }">
                        <context-menu-container class='design-tree-container' >
                            <div >
                                <div class="text">权限分配</div>
                                <div class="roll">
                                    <el-tree
                                            class="tre"
                                            :data="this.QXdata"
                                            ref="QXtree"
                                            show-checkbox
                                            node-key="id"
                                            :default-expanded-keys="this.QXdataexpandedKeys"
                                            highlight-current
                                            :props="this.defaultProps"
                                            @check-change="handleCheckChange"
                                    >
                                    </el-tree>
                                </div>
                            </div>
                        </context-menu-container>
                    </div>
                </div>
                <div>
                    <!--操作按钮-->
                    <card  :dis-hover="true" :bordered="false" class="footer">
                        <row :style="{ textAlign: 'right',border:'0px solid red' }">
                            <i-button type="primary" :disabled="this.selectData.length > 0 ? false : true" @click="onClickOk">{{this.containerModel.view_okbtn.text}}</i-button>
                            &nbsp;&nbsp;
                            <i-button @click="onClickCancel">{{this.containerModel.view_cancelbtn.text}}</i-button>
                        </row>
                    </card>
                </div>
            </div>
        </card>
    </div>
</template>

<script lang='tsx'>
    import {Vue, Component, Emit, Prop, Watch, Provide} from 'vue-property-decorator';
    import view_pickupviewpanel from '@widgets/sys-permission/mpickup-viewpickupviewpanel-pickupviewpanel/mpickup-viewpickupviewpanel-pickupviewpanel.vue';
    import {Subject, Subscription} from "rxjs";
    import {Util} from "@/utils";
    import { ControlInterface } from '@/interface/control';
    import ContextMenuContainer from "@components/context-menu-container/context-menu-container.vue";
    @Component({
        components: {
            ContextMenuContainer,
            view_pickupviewpanel,
        },
        beforeRouteEnter: (to: any, from: any, next: any) => {
            next((vm: any) => {
                vm.$store.commit('addCurPageViewtag', { fullPath: to.fullPath, viewtag: vm.viewtag });
            });
        },
    })
    export default class SYS_PERMISSIONMPickupView extends Vue{


        /*菜单分配数据*/
        protected CDdata: any = [];
        /*菜单分配数据默认展开节点*/
        protected CDdataexpandedKeys:any =[];
        /*权限分配数据*/
        protected QXdata: any = [];
        /*权限分配数据默认展开节点*/
        protected QXdataexpandedKeys:any =[];
        /**
         * 树显示说明：子树为节点对象的children,节点标签为节点对象的label
         */
        protected defaultProps:any= {
            children: 'children',
            label: 'label'
        }
        /**
         * 选中数据
         */
        protected selectData: any = {};

        /**
         * 视图选中数据
         */
        public viewSelections:any[] = [];

        /**
         * 父数据
         */
        protected parentData: any = {};
        /**
         * 父数据主键
         */
        protected srfparentkey:any ;

        /**
         * vue 创建
         */
        public created(){
            const _this: any = this;
            // 获取父数据
            if (_this.$attrs && _this.$attrs.viewdata) {
                _this.parentData = JSON.parse(_this.$attrs.viewdata);
            }
            if(_this.parentData && _this.parentData.srfparentkey){
                _this.srfparentkey = _this.parentData.srfparentkey;
                // console.log("父主键：" + _this.srfparentkey);
            }
        }

        /**
         * vue 挂载
         */
        public mounted(){
            this.initTree();
        }

        /**
         * 初始化树
         */
        private initTree(){
            const _this = this;
            // get全部菜单和权限的请求路径
            const url = `sys_permissions/getallMenuAndPermission`;
            this.$http.get(url).then((response: any)=>{
                if (!response || response.status !== 200) {
                    this.$Notice.error({ title: '错误', desc: response.message });
                    return;
                }else{
                    // 给树赋值，数据结构在后台已经按照eltree格式化
                    _this.CDdata = response.data[0];
                    _this.QXdata = response.data[1];
                    console.log(this.CDdata)
                    // 树视图默认展开一级节点
                    if (_this.CDdata && _this.CDdata.length>0){
                        _this.CDdata.forEach((item:any, index:any)=> {
                            if (item[index].id){
                                _this.CDdataexpandedKeys.push(item[index].id);
                            }
                        })
                    }
                    if (_this.QXdata && _this.QXdata.length>0){
                        _this.QXdata.forEach((item:any, index:any)=> {
                            if (item[index].id){
                                _this.QXdataexpandedKeys.push(item[index]);
                            }
                        })
                    }
                }
            }).catch((e) => {
                console.log(e);
            });
        }

        /**
         * 处理选中节点
         */
        protected handleCheckChange() {
            console.log("SYS_PERMISSIONMPickupView执行了handleCheckChange")
            // 两棵树
            const CDtree: any = this.$refs.CDtree;
            const QXtree: any = this.$refs.QXtree;
            // 获取选中状态的节点
            const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes());
            this.selectData = arr;
            console.log("选中的node:" + arr);
        }

        /**
         * 容器模型
         */
        public containerModel: any = {
            view_okbtn: { name: 'okbtn', type: 'button', text: '确定', disabled: true },
            view_cancelbtn: { name: 'cancelbtn', type: 'button', text: '取消', disabled: false },
        };

        /**
         * 确定
         */
        public onClickOk(): void {
            // 处理选中的数据
            if(this.selectData && this.selectData.length > 0){
                this.selectData.forEach((item: any) => {
                    let _itemTemp: any = JSON.parse(JSON.stringify(item));
                    let _item:any = {};
                    if (_itemTemp.sys_permissionId) {// 一级菜单
                        _item.srfdataaccaction = _itemTemp.sys_permissionId;
                        _item.srfkey = _itemTemp.sys_permissionId;
                        _item.sys_permission = _itemTemp.sys_permissionId;
                        _item.sys_permissionid = _itemTemp.sys_permissionId;
                        _item.srfmajortext = _itemTemp.label;
                        _item.sys_permissionname = _itemTemp.label;
                        Object.assign(_item, { _select: false })
                        this.viewSelections.push(_item);
                    }else{
                        if(!_itemTemp.children){// 是末节点则为库中存在的权限数据，添加到viewSelections
                            _item.srfdataaccaction = _itemTemp.id;
                            _item.srfkey = _itemTemp.id;
                            _item.sys_permission = _itemTemp.id;
                            _item.sys_permissionid = _itemTemp.id;
                            _item.srfmajortext = _itemTemp.label;
                            _item.sys_permissionname = _itemTemp.label;
                            Object.assign(_item, { _select: false })
                            this.viewSelections.push(_item);
                        }
                    }
                });
            }

            // 交给viewdataschange进行后续保存进库操作
            this.$emit('viewdataschange', this.viewSelections);
            this.$emit('close', null);
        }

        /**
         * 取消
         */
        public onClickCancel(): void {
            this.$emit('close', null);
        }

    }
</script>


<style lang='less'>
    @import './sys-permissionmpickup-view.less';
</style>