<template>

        <Layout>
            <Header class="clearPadd" :style="minWidth">
              <div @click="headerDesign">
                <Menu mode="horizontal" class='headview-menue' :theme="value.headerPro.theme" active-name="1">
                    <div class="headview-logo" >
                        <p class='logo-img' v-if = "value.logo.img != ''">
                          <img  @load="imageLoaded" :src = 'value.logo.img' />
                        </p>
                        <p class='logo-img' v-else style="width: 215px;">
                          <span class="slogo" style="margin: 5px 0 0 5px;height: 90%;">
                              <a href="/">
                                  <img src="../../../../base/styles/images/gg-login-newLogo.svg" alt="">
                              </a>
                          </span>
                        </p>
                        <p class='logo-name'>{{value.logo.name}}</p>

                        <p>
                          <Icon style="cursor: pointer" type="md-arrow-dropdown" size="24"  v-if="switchFlag" v-on:click="gotoHomeSwitch"/>
                        </p>
                    </div>
                    <div  class="headview-nav">
                        <div  v-for="(menucontent,key,index) in value.menue " :class="'headview-item-' + key"  >    
                          <draggable v-model="value.menue[key]"  :options = "{animation:300,group:'people'}"  class="headview-item-container">
                       
                            <div class="itemList"  v-for="(menuitem,menuitemindex) in value.menue[key] " >
                               <div :class="{minW:key == 'right' && menuitemindex == value.menue[key].length-1}" v-if= "menuitem.children && menuitem.children.length>0">                           
                                    <Submenu  :name="menuitemindex" 
                                        @mouseenter.native = "oprShow($event,key,true)"
                                        @mouseleave.native = "oprHide($event,key)"
                                        >  
                                        <!-- 两个下拉菜单 -->
                                        <template slot="title">
                                          <Icon :type="menuitem.icon"  v-if="menuitem.id != 'UserInfo'"></Icon>
                                          <img :src="menuitem.icon" v-else-if = "menuitem.id == 'UserInfo' && menuitem.icon != ''" class="userHeaderImg"/>
                                          {{menuitem.label}}   
                                          <div class="parentsOpr handleOperation specOperation" style="display: none;" v-if = "designModel">
                                            <Icon type="md-trash" @click = "removeTargetObj($event,menuitem)"/>
                                          </div>       
                                        </template>
                                        <!-- 下拉菜单里的值 -->
                                        <MenuItem v-for="(chiitem,indexitemlist) in menuitem.children" 
                                                  :name="menuitemindex +'-' + indexitemlist"
                                                  @click.native = "doAction(chiitem)"
                                                  @mouseenter.native = "oprShow($event,key)"
                                                  @mouseleave.native = "oprHide($event,key)"
                                                  :style="maxW">
                                            <Icon :type="chiitem.icon"></Icon>
                                            {{chiitem.label}}
                                            <div class="handleOperation specOperation" style="display: none;"  v-if = "designModel">
                                              <Icon type="md-trash" @click = "removeTargetObj($event,chiitem)"/>
                                            </div>
                                        </MenuItem>
                                    </Submenu>
                               </div>
                               <div v-else-if ="menuitem.id !='nullObj'" style="position:relative;">
                                    <MenuItem   :name="menuitemindex" @click.native = "doAction(menuitem)"
                                    @mouseenter.native = "oprShow($event,key)"
                                    @mouseleave.native = "oprHide($event,key)">
                                      <Icon :type="menuitem.icon"></Icon>
                                      {{menuitem.label}}
                                      <div class="handleOperation" style="display: none;"  v-if = "designModel">
                                        <Icon type="md-trash" @click = "removeTargetObj($event,menuitem)"/>
                                      </div>  
                                    </MenuItem>
                                    <msg-count                                
                                    :containerOffset="{top:0,left:0,width:80,height:60}"                                    
                                    v-if="menuitem.id === 'Notification'" style="z-index:4;"></msg-count>
                               </div>                                                      
                            </div>  
                          </draggable>  
                          
                        </div>
                    </div>
                </Menu>
              </div>
            </Header>
            <content>      
            </content>
   </Layout>
</template>
<script>
import draggable from "vuedraggable";
import MsgCount from "../Message/MsgCount";
import restfull from "@libs/restfull";
import { mapMutations } from "vuex";
import {getQueryParam, getGuid} from '@libs/base'
import companyAPI from "@modules/portal/api/companyAPI";
import homeAPI from "../../api/homeAPI";
import * as Utils from './utils.js';

export default {
  data: function() {
    return {
      id: "headerViewPro",
      switchFlag: false,
      designModel:false,
      _isAdmin:false,
      isLogining: false,
      minWidth: {},
      maxW:{
        textAlign:'center'
      },
      newDatas: {
        values: Utils.Value
      }
    };
  },
  computed: {
    value() {
      if(this.reloadData){
        this.preprocessData(this.newDatas.values);
        return this.newDatas.values;
      }
      let self = this,
        id = self.id,
        headerProps = self.$store.getters.getHeaderProp,
        globalInfo = self.$store.getters.getGlobalInfo;
      if (!headerProps) {
        var values = self.$store.getters.packageHeaderProp();
        self.setHeaderProp({ values: values });
        headerProps = self.$store.getters.getHeaderProp;
      }
      if (globalInfo) {
          headerProps.values.logo = {
            img: globalInfo.SysLogo,
            name: globalInfo.SysName,
            servicePlan: globalInfo.ServicePlan,
            userName: globalInfo.UserFullName,
            userHeaderImg: globalInfo.UserHeaderImg
          };
          this.isLogining = globalInfo.IsAuthenticated;
          this._isAdmin = globalInfo.isAdmin;
      }      
      self.updateHeaderPro({paylod: headerProps, isAdmin: this.isAdmin, designMode: this.designModel});
      let val = JSON.parse(JSON.stringify(self.$store.getters.getHeaderValues));
      this.preprocessData(val)
      return val;
    },
    getAdmin(){
      return this.$store.getters.getIsAdmin;
    },
    isAdmin(){
      return this._isAdmin || this.getAdmin;
    }
  },
  created() {
    if(this.reloadData){
      this.designModel = false;
      this.minWidth = {
        height: '60px',
        lineheight: '60px'
      };
      this.loadHeaderDatas();
      return;
    }
    this.designModel = this.$store.getters.getDesignModel;
    
    this.minWidth = {
      minWidth: this.$store.getters.getMinWidth + "px",
      height: this.$store.getters.getHeaderHeight + "px",
      lineHeight: this.$store.getters.getHeaderHeight + "px"
    };
  },
  mounted() {
    !this.reloadData && this.initHeaderPro();
    let _this = this;
    companyAPI.getCompanySwitch(null, function(data) {
      _this.switchFlag = data.Result;
    });
  },
  methods: {
    
    ...mapMutations([
      "updateNodePropShow",
      "updateHeaderPropShow",
      "setHeaderProperty",
      "setHeaderProp",
      "updateTitle",
      "updateVersion",
      "updateUserInfo",
      "removeGroupsOrModules",
      "updateHeaderPro",
      "setHeaderHeight"
    ]),
    gotoHomeSwitch: function() {
      homeAPI.gotoHomeSwitch(this.$router);
    },
    openNewTab: url => restfull.doUrl(url),
    doAction(val) {
      if(this.designModel) return false;
      let modules = Utils.getModuleDics();
      let module = modules.get(val.id);
      if (module.linkTo) {
        window.location.href = restfull.doUrl(module.linkTo);
      } else if (module.action) {
        module.action(this, module);
      }
    },
    removeTargetObj(event, params) {
      event.preventDefault();
      let self = this;
      self.$Modal.confirm({
        title: "删除确认",
        content: "<p>您确定要删除吗？</p>",
        onOk: () => {
          self.removeGroupsOrModules(params);
          self.saveHeaderProp();
        },
        onCancel: () => {}
      });
    },
    initHeaderPro() {
      this.updateTitle();
      this.updateVersion();
      this.updateUserInfo();
    },
    headerDesign(e) {
      if(this.reloadData) {return false;}
      e.stopPropagation();
      this.updateNodePropShow();
      this.updateHeaderPropShow();
    },
    oprShow(e, key, hasChildNode) {
      if (key == "right") return;
      e.stopPropagation();
      if (hasChildNode) {
        $(e.target)
          .find(".parentsOpr.handleOperation")
          .show();
      } else {
        $(e.target)
          .find(".handleOperation")
          .show();
      }
    },
    oprHide(e, key) {
      if (key == "right") return;
      $(e.target)
        .find(".handleOperation")
        .hide();
    },
    saveHeaderProp() {
      let self = this,
        values = self.$store.getters.packageHeaderProp();
      self.setHeaderProp({ values: values });
    },
    imageLoaded(e){
        return;
        let target= e.currentTarget;
        let imgTarget = target.parentElement;
        let height = target.parentElement.offsetHeight;
        let naturalHeight = target.naturalHeight,
            naturalWidth = target.naturalWidth;
        let width = height/naturalHeight * naturalWidth;
        target.parentElement.style.width = (height > width  ? height :  width+10) + 'px';
    },
    loadHeaderDatas(){
      var _this = this;
        var homeId = getQueryParam("homeId");
        homeAPI.getHomeHeaderInfo({homeId}, function(result) {
          if (!result.errorMessage) {
              result.HeaderProp.values.logo = {
                  img: result.GlobalInfo.SysLogo,
                  name: result.GlobalInfo.SysName,
                  servicePlan: result.GlobalInfo.ServicePlan,
                  userName: result.GlobalInfo.UserFullName,
                  userHeaderImg: result.GlobalInfo.UserHeaderImg
              };
              _this.newDatas = result.HeaderProp;
              _this._isAdmin = result.GlobalInfo.IsAdmin;
              _this.isLogining = result.GlobalInfo.IsAuthenticated;
              Utils.merageHeaderProp(result.HeaderProp, Utils.VersionInfo, Utils.UserInfos, _this._isAdmin, _this.designModel);              
          }
      });      
    },
    preprocessData(val){
      if(!val || !val.menue || !val.menue.right) return;
      if(!this.isLogining){      
        val.menue.right = [];
        val.menue.right.push(Utils.LoginInfo);
        if(val.menue.center){
          val.menue.center = val.menue.center.filter(item => item.allowAnonymous);
        }
      }
    }
  },
  props: {
    reloadData: {
      type: Boolean,
      default: false
    }
  },
  components: {
    draggable,
    "msg-count": MsgCount
  }
};
</script>

<style lang="less" scoped>
  .minW {
    min-width: 115px;
  }
 
.ivu-menu-primary {
    background: #2d8cf0;
}
.clearPadd {
  padding: 0 !important;
  width: 100%;
}
.console-content  #newHeader .ivu-layout .clearPadd{/* 兼容旧header */
  position:absolute !important ;
} 
.clearPadd .handleOperation {
  position: absolute;
  right: -5px;
  top: 50%;
  bottom: 0;
  float: right;
  height: 14px;
  line-height: 50%;
  margin-top: -7px;
}
.clearPadd .specOperation {
  right: 0px;
}
.headview-menue a {
  color: white;
}
.headview-logo {
  padding: 2px 8px 0 2px;
  width: auto;
  height: 100%;
  float: left;
  position: relative;
}
.logo-img {
  height: 100%;
  width: 70px;
  float: left;
}
.logo-img img {
  height: 100%;
}
.logo-img span.slogo {
  display: inline-block;
  width: 100px;
  height: 100%;
  color: #fff;
  text-align: center;
}
.logo-name {
  margin-left: 10px;
  width: auto;
  font-size: 20px;
  line-height: inherit;
  display: inline-block;
  position: relative;
  font-size: 22px;
  font-weight: bold;
}
.ivu-menu-light .logo-name, .ivu-menu-light .headview-logo .ivu-icon {
  color: #646464;
}
.ivu-menu-dark .logo-name, .ivu-menu-dark .headview-logo .ivu-icon {
  color: rgba(255, 255, 255, 0.7);
}
.ivu-menu-primary .logo-name, .ivu-menu-primary .headview-logo .ivu-icon {
  color: #fff;
}
.ivu-menu-light .logo-name {
  color: #596F7C;
}

.headview-logo,
.headview-item-left,
.headview-item-right,
.headview-nav,
.headview-menue,
.headview-nav,
.headview-item-center ,
.headview-item-container{
  display: -moz-box; 
  display: -webkit-flex;
  display: -moz-flex; 
  display: -ms-flexbox; 
  display: flex;
}

.headview-nav,
.headview-menue {
  justify-content: space-between;
  align-items: center;
}
.headview-logo,
.headview-item-left,
.headview-item-right {
  flex-grow: 0;
}
.headview-nav,
.headview-item-center {
  flex-grow: 1;
  justify-content: center;
}
.headview-menue {
  width: 100%;
}
.headview-item-center .headview-item-container{
   width: 100%;
   justify-content: flex-end;
}
.ivu-menu-horizontal .ivu-menu-item,
.ivu-menu-horizontal .ivu-menu-submenu {
  padding: 0 10px;
  float: none;
}

.menu-item-li {
  width: 100%;
  height: 100%;
  display: block;
}
.userHeaderImg {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: relative;
  top: 8px;
  right: 8px;
}
</style>
