<template lang='pug'>
  .sidebar-wrapper
    .control(':class'="{open:sidebarUnfoldInfo,close:!sidebarUnfoldInfo}")
    .sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
      .logo
        img(':src'="logo")
      .item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:firstIndex === itemIndex}")
        sidebar-item&attributes({
          ':icon':'item.ico',
          ':link':'item.link',
          ':type':'item.type',
          ':id':'item.id',
          ':name':'item.name',
          ':pid':'item.pid',
          ':grade':'item.grade',
          ':sort':'item.sort'
        })
      transition(name="fade",mode="out-in",appear)
        .childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
          .children-item
            el-menu&attributes({
              'ref':"menu",
              'class':"el-menu-vertical",
              'background-color':"#374A5E",
              'text-color':"#fff",
              'unique-opened':true,
              'active-text-color':"#fff",
              'mode':'vertical',
              '@select':"selectItemMenu"
            })
              el-submenu(':index'="index | toString",'v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
                template(slot="title")
                  span {{it.name}}
                template
                  el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",@click="choseSubChildren(i)")
                    span.menu-item-name {{i.name}}
      .arrow-tip(':class'="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
        img(class='icon-arrow',':class'="{right:!sidebarUnfoldInfo}","src"='@/assets/images/sidebar/left-arrow-gray.png')
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { calcIndexPathByCurrentRouter } from '@/utils'
import sidebarItem from '../sidebarItem'

const CrossStorageClient = require('cross-storage').CrossStorageClient
const crmDomain = location.hostname
const crossStorage = new CrossStorageClient(`${crmDomain}/hub.jsp`, {
	timeout: 5000,
	frameId: 'storageFrame',
})
const logo = require('@/assets/images/sidebar/logo-blue.png')

export default {
	data() {
		return {
			collapse: false,
			logo,
			// unfold: false, // 水平展开
			unfoldBtn: false, // 展开按钮
			firstIndex: 0,
			secondIndex: 0,
			thirdIndex: 0,
			currentMenus: [],
		}
	},
	filters: {
		toString(value) {
			return value + ''
		},
		pipeString(...args) {
			return args.join('-')
		},
	},
	components: {
		sidebarItem,
	},

	computed: {
		...mapGetters({
			menus: 'getMenus',
			currentPath: 'getCurrentPath',
			project: 'getProjectInfo',
			sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
		}),
	},
	mounted() {},
	methods: {
		handleOpen() {
			const currentIndexPath = [this.firstIndex, this.secondIndex, this.thirdIndex]
			const menus = this.$refs.menu
			this.$nextTick(() => {
				if (currentIndexPath.join('-') === this.currentPath.join('-')) {
					menus.open(this.secondIndex)
				} else {
					menus.close(this.secondIndex)
				}
			})
		},
		// 隐藏边侧栏，边侧栏最小化
		handerNoSidebar() {
			this.setSidebarUnfold(false)
		},
		/**
		 * 选择边测菜单主菜单
		 */
		choseMenu(selectItem, selectItemIndex) {
			this.firstIndex = selectItemIndex
			if (!this.sidebarUnfoldInfo) {
				this.toggleUnfold(true)
			}
		},
		/**
		 * 二级菜单
		 **/
		choseChildrenItem(item) {
			if (item.link) {
				// this.$router.push({
				// 	path: `/${item.link}`,
				// })
			}
		},
		/**
		 * 三级菜单
		 * @param args
		 **/
		selectItemMenu(item) {
			const firstIndex = this.firstIndex
			if (firstIndex > -1) {
        const [idx1, idx2] = item.split('-').reverse()
        const historyIndex = (firstIndex + '' + idx1 + '' + idx2 + '').split('').join(',')
        const historyItemName = this.menus[firstIndex].children[idx1].children[idx2].name
				const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
        const storeId = this.project.data.userDto.storeUserInfo.storeId
				const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId) ? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId)): []

        // 1.相同不添加 2.相同提到最前面
        menuHistoryJson.forEach((item,i)=> {
            if(item.index === historyIndex){
              menuHistoryJson.splice(i, 1);
              return false;
            }
        })
        // 开头添加
				menuHistoryJson.unshift({
					name: historyItemName,
					index: historyIndex,
					time,
        })
        let list = [...menuHistoryJson]
        if (list.length > 15) {
          list = list.slice(0, 15)
        }

        this.$store.commit('MENU_HISTORY_JSON', {
          name:'menuHistoryJson' + storeId,
          value: JSON.stringify(list)
        })

				localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(list))
				crossStorage.onConnect().then(function() {
					return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(list))
				})
			}
		},
		toggleUnfold(...args) {
			if (!args.length) {
				this.setSidebarUnfold(!this.sidebarUnfoldInfo)
			} else {
				this.setSidebarUnfold(args[0])
			}
		},
		hiddenUnfoldBtn() {
			this.unfoldBtn = false
		},
		showUnfoldBtn() {
			this.unfoldBtn = true
		},
		choseSubChildren(item) {
			// this.$router.push({
			// 	path: `/${item.link}`,
			// })
		},
		getCurrentMenus(index) {
			return this.menus[index]
		},
		...mapActions(['setSidebarUnfold']),
	},
	watch: {
		firstIndex(val) {
			this.currentMenus = this.getCurrentMenus(val)
			this.$nextTick(() => {
				this.handleOpen()
			})
		},
		currentPath(val) {
			if (val.length) {
				const [first, second, third] = [...val]
				this.firstIndex = first
				this.secondIndex = second
				this.thirdIndex = third
			}
			console.log('currentPath is %o', val)
		},
	},
}
</script>
<style lang="stylus" scoped>
.sidebar-wrapper
  position relative
  height 100px
  display inline-block
  z-index 100
.sidebar
  position fixed
  left 0
  top 0
  bottom 0
  width 70px
  &::after
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    content ''
    background #2A3F54
    z-index -1
.arrow-tip
  position absolute
  top 50%
  width 48px
  height 48px
  line-height 48px
  border-radius 50%
  text-align center
  background-color rgba(55, 74, 94, 0.5)
  transform translateX(-50%)
  transition all 0.2s
  cursor pointer
  z-index -2
  &.left-l
    left 70px
  &.left-ll
    left 240px
.icon-arrow
  display inline-block
  margin-left 15px
  width 8px
  &.right
    transform rotateY(180deg)
.control
  visibility hidden
  height 100px
  &.close
    width 70px
    transition width ease-in-out 0.2s
  &.open
    width 240px
    transition width ease-in-out 0.2s
.logo
  text-overflow ellipsis
  overflow hidden
  font-weight 400
  font-size 22px
  width 100%
  color #ECF0F1
  line-height 59px
  display block
  height 65px
  margin 10px auto
  padding-left 5px
  padding-top 5px
  img
    width 60px
.item
  position relative
  display block
  cursor pointer
  text-align center
  & + &
    margin-bottom 6px
.active::after
  display block
  content ''
  background #1ABB9C
  width 5px
  position absolute
  right 0
  top 10px
  height 47px
.childrens-meuns
  position absolute
  top 0
  left 70px
  bottom 0
  width 170px
  background #374A5E
  z-index -1
  zoom 1
  .children-item
    text-align left
    margin-bottom 6px
.el-menu
  border-right none
  .el-submenu .el-menu-item
    min-width auto
.el-menu-item
  position relative
  padding 0 10px 0 36px
  box-sizing border-box
  &::before
    box-sizing border-box
    background #425668
    bottom auto
    content ''
    height 9px
    left 18px
    margin-top 20px
    position absolute
    right auto
    width 9px
    z-index 1
    border-radius 50%
  &::after
    box-sizing border-box
    border-left 1px solid #425668
    bottom 0
    content ''
    left 22px
    position absolute
    top 0
.menu-item-name
  position relative
  display block
  font-weight 400
  font-size 10px
</style>
