<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:currentMainMenuIndex === 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",
              'default-active':"2",
              '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, // 展开按钮
			currentMainMenuIndex: 0, //mainIndex
		}
	},
	filters: {
		toString(value) {
			return value + ''
		},
		pipeString(...args) {
			return args.join('-')
		},
	},
	components: {
		sidebarItem,
	},

	computed: {
		...mapGetters({
			menus: 'getMenus',
			currentPath: 'getCurrentPath',
			project: 'getProjectInfo',
			sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
		}),
		currentMenusIndex() {
			let res = -1
			if (this.currentPath && this.currentPath.length) {
				res = this.currentPath[0]
				this.$nextTick(() => {
					this.handleOpen()
				})
			}
			return res
		},
		currentMenus: {
			get() {
				// const currentIndex = this.currentMenusIndex
				const currentIndex = this.currentMainMenuIndex
				const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)

				this.$nextTick(() => {
					if (this.currentMenus) {
						this.handleOpen()
						// console.log('---', this.currentMenus)
					}
				})
				return currentMenus
			},
		},
	},
	mounted() {},
	methods: {
		handleOpen() {
			const menus = this.$refs.menu
			const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0
			console.log('openIndex', openIndex)
			menus.open(openIndex)
		},
		// calcRouter(menus) {
		// 	const currentRoute = location.href
		// 	const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
		// 	this.selectIndexPath = indexPath
		// 	console.log(this.selectIndexPath)
		// },
		// 隐藏边侧栏，边侧栏最小化
		handerNoSidebar() {
			console.log('handerNoSidebar')
			this.setSidebarUnfold(false)
		},
		/**
		 * 选择边测菜单主菜单
		 */
		choseMenu(selectItem, selectItemIndex) {
			this.currentMainMenuIndex = selectItemIndex
			if (!this.sidebarUnfoldInfo) {
				this.toggleUnfold(true)
			}
		},
		/**
		 * 二级菜单
		 **/
		choseChildrenItem(item) {
			if (item.link) {
				this.$router.push({
					path: `/${item.link}`,
				})
			}
		},
		/**
		 * 三级菜单
		 * @param args
		 **/
		selectItemMenu(item) {
			console.log(item)
			const currentMenusIndex = this.currentMenusIndex
			if (currentMenusIndex > -1) {
				const [idx1, idx2] = item.split('-').reverse()
				const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name
				const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
				const storeId = this.project.store_id
				const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId)
					? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId))
					: []
				menuHistoryJson.push({
					name: historyItemName,
					time,
					index: `${(currentMenusIndex, idx1, idx2)}`,
				})
				localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
				crossStorage.onConnect().then(function() {
					return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
				})
			}
		},
		toggleUnfold(...args) {
			console.log(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']),
	},
}
</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>
