{extend name="common/common2" /}
{block name="main"}
<style>
    .gray-bg{
        background-color:transparent!important;
    }

</style>
<link rel="stylesheet" href="/admin/css/index.css">

<div class="gydef-box" id="group-menus-vueapp">

    <div class="indexsub-bread-crumbs-box">
        <a href="javascript:;" onclick="window.parent.goindex()" class="active">首页</a>
        {if $menuTitle}
        <a href="javascript:;" id="onebreadcrumbs">{$menuTitle}</a>
        {/if}
        {if $menuTitle1}
        <a href="javascript:;" id="twobreadcrumbs">{$menuTitle1}</a>
        {/if}
        {if $menuTitle2}
        <a href="javascript:;" id="threebreadcrumbs">{$menuTitle2}</a>
        {/if}
    </div>

    <div class="gydef-search-menu-addgropu-box">
        <div class="menu-search-box">
            <div class="menu-search-input">
                <input type="text" v-model="defMenuName" id="def_menu_name" placeholder="搜索您需要的功能模块">
            </div>
            <div class="menu-search-img-btn">
                <img src="/admin/img/search.png" alt="" @click="searchMenu()">
            </div>
        </div>
        <div class="add-group pull-right"><a href="javascript:;" url="{:url('Index/menugroup')}" data-title="创建分组" onclick="layer_open(this,2)" style="text-decoration: none;color:inherit">创建分组</a></div>
    </div>

    <div class="gydef-often-module-box">
        <div class="gydef-often-module-header">常用模块 </div>
        <div class="gydef-often-module-body">
            <div class="gydef-often-module-body-info" v-for="(item,index) in cyList" :key="index">
                <a href="javascript:;" @click="godef2Click(item.menu_id,item.url)">
                    <div class="gydef-menu-info-box">
                        <div class="menu-icon">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="menu-name">
                            <div class="title">{{item.title}}</div>
                            <div class="des">{{item.des}}</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="gydef-group-module-box">
        <div class="gydef-group-module-header">
            <div class="gydef-group-name-box">
                <div v-for="(item,index) in groupList" :key="index" style="display: inline-block">
                    <div v-if="item.id == curGroupId" class="name cur-group-name" @click="clickGroupName(item.id)">{{item.title}}</div>
                    <div v-if="item.id != curGroupId" class="name" @click="clickGroupName(item.id)">{{item.title}}</div>
                </div>
            </div>
            <div class="gydef-group-caozuo" v-if="curGroupId > 0">
                <div class="edit"><a href="javascript:;" :url="editurl" data-title="编辑" onclick="layer_open(this,2)" style="text-decoration: none;color:inherit">编辑 </a></div>
<!--                <div class="del"><a href="javascript:;"  :url="delurl" data-confirm="确定要删除此分组吗?" style="text-decoration: none;color:inherit" class="btn confirm ajax-get data-reload">删除</a></div>-->
                <div class="del" @click="delGroup()">删除</div>
            </div>
        </div>
        <div class="gydef-group-module-body">
            <div class="gydef-often-module-body-info" v-for="(item,index) in menuList" :key="index">
                <a href="javascript:;" @click="godef2Click(item.id,item.url)">
                    <div class="gydef-menu-info-box">
                        <div class="menu-icon">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="menu-name">
                            <div class="title">{{item.title}}</div>
                            <div class="des">{{item.des}}</div>
                        </div>
                    </div>
                </a>
            </div>

        </div>
    </div>


</div>

{/block}

{block name="script"}
<script>
    var usermenusgroup = {:json_encode($usermenusgroup)};
    var usermenus = {:json_encode($usermenus)};
    var cys = {:json_encode($cys)};
    new Vue({
        el: '#group-menus-vueapp',
        data: function() {
            return {
                groupList: usermenusgroup?usermenusgroup:[],
                menuList:[],
                cyList:cys?cys:[],
                curGroupId:0,
                editurl:'',
                delurl:'',
                defMenuName:'',
                loading:true,
            }
        },
        watch: {

        },
        created(){
            let curGroupId = this.curGroupId;
            let newMenus = [];
            usermenus.forEach((item) => {
                if(curGroupId == item.id){
                    newMenus = item.menus;
                }
            });
            this.menuList = newMenus;
        },
        methods: {
            clickGroupName(e){
                const that = this;
                that.curGroupId = e;
                that.defMenuName = '';
                let newMenus = [];
                usermenus.forEach((item) => {
                    if(e == item.id){
                        newMenus = item.menus;
                    }
                });
                that.menuList = newMenus;

              that.editurl =  "{:url('Index/menugroup')}?id="+e;
              that.delurl =  "{:url('Index/menugroupdel')}?id="+e;
            },

            delGroup(){
                let url = this.delurl;
                layer.confirm('是否确认删除？', {
                    btn: ['确认', '取消'], //按钮
                    shade: false //不显示遮罩
                }, function() {
                    layer.closeAll();
                    $.post(url,{},function (res) {
                        if(res.code==0){
                            layer.msg(res.msg);
                            return;
                        }else {
                            layer.msg(res.msg,{time:1000},function () {
                                window.location.reload();
                            });
                        }
                    },'json')
                }, function() {
                    layer.closeAll();
                });
            },

            searchMenu(){
                let defMenuName = this.defMenuName;
                if(defMenuName){
                    let newcyList = [];
                    cys.forEach((item) => {
                        if(item.title.toString().indexOf(defMenuName) != -1){
                            newcyList.push(item);
                        }
                    });

                    this.cyList = newcyList;

                    let newMenuList = [];
                    this.menuList.forEach((item) => {
                        if(item.title.toString().indexOf(defMenuName) != -1){
                            newMenuList.push(item);
                        }
                    });

                    this.menuList = newMenuList;

                }else{

                    this.cyList = cys;
                    let curGroupId = this.curGroupId;
                    let newMenus = [];
                    this.menuList = [];
                    usermenus.forEach((item) => {
                        if(curGroupId == item.id){
                            newMenus = item.menus;
                        }
                    });
                    this.menuList = newMenus;
                }
            },

            godef2Click(menuid,url){
                if(Number(menuid) != 502){
                    let purl = "{:url('Index/umenu')}";
                    $.post(purl,{id:menuid},function () {
                        // window.location.href = url;
                    });
                    //
                    let url = '{:url("index/def2")}?curmenu=500&menuId='+menuid;
                    window.location.href = url;
                }else{
                    window.open(url,"_blank");
                }

            },

        }
    })


    function defSearchMenu(){
        var menu_name = $('#def_menu_name').val();
        var url = '{:url("index/def")}';
        $.post(url,{def_menu_name:menu_name},function (e){
            if(e.code == 1){

            }
        })
    }


    window.addEventListener("message", (e) => {
        var tit = e.data;
        if(tit.type == 1){
            $('#twobreadcrumbs').html(tit.menus);
        }else{
            $('#threebreadcrumbs').html(tit.menus);
        }

    });
</script>
{/block}