<template>
  <div class="content">
    <div class="zd_wrapper">
      <div class="menu-wrap">
        <div class="menu-item" v-for="(e, i) in menuList" :key="i" @click="toPage1(e)">
          <img class="menu-img" :src="require('../../images/menu/' + e.path + '.png')" alt="">
          <div class="menu-name">{{e.name}}</div>
        </div>
      </div>
    </div>
    <div v-if="show === true" class="sec_menu_wraper">
      <div class="sec_menu_w">
        <div class="menu-item" v-for="(e, i) in secM" :key="i" @click="toPage2(e)">
          <div class="sec_menu-col_inner">
            <div class="menu-name menu-name_inner">{{e.name}}</div>
          </div>
        </div>
      </div>
      <div class="cancel">
        <div class="iconfont close_icon" @click="show = false"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {authority} from './../../config/getData1.js'
export default {
  data () {
    return {
      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
      menuList: [],
      show: false,
      secM: []
    }
  },
  created () {
    this.$store.dispatch('setMaterObj', '')
    this.$store.dispatch('setKeepAlive', [])
    localStorage.removeItem('materObj')
    localStorage.removeItem('keepAlive')
    this._authority()
  },
  methods: {
    async _authority () {
      let res = await authority()
      this.menuList = [...res.sonTree]
    },
    toPage1 (e) {
      if (e.sonTree.length > 0) {
        this.show = true
        this.secM = e.sonTree
      }
    },
    toPage2 (e) {
      let url = e.path
      let name = url.substr(1)
      if (name === 'semifinishedinstore' || name === 'semifinishedoutstore') {
        this.$store.dispatch('setKeepAlive', [name])
      }
      this.$router.push(url)
    },
    Quit () {
      this.$store.dispatch('delUserInfo')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin.styl'
.zd_content
  padding-top 0
.header
  height 42px
  _font(16px,42px,#333,,center)
.userInfo-wrap
  _fj()
  _wh(calc(100% - 30px),80px)
  padding 0 15px
  _bis($red,'../../images/info_bg.png',auto,100%,right,bottom)
  border-radius 12px
  margin 0 auto 15px auto
.userInfo
  _fj(,flex-start,column)
.p1
  _font(16px,1,#fff)
  padding-bottom 8px
.p2
  _font(13px,1,#fff)
.exit
  _fj()
  height 22px
  padding 0 7px
  border 1px solid #FF967C
  border-radius 10px
.icon-exit
  _wh(10px, 10px)
  // _bis(,'../../images/exit.png',11px)
.exit-text
  _font(12px,22px,#fff,,right)
  padding-left 5px
.zd_wrapper
  _wh(calc(100% - 30px),calc(100% - 152px)) /** 42+80+15+15 */
  padding 35px 5%
  // background-color #fff
  border-radius 12px
  margin 0 auto 15px auto
.menu-wrap
  _fj(flex-start,center,,wrap)
  height 100%
.menu-item
  _fj()
  flex-direction column
  _wh(30%, auto)
  margin-bottom 20px
  _font(13px, 30px,#e74f1a,,center)
::v-deep .menu-img
  _wh(100%, auto)
  img
    position relative
    opacity 1
    _wh(55%, auto)
    max-width 90px
    margin 0 auto 0.1px
.menu-name
  _font(14px, 18px, #fff,,center)
.sec_menu_wraper
  position fixed
  top 0
  left 0
  _wh(100%, 100%)
  background-color rgba(0, 0, 0, .9)
  z-index 2017
  flex-direction column
.sec_menu_w
  _fj()
  _wh(calc(100% - 30px), calc(100% - 50px))
  padding 0 12px
  margin 0 auto
  flex-wrap wrap
  align-content center
  &::after
    content ''
    display block
    _wh(30%,0)
.sec_menu-col
  background-color transparent
  border none
  height auto
.sec_menu-col_inner
  _fj(center)
  _wh(80px, 80px)
  border-radius 50%
  background-color $yellow
  margin 0 auto
.menu-name_inner
  color #fff
  padding 0 10px
.cancel
  _wh(100%, 50px)
  padding 0 12px
  overflow hidden
  background-color rgba(255, 255, 255, .3)
  box-shadow 0 0.5px 2px 0 rgba(160,160,160,0.9)
  .close_icon
    text-align left
    font-size 40px
    line-height 40px
    position relative
    bottom 10px
</style>
