<template>
    <section id='menuAll' style='width:auto;' class="fr">

        <div class="g_header_d" style='width:auto;'>
            <!--        <span class="g_hea_img1" id="trigger-overlay" @click="showMeun"><img src="/images/navs1_03.png"></span>
                    <p class="g_hea_p1">菜单</p>
                    <p class="g_hea_p2">
                        <span>悬浮</span>
                        <label class="switch_large"><input class="switch_btn" @change="menuFixBox" v-model="isCheckFix" type="checkbox"><span></span></label>
                        <span>固定</span>
                    </p> -->
            <ul class="logo-right">
                <li style='border-left:0;width:100px;'><em class="em-index ml-20"></em>
                    <!-- <a class="ml-10" href="http://test.csylcloud.com:3000">首页</a> -->
                    <!-- 测试环境地址 -->
                    <a class="ml-10" href="http://223.76.250.194:23008/">首页</a>
                    <!-- 正式环境地址 -->
                    <!-- <a class="ml-10" href="https://www.csylcloud.com">首页</a> -->
                </li>  
                <li><em class="em2 ml-20"></em>
                    <a class="ml-10" v-link="{path:'/service'}">服务中心</a>
                </li>
                <li v-if='type=="supplier"'>
                    <em class="em5 ml-20"></em>
                    <a class="ml-10" v-link="{path:'/home'}">待办事宜</a>
                </li>
                <li v-if='type=="hospital"'>
                    <em class="em5 ml-20"></em>
                    <a class="ml-10" v-link="{path:'/newpage'}">待办事宜</a>
                </li>
                <li v-if='type=="distribution"'>
                    <em class="em5 ml-20"></em>
                    <a class="ml-10" v-link="{path:'/newpage'}">待办事宜</a>
                </li>
                <message :type="type"></message>
            </ul>
            <!--            <div class="switch-flow" v-if="(type=='supplier' && $route.showTop)||(type=='supplier' && $route.showBottom) ">
                            <section>
                                <span class="switch-open" v-if='opens=="close"' @click='opens="open"'>关闭流程图</span>
                                <span class="switch-close" v-else @click='opens="close"'>打开流程图</span>
                            </section>
                        </div> -->
        </div>
    </section>
    <!-- <div class="clearfix" style='margin-top:42px;'>

        <span class="m_process">
                <process :type="type" :opens="opens"></process>
        </span>
    </div> -->
    <div class="container" v-if="isShowMenuBox">
        <div class="overlay overlay-genie" :class="{'meun-box-fix':isScorll,'open':isOpenMenu,'overlay_re':isCheckFix}"
             data-steps="m 701.56545,809.01175 35.16718,0 0,19.68384 -35.16718,0 z;m 698.9986,728.03569 41.23353,0 -3.41953,77.8735 -34.98557,0 z;m 687.08153,513.78234 53.1506,0 C 738.0505,683.9161 737.86917,503.34193 737.27015,806 l -35.90067,0 c -7.82727,-276.34892 -2.06916,-72.79261 -14.28795,-292.21766 z;m 403.87105,257.94772 566.31246,2.93091 C 923.38284,513.78233 738.73561,372.23931 737.27015,806 l -35.90067,0 C 701.32034,404.49318 455.17312,480.07689 403.87105,257.94772 z;M 51.871052,165.94772 1362.1835,168.87863 C 1171.3828,653.78233 738.73561,372.23931 737.27015,806 l -35.90067,0 C 701.32034,404.49318 31.173122,513.78234 51.871052,165.94772 z;m 52,26 1364,4 c -12.8007,666.9037 -273.2644,483.78234 -322.7299,776 l -633.90062,0 C 359.32034,432.49318 -6.6979288,733.83462 52,26 z;m 0,0 1439.999975,0 0,805.99999 -1439.999975,0 z"
             id="g_hea_con" style='top:51px;' :style='{height:oneMenuNUM>5?oneMenuNUM*50+"px":"250px"}'>
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 806"
                 preserveAspectRatio="none" class="svg1">
                <path class="overlay-path" d="m 701.56545,809.01175 35.16718,0 0,19.68384 -35.16718,0 z"></path>
                <desc>Created with Snap</desc>
                <defs></defs>
            </svg>
            <ul class="g_hea_ul">
                <li @click="clickOne($index)" v-for="one in menuList.oneMenus"
                    :class="userType=='H'? 'li'+$index :'sli'+$index">{{one.name}}
                </li>
            </ul>
            <div class="g_hea_ulbox">
                <div class="g_hea_tab" v-for="one in menuList.oneMenus">
                    <div class="g_hea_tab2 ">
                        <p>
                            <a v-for="two in menuList.twoMenus[one.guid]" class="g_hea_a1"
                               :class="two.guid==showObj.twoGuid?'active':''"
                               @click="clickTow(two.guid,two.syscalldescribe1,$index,two.name,two.syscalldescribe2)" v-link="two.syscalldescribe1">
                                {{two.name}}</a>
                        </p>
                    </div>
                </div>
            </div>
            <img src="/images/cross.png" class="g_hea_close" @click="hideMenu">
        </div>
    </div>
    <!--    <section class=" container">
            <span class='meun-fix' v-show="isScorll" id="trigger-overlay" @click="showMeun"><img src="/images/navs1_03.png"></span>
        </section> -->
    <div class="shade">
    </div>
</template>

<script>
    var store = require('../../vuex/store');
    var MT = require('../../vuex/mutation-types');

    module.exports = {
        store: store,
        props: ['type'],
        data: function () {
            return {
                // 数据传输
                menuList: {},
                // 显示的菜单的信息
                showObj: {
                    oneGuid: '', // 一级显示的
                    twoGuid: '', // 二级显示的
                },
                opens: 'close',
                isScorll: false,
                isShowMenuBox: true,
                isCheckFix: false,
                isOpenMenu: false, // 是否展示菜单
                elehide: '',
                numOne: 1,
                numTwo: 1,
                menuTop: '',
                oneMenuNUM: 0,
                userType: ''
            };
        },
        components: {
            message: require('./header_message.vue'), //star 9-30
            process: function (resolve) {
                if (this.type == 'supplier') {
                    require(['./supplier/process.vue'], resolve);
                }
            },
        },
        methods: {

            // 获得当前用户信息
            getOnlineUser: function () {
                var self = this;
                if (self.$store.state.user.curMenuRole != null && self.$store.state.user.curMenuRole.oneMenus != null) {
                    self.getRoleMenu();
                } else {
                    Ajax.get('/online').then(function (resp) {
                        self.$store.dispatch(MT.SET_ONLINE_USER, resp.data);
                        self.getRoleMenu();
                    });
                }

                if (self.$store.state.user.userType == "S" && self.$store.state.user.showMenu != 'Y' ) {
                    self.isShowMenuBox = false;

                }
            },
            // 获得菜单的数据权限
            getRoleMenu: function () {
                var self = this;
                self.oneMenuNUM = 0;
                self.$set('menuList', self.$store.state.user.curMenuRole);
                for (var k in self.menuList.oneMenus) {
                    self.oneMenuNUM++;
                }
                // 刚登录的时候，默认把第一个大菜单展开
                if (self.menuList != null && self.menuList.oneMenus != null) {
                    for (var key in self.menuList.oneMenus) {
                        // 一级菜单
                        self.showObj.oneGuid = self.menuList.oneMenus[key].guid;
                        // 一级菜单下的第1个二级菜单
                        self.showObj.twoGuid = self.getFirtMenu(self.showObj.oneGuid);
                        break;
                    }
                }
            },
            // 点击一级菜单
            clickOne: function (i) {
                var self = this;
                $('.g_hea_ul').find('li').eq(i).addClass('current').siblings().removeClass('current');
                $('.g_hea_tab').eq(i).show().siblings().hide();
                $('.g_hea_tab').eq(i).find(".g_hea_tab2").addClass('current');
                self.one = i;
            },
            // 点击二级菜单
            clickTow: function (towGuid, url, i,type,path) {
                var self = this;
           
                if (towGuid == '74fb9234008b4cefb2437203bbfb21c3') {
                    self.getEtokens(window.location.href);
                }else if (towGuid=='d3b110896c5547c5955b7100e56aa618'){
                    self.getEtokens(window.location.href);
                }
                self.showObj.twoGuid = towGuid;
                console.log(path);
                localStorage.setItem('path',JSON.stringify(path));
                self.$store.dispatch(MT.SET_PROCESS, url);
                this.isOpenMenu = false;
                this.isCheckFix = false;
                $('.shade').hide();
                this.$store.state.showMeun = false;
                this.numTwo = i;
                self.addAuditLog(type);
            }, 
              addAuditLog:function(type){
                var self = this;
                Ajax.post('/sitemessage/operauditlogAddAuditLog',{'type':type,'userId':self.$store.state.user.userId,'userName':self.$store.state.user.userName})
                .then(function (resp) {
                  });
              },
            getEtokens: function (url) {
                var self = this;
                // alert(encodeURIComponent(url))
                Ajax.post('/user/getUserEitoken').then(function (resp) {
                    if (resp.data.errorCode == 0) {
                        window.open('http://192.168.3.105:8030/#/jump?access_token=' + resp.data.data + '&url=' +encodeURIComponent(url) , '_self')
                       /* window.open('http://test.csylcloud.com:8086/#/jump?access_token=' + resp.data.data + '&url=' + encodeURIComponent(url), '_self')*/
                    } else {
                        layer.msg('未设置发票管理权限');
                    }
                });
            },
            // 获得某个一级菜单下第一个对象的guid
            getFirtMenu: function (oneGuid) {
                var self = this;
                var twoGuid = "";
                if (self.menuList.twoMenus[oneGuid] != null) {
                    for (var key in self.menuList.twoMenus[oneGuid]) {
                        // 一级菜单
                        twoGuid = self.menuList.twoMenus[oneGuid][key].guid;
                        break;
                    }
                }
                return twoGuid;
            },
            // 显示菜单
            showMeun: function () {

                var steps = $('.overlay').attr('data-steps').split(';'),
                    stepsTotal = steps.length,
                    pos = 0,
                    overlay = document.querySelector('div.overlay'),
                    s = Snap(overlay.querySelector('svg')),
                    path = s.select('path'),
                    self = this;

                clearTimeout(self.elehide);

                function shows() {
                    self.isOpenMenu = true;
                    var nextStep = function (pos) {
                        pos++;
                        if (pos > stepsTotal - 1) return;
                        path.animate({
                            'path': steps[pos]
                        }, 60, mina.linear, function () {
                            nextStep(pos);
                        });
                    };
                    nextStep(pos);
                }

                if (!self.isOpenMenu) {
                    shows();
                }
                $('.shade').show();

            },
            // 是否固定菜单
            menuFixBox: function () {
                this.showMeun();
            },
            // 隐藏菜单
            hideMenu: function () {
                var steps = $('.overlay').attr('data-steps').split(';'),
                    overlay = document.querySelector('div.overlay'),
                    s = Snap(overlay.querySelector('svg')),
                    path = s.select('path'),
                    stepsTotal = steps.length,
                    pos = stepsTotal - 1,
                    self = this;
                this.isCheckFix = false;

                function hides() {
                    if (self.isOpenMenu) {
                        self.isOpenMenu = false;
                        $('.overlay').addClass('close');
                        var nextStep = function (pos) {
                            pos--;
                            if (pos < 0) return;
                            path.animate({
                                'path': steps[pos]
                            }, 60, mina.linear, function () {
                                if (pos === 0) {
                                    $('.overlay').removeClass('close');
                                }
                                nextStep(pos);

                            });
                        };
                        nextStep(pos);
                    }
                }

                clearTimeout(self.elehide);
                self.elehide = setTimeout(function () {
                    hides();
                }, 500)
                $('.shade').hide();
                self.$store.state.showMeun = false;
            },

        },
        created: function () {
            // 获得菜单的权限
            this.getOnlineUser();

        },
        ready: function () {
            $('.g_hea_ul').find('li').removeClass('current').eq(0).addClass('current');
            $('.g_hea_tab').eq(0).show().siblings().hide();
            $('.g_hea_tab').eq(0).find(".g_hea_tab2").addClass('current');
            $('.shade').hide();
            this.$store.state.showMeun = false;
        },
        ready: function () {


            var self = this;
            self.userType = self.$store.state.user.userType;

            $('.g_hea_ul').find('li').removeClass('current').eq(0).addClass('current');
            $('.g_hea_tab').eq(0).show().siblings().hide();
            $('.g_hea_tab').eq(0).find(".g_hea_tab2").addClass('current');
            $('.shade').hide();
            this.$store.state.showMeun = false;
            $(function () {
                var triggerBttn = document.getElementById('trigger-overlay'),
                    overlay = document.querySelector('div.overlay'),
                    transEndEventNames = {
                        'WebkitTransition': 'webkitTransitionEnd',
                        'MozTransition': 'transitionend',
                        'OTransition': 'oTransitionEnd',
                        'msTransition': 'MSTransitionEnd',
                        'transition': 'transitionend'
                    },
                    // console.log(Modernizr);
                    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
                    support = {
                        transitions: Modernizr.csstransitions
                    };

                function menuScroll() {
                    var s = $(window).scrollTop();
                    self.menuTop = $('.g_hea_g1').outerHeight() + $('#menuAll').outerHeight();
                    if (s > self.menuTop) {
                        self.isScorll = true;
                        $('.overlay').removeClass('overlay_re');
                    } else {
                        self.isScorll = false;
                    }

                }

                setTimeout(function () {

                    menuScroll();
                    $(window).on('scroll', function (e) {
                        menuScroll();
                    })
                }, 1200);

                $(window).on('hashchange',
                    function () {
                        setTimeout(function () {
                            $(document).scrollTop(0);
                            menuScroll();
                        }, 1200)
                    })
            })

            // 点击遮罩菜单隐藏
            $('.shade').click(function () {
                self.isOpenMenu = false;
                $(this).hide();
                self.$store.state.showMeun = false;
            })

            $(function () {
                var navel = '';
                var navnewel = '';

                var headwel = '';
                var headvel = '';

                var sourcet = 0;
                var sourceel = '';
                var sourcenewel = '';
                var pop_banner = '';
                var nel = '',
                    t = 0;
                var el = $('#t_header');
                var remo;

                function fn_header() {
                    $(".new_tdheader").remove();
                    var el = $('#t_header');
                    if (el != undefined && el.length > 0) {
                        var n = el.get(0).tagName.toLowerCase();

                        if (self.$store.state.opens == 'open') {
                            t = el.offset().top - 117;
                        } else {
                            t = el.offset().top - 167;

                        }


                        if (n == 'div') {
                            var u = $("<div class='new_tdheader new_t2'></div>").attr('style', 'top:124px;position: fixed;z-index: 100;background: #fff;width: 1003px;').hide()
                            $(".contaNEW").append(u.addClass('ctable').append(el.clone(true)));
                            u.find('span').css({
                                'padding-top': '10px'
                            })
                            nel = u;

                        } else if (n == "thead") {
                            var clname = el.parent().attr('class')
                            var u = $('<table  class="new_tdheader new_t2"></table>').attr('style', 'top:124px;position: fixed;z-index: 100;background: #fff;width: 1003px;').hide();

                            $(".contaNEW").append(u.addClass(clname).append(el.clone(true)));
                            nel = u;
                        }

                    }
                    navel = $('.menu-nav');
                    sourceel = $('.source-nav');
                    headvel = $('.g_hea_g1');
                }

                function scroll() {
                    fn_header();
                    // var el = $('#t_header');
                    var t_thead = el;
                    var s = $(window).scrollTop();
                    // var menuTop = $('.g_hea_g1').outerHeight() + $('#menuAll').outerHeight();
                    // var menuTop = $('.g_hea_g1').outerHeight();
                    if (self.$store.state.opens == 'open') {
                        var menuTop = $('.g_hea_g1').outerHeight();
                    } else {
                        var menuTop = $('.g_hea_g1').outerHeight() + $('.flow-map').outerHeight();
                    }

                    if (nel) {
                        if (s > t) {
                            nel.find('.checkbox-control').hide();
                            nel && nel.show();

                        } else {

                            nel && nel.hide();
                        }
                    }


                    if (s > menuTop) {
                        navnewel.show();
                        navel.attr('style', 'position: fixed;left: 0px;top: 95px;width: 100%;z-index:281;')
                    } else {
                        navnewel.hide();
                        navel.attr('style', '')
                    }

                    if (s > menuTop) {
                        headwel.show();
                        headvel.attr('style', 'position: fixed;left: 0px;top: 0px;width: 100%;z-index:283;')
                    } else {
                        headwel.hide();
                        headvel.attr('style', '')
                    }

                    if (s > menuTop) {
                        sourcenewel.show();
                        sourceel.attr('style', 'position: fixed;left: 0px;width: 100%;top:56px;z-index: 282;');

                        if (self.userType == "S" || self.userType == "H" || self.userType == "D") {
                            $(".pop-banner").attr('style', 'position: fixed;top: 56px;z-index: 282; ');
                        } else {
                            $(".pop-banner").attr('style', 'position: fixed;top: 48px;z-index: 282;');
                        }

                    } else {
                        sourcenewel.hide();
                        sourceel.attr('style', '');
                        $(".pop-banner").attr('style', '');

                    }

                }

                function nav() {
                    navnewel = $('<div class="menunew1"></div>').attr('style', 'width:100%;height:30px;').hide();
                    navel.before(navnewel);
                }

                function source() {
                    sourcet = $('.source-nav').offset().top;
                    sourcenewel = $('<div class="sourcenew1"></div>').attr('style', 'width:100%;height:39px;').hide();
                    sourceel.before(sourcenewel);
                }

                function head() {
                    // headvel = $('.g_hea_g1').offset().top;
                    headwel = $('<header class="g_hea_g2"></header>').attr('style', 'width:100%;height:48px;').hide();
                    headvel.before(headwel);
                }

                // 菜单圆球浮动

                setTimeout(function () {
                    fn_header();
                    nav();
                    source();
                    head();
                    scroll();
                    $(window).on('scroll', function (e) {
                        scroll();

                    })
                }, 1000);
                $(window).on('hashchange', function () {
                    setTimeout(function () {
                        $(document).scrollTop(0);
                        fn_header();
                        scroll();
                    }, 1000)

                })

            })

        },
        watch: {
            '$store.state.showMeun': function (falg) {
                if (this.isShowMenuBox) {
                    if (falg) {
                        this.showMeun();
                    }
                } else {
                    this.$store.state.showMeun = false;
                }

            },

        },

    };
</script>
<style scoped>
    .active {
        color: white;
    }

    .shade {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        outline: 0;
        -webkit-overflow-scrolling: touch;
        /*background-color: rgb(0, 0, 0);
        filter: alpha(opacity=60);
        background-color: rgba(0, 0, 0, 0.6);*/
        z-index: 100;
    }
</style>