<template>
  <el-container class="container">
    <el-header class="header">
      <img src="@/assets/images/logo.png" alt="">

      <el-select v-model="lg" placeholder="请选择">
        <el-option v-for="item in lgs" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <a @click="quit" class="span">
        <icon name="cancel" class="icon" />注销
      </a>
    </el-header>
    <el-container>
      <el-aside width="240px" class="aside">
        <p>导航面板</p>
        <div class="nav">
          <router-link :to="{name: nav.name}" v-for="nav in navs" :key="nav.name" :class="'p'+ (nav.active ? ' active': '')" >
            <icon :name="nav.icon + (nav.active ? 'active': '')" class="i" />{{nav.text}}
          </router-link>
        </div>
      </el-aside>
      <el-main class="main">
        <div class="nav-head">
          <h4>
            {{info.title}}
            <p v-for="(param, i) in tools" :key="i">
              <span :class="param.class">
                <i>{{param.key}}</i>
                <b>{{param.value}}</b>
              </span>
            </p>
          </h4>
          <div>
            <router-link v-for="path in paths" :key="path.name" :to="{name: path.name}" class="link" v-if="path.remarks">
              {{path.remarks}}
            </router-link>
          </div>
        </div>
        <keep-alive>
          <router-view class="show-view" v-if="$route.meta.cache" />
        </keep-alive>
        <router-view class="show-view" v-if="!$route.meta.cache" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import icon from '@/components/icons'

function queryPath (router, name) {
  let paths = []
  let result = null

  for (let i = 0; i < router.length; i++) {
    if (router[i].children) {
      result = queryPath(router[i].children, name)
    }
    if (result) {
      paths.push(router[i])
      break
    } else if (router[i].name === name) {
      result = [router[i]]
      break
    }
  }
  return paths.concat(result || [])
}

global.lg = Number(sessionStorage.getItem('lg')) || 1

export default {
  data () {
    return {
      router: this.$router.options.routes,
      paths: [],
      tools: [],
      navs: [
        {
          text: '首页',
          name: 'home',
          icon: 'home',
          active: false
        },
        {
          text: '客户案例',
          name: 'caseList',
          icon: 'case',
          active: false
        },
        {
          text: '新闻报道',
          name: 'newsList',
          icon: 'news',
          active: false
        },
        {
          text: '媒体资料',
          name: 'mediaInfo',
          icon: 'news',
          active: false
        },
        {
          text: '人才招聘',
          name: 'personnel',
          icon: 'news',
          active: false
        }
      ],
      lg: global.lg,
      lgs: [
        {label: '中文', value: 1},
        {label: '英文', value: 2},
        {label: '德文', value: 3}
      ]
    }
  },
  computed: {
    info () {
      let current = null
      for (let i = this.paths.length - 1; i >= 0; i--) {
        current = this.paths[i]
        if (current.remarks) break
      }

      return {
        title: current && current.remarks,
        name: current && current.name
      }
    }
  },
  watch: {
    info: {
      deep: true,
      handler () {
        this.navs.forEach(nav => {
          if (~this.paths.findIndex(path => path.name === nav.name)) {
            nav.active = true
          } else {
            nav.active = false
          }
        })
      }
    },
    lg: {
      immediate: true,
      handler (newVal, oldVal) {
        sessionStorage.setItem('lg', newVal)
        if (oldVal) {
          location.reload()
        }
      }
    }
  },
  methods: {
    async quit () {
      let result = await this.$http.post('/user/sinout')
      if (result) {
        this.$router.push({name: 'login'})
        sessionStorage.removeItem('name')
      }
    }
  },
  created () {
    this.paths = queryPath(this.router, this.$router.history.current.name)
    this.$root.Bus.$on('addTool', data => {
      this.tools.push(data)
    })
    this.$root.Bus.$on('rmTool', data => {
      let index = this.tools.indexOf(data)
      ~index && this.tools.splice(index, 1)
    })
  },
  beforeRouteUpdate (to, from, next) {
    this.paths = queryPath(this.router, to.name)
    next()
  },
  components: {icon}
}
</script>

<style scoped>
  @import url('./style.css');
</style>
