<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 : '33%',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 : '33%',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 class="center" :style="{width : '33%',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.ZYdata"
                                            ref="ZYtree"
                                            show-checkbox
                                            node-key="id"
                                            :default-expanded-keys="this.ZYdataexpandedKeys"
                                            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 = [];
        /*统一资源数据*/
        protected ZYdata: any = [];
        /*统一资源数据默认展开节点*/
        protected ZYdataexpandedKeys: 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/getallMenuAndPermissionAndUnires`;
            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];
                    _this.ZYdata = response.data[2];
                    // 树视图默认展开一级节点
                    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]);
                            }
                        })
                    }
                    if (_this.ZYdata && _this.ZYdata.length > 0) {
                        _this.ZYdata.forEach((item: any, index: any) => {
                            if (item[index].id) {
                                _this.ZYdataexpandedKeys.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 ZYtree: any = this.$refs.ZYtree;
            // 获取选中状态的节点
            const arr = CDtree.getCheckedNodes().concat(QXtree.getCheckedNodes()).concat(ZYtree.getCheckedNodes());
            this.selectData = arr;
            // console.log("选中的node:" + JSON.stringify(this.selectData));
        }

        /**
         * 容器模型
         */
        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) {// 数据能力或者统一资源
                            _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>