<template>
  <div class="leftNav">
    <div class="singleMenUlayer" v-show="singleMenUlayerShow">
      <i class="iconfont icon-Close" @click="singleMenUlayerShow=false"></i>
      <div v-for="outItem in bigIconItems" style="overflow: hidden;">
        <p
          style="border-left: 3px solid #E95252; height: 14px; line-height: 14px; font-size: 12px; text-indent: 12px; margin-top: 10px;">
          {{outItem.GCode}}</p>
        <ul>
          <li v-for="(item,index) in outItem.list" @click="goUrl(item.MenuUrl)">
            <div>
              <i :style="{background:item.MenuStyleColor}" :class="[fontPub,item.MenuStyleIcon]"></i>
            </div>
            {{item.MenuName}}
          </li>
        </ul>
      </div>
    </div>
    <div class="singleMenUlayer singleMenUlayer2" v-show="singleMenUlayerShow2">
      <i class="iconfont icon-Close" @click="singleMenUlayerShow2=false"></i>
      <el-tabs v-model="activeName">
        <template v-for="(outItem, outIndex) in items">
          <el-tab-pane  :label="outItem.MenuName" :name="outItem.MenuName">
            <div class="clearfix">
              <template v-for="(item,index) in outItem.ChildMenu">
                <div class="fl flash_menu" @click="addFlash(item, index, outIndex)">
                  <i class="choice_icon iconfont icon-duigou" :class="{_active: item.IsShortcutMenu === 1}"></i>
                  <p class="menu_icon"><i :style="{background:item.MenuStyleColor}" :class="[fontPub,item.MenuStyleIcon]"></i></p>
                  <p class="flash_menu_name">{{item.MenuName}}</p>
                </div>
              </template>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
    <div class="shortcutsDiv">
      <div class="rgba"></div>
      <p class="updateIcon" @click="singleMenUlayerShow2 = true, singleMenUlayerShow = false">
        <el-tooltip effect="dark" content="添加快捷菜单" placement="top-start">
          <i class="iconfont icon-Edit"></i>
        </el-tooltip>
      </p>
      <div class="shortcuts ">
        <p class="flash_menu_tit">基本菜单</p>
        <ul class="clearfix">
          <li class="more_menu" v-for="(item,index) in items" @click="showMenu(item)">
            <div>
              <i v-for="childItem in item.childerns" :style="{background:childItem.MenuStyleColor}"
                :class="[fontPub,childItem.MenuStyleIcon]"></i>
            </div>
            {{item.MenuName}}
          </li>
        </ul>
        <p class="flash_menu_tit">快捷菜单</p>
        <ul class="clearfix flash_menu_left">
          <li v-if="ShortcutMenu.length<1" class="fl" >
            <div @click="singleMenUlayerShow2 = true, singleMenUlayerShow = false">
              <i
                class="iconfont icon-mui-icon-add add_more"></i>
            </div>
            <p @click="singleMenUlayerShow2 = true, singleMenUlayerShow = false">新增快捷菜单</p>

          </li>
          <li v-for="(item, index) in ShortcutMenu" class="fl" >
            <i v-if="singleMenUlayerShow2" class="iconfont icon-Close" @click="deleteFlash(item, index)"></i>
            <div @click="goUrl(item.MenuUrl)">
              <i :style="{background:item.MenuStyleColor}"
                :class="[fontPub,item.MenuStyleIcon? item.MenuStyleIcon : 'icon-menu-shezhi1']"></i>
            </div>
            <p @click="goUrl(item.MenuUrl)">{{item.MenuName}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        items: [],
        openId: 0,
        iconItems: [],
        fontPub: 'iconfont',
        bigIconItems: [],
        singleMenUlayerShow: false,
        singleMenUlayerShow2: false,
        activeName: '',
        ShortcutMenu: [],
        menuList: [],
      }
    },
    mounted() {
      this.getMenu();
    },
    methods: {
      // 5-5号新增快捷菜单
      // 设置菜单缓存
      setLocalStorage: function (data) {
        var localStorageData = JSON.parse(window.localStorage["userInfo"])
        localStorageData.UserMenu = data
        localStorage.userInfo = JSON.stringify(localStorageData);
      },
      // 删除会计菜单
      deleteFlash: function (item, index) {
        item.IsShortcutMenu = item.IsShortcutMenu === 1 ? 2 : 1
        this.ShortcutMenu.splice(index, 1)
        this.apipost('admin_get_SetShortcutMenu', {MenuId: item.MenuId}, res=>{
          if(res.data.resultCode == 1) {
            this.setLocalStorage(res.data.data)
            this.getMenu()
          }
        }, null)
        this.$forceUpdate()
      },
      // 添加快捷菜单
      addFlash: function (item, index, fIndex) {
        item.IsShortcutMenu = item.IsShortcutMenu === 1 ? 2 : 1
        if (item.IsShortcutMenu === 1) {
          let repeat = false
          this.ShortcutMenu.forEach(x=>{
            if (x.MenuId===item.MenuId) {
              repeat = true
            }
          })
          if (!repeat) {
            this.ShortcutMenu.push(item)
          }
        } else {
          this.ShortcutMenu.forEach((x, index)=>{
            if (x.MenuId===item.MenuId) {
              this.ShortcutMenu.splice(index, 1)
            }
          })
        }
        this.apipost('admin_get_SetShortcutMenu', {MenuId: item.MenuId}, res=>{
          if(res.data.resultCode == 1) {
            this.setLocalStorage(res.data.data)
          }
        }, null)
        this.$forceUpdate()
      },
      // 获取菜单
      getMenu() {
        this.menuList = this.getLocalStorage().UserMenu;
        let path = this.$route.path.split('?')[0];
        let root = 0;
        //找到Root
        this.menuList.forEach(x => {
          if (x.MenuUrl == path) {
            root = x.RootId;
            this.openId = x.ParentId;
            return false
          }
        })
        this.items = [];
        let that = this;
        this.menuList.forEach(rootItem => {
          if (rootItem.RootId == root) {
            rootItem.ChildMenu.forEach(secondItem => {
              secondItem.childerns = [];
              let style = JSON.parse(secondItem.MenuStyle);
              secondItem.MenuStyleIcon = style.icon;
              secondItem.MenuStyleColor = style.color;
              secondItem.ChildMenu.forEach(thirdItem => {
                if (thirdItem.RootId == root && thirdItem.ParentId == secondItem.MenuId) {
                  secondItem.childerns.push(thirdItem);
                  let style2 = JSON.parse(thirdItem.MenuStyle);
                  thirdItem.MenuStyleIcon = style2.icon;
                  thirdItem.MenuStyleColor = style2.color;
                }
              })
              that.items.push(secondItem)
            });
            let ShortcutMenu = [];
            if (rootItem.ShortcutMenu && rootItem.ShortcutMenu.length>0){
              rootItem.ShortcutMenu.forEach(x => {
                let style = JSON.parse(x.MenuStyle);
                x.MenuStyleIcon = style.icon;
                x.MenuStyleColor = style.color;
                ShortcutMenu.push(x)
              })
              this.ShortcutMenu = ShortcutMenu
            }

          }
        })
        this.activeName = this.items[0].MenuName
      },
      showMenu(item) {
        this.singleMenUlayerShow = true;
        this.singleMenUlayerShow2 = false;
        this.bigIconItems = item.NewChildMenu;
        this.bigIconItems.forEach(item => {
          item.list.forEach(x => {
            let obj = JSON.parse(x.MenuStyle);
            x['MenuStyleIcon'] = obj.icon
            x['MenuStyleColor'] = obj.color
          })
        })
      },
      goUrl(path) {
        if(path=='/JapanHotel' || path=='/KKDayFree'){
            let userInfo = this.getLocalStorage();
            let msg = {
              id:userInfo.EmployeeId
            }
            this.apipost("sellorder_post_GetDesEncrypt",msg,res => {
              if (res.data.resultCode == 1) {
                let urlS = path
                let pageName = urlS =='/JapanHotel' ? 'hotelHome' : 'FreeHome';
                this.EnCodeWord=res.data.data;
                // http://testb2b.oytour.com
                // http://www.oytour.com
                // window.open("http://testb2b.oytour.com/#/"+ pageName +"?uid="+encodeURIComponent(this.EnCodeWord), "_blank");
                window.open("http://t.oytour.com/#/"+ pageName +"?uid="+encodeURIComponent(this.EnCodeWord), "_blank");
              } else {
                  this.Error(res.data.message);
              }
              },
              err => {}
            );
          }else{
            this.$router.push({
              path: path
            })
          }
        }
      }
  }

</script>
<style>
.flash_menu_tit{
  margin: 20px;
  color: #7b7b7b;
  font-size: 14px;
  font-family: 'PingFangR'
}
.flash_menu_left{
  width: 100%;
  padding: 0 18px;
  text-align: center;
}
.flash_menu_left li{
  position: relative;
  width: 50%;
  cursor: pointer;
  margin-bottom: 15px;
}
.flash_menu_left li .icon-Close{
  position: absolute;
  right: 20px;
  top: -5px;
  width: 15px;
  height: 15px;
  display: inline-block;
  background-color: red;
  border-radius: 50%;
  font-size: 12px;
  color: white;
}
.flash_menu_left li div i{
  width: 60px;
  height: 60px;
  display: inline-block;
  font-size: 30px;
  color: white;
  line-height: 56px;
  margin: 0 10px;
  border-radius: 28px;
}
.flash_menu_left li div i.add_more{
  background-color: #d6d6d6;
}
.flash_menu_left p{
  margin-top: 5px;
  font-size: 12px;
}
.choice_icon{
  position: absolute;
  right: 20px;
    top: 10px;
    color: #d8d8d8;
    background: white;
    border: 1px solid #e9e9e9;
    height: 15px;
    font-size: 12px;
    line-height: 15px;
}
.choice_icon._active{
  color: red;
}
.flash_menu{
  text-align: center;
  position: relative;
  margin: 5px;
  padding: 10px;
  width: 97px;
}
.flash_menu .menu_icon i.iconfont{
  width: 56px;
  height: 56px;
  display: inline-block;
  font-size: 30px;
  color: #fff;
  line-height: 60px;
}
.flash_menu .flash_menu_name{
  font-size: 12px;
  margin-top: 5px;
}
.flash_menu .el-checkbox__input{
  position: absolute;
  right: 0;
}
  .leftNav .shortcutsDiv {
    background-color: rgba(114, 114, 114, 0.1);
    width: 264px;
    border-radius: 6px;
    position: absolute;
    padding-bottom: 5px;
    top: 30px;
    left: 30px;
    bottom: 30px;
    overflow-y: auto;
    z-index: 0;
    display: block;
  }

  .leftNav .shortcutsDiv::before {
    content: "";
    position: absolute;
    filter: blur(20px);
    z-index: -2;
  }

  .leftNav .shortcutsDiv .rgba {
    /* background-color: rgba(114, 114, 114, 0.1); */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .leftNav .shortcuts {
    overflow: hidden;
  }

  .leftNav .shortcuts li.more_menu {
    font-size: 12px;
    width: 70px;
    height: 120px;
    color: #666;
    text-align: center;
  }

  .leftNav .shortcuts li.more_menu>div {
    width: 70px;
    height: 70px;
    padding: 10px 0;
    background: #FFF;
    border-radius: 28px;
    margin: 10px 0;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #DFDFDF;
  }

  .leftNav .shortcuts li.more_menu>div>i {
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-top: 5px;
    border-radius: 8px;
    color: #fafafa;
    font-size: 12px;
  }

  .leftNav .shortcuts li.more_menu>div>i:nth-child(2n+1) {
    margin-left: 12px;
  }

  .leftNav .shortcuts li.more_menu>div>i:nth-child(2n) {
    margin-left: 5px;
  }

  .leftNav .shortcuts li.more_menu>div>i:nth-child(n+5) {
    margin-top: 20px;
  }

  .leftNav .shortcuts li.more_menu:nth-child(2n+1) {
    float: left;
    margin-left: 40px;
  }

  .leftNav .shortcuts li.more_menu:nth-child(2n) {
    float: right;
    margin-right: 40px;
  }

  .leftNav .shortcuts li.more_menu a img {
    margin-bottom: 12px;
  }

  .leftNav .customMenu {
    font-size: 12px;
    text-align: center;
    color: #666;
    overflow-y: auto;
  }

  .leftNav .customMenu li>div {
    width: 70px;
    height: 70px;
    background: #eee;
    border-radius: 28px;
    border: 1px solid #eee;
    margin: 20px 0;
    cursor: pointer;
  }

  .leftNav .customMenu li:nth-child(2n+1) {
    float: left;
    margin-left: 40px;
  }

  .leftNav .customMenu li:nth-child(2n) {
    float: right;
    margin-right: 40px;
  }

  .leftNav .addCustomMenu>div {
    line-height: 70px;
    color: #CBCBCB;
    background: #fff !important
  }

  .leftNav .singleMenUlayer {
    position: absolute;
    background: #fff;
    box-shadow: 2px 2px 0 rgba(88, 88, 88, .1);
    border-radius: 6px;
    left: 320px;
    top: 30px;
    width: 640px;
    min-height: 300px;
    z-index: 500;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #F1f1f1;
    cursor: pointer;
  }

  .leftNav .singleMenUlayer ul li {
    float: left;
    width: 70px;
    margin: 10px 30px 0 0;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    text-align: center;
    min-height: 110px;
  }

  .leftNav .singleMenUlayer ul li div {
    width: 56px;
    height: 56px;
    margin: 8px auto;
    text-align: center;
    line-height: 60px;
    border-radius: 28px;
    overflow: hidden;
  }

  .leftNav .singleMenUlayer ul li div i {
    width: 56px;
    height: 56px;
    display: inline-block;
    font-size: 30px;
    color: #fff;
    background: #00B8EC;
  }

  .leftNav .updateIcon {
    text-align: right;
    padding: 10px 10px 0px;
  }

  .leftNav .updateIcon i {
    cursor: pointer;
    color: #999;
    font-size: 18px;
  }

  .leftNav .icon-ego-guanbi {
    position: absolute;
    right: 15px;
    top: 15px;
    color: #333;
    cursor: pointer;
  }

  .leftNav .icon-ego-guanbi:hover {
    color: #999;
  }

</style>
