/*layout模板*/
<template>
  <div>
    <div :class="['header',fixedHeader?'fixed-header':'']">
      <div class="logo">
        <el-image :src="logo" fit="cover" />
      </div>

      <div
        class="nav"
        v-if="$route.path!='/login/index' && $route.path!='/register/index' && $route.path!='/forget/index'&& $route.path!='/protocol/index'"
      >
        <el-menu
          mode="horizontal"
          :unique-opened="true"
          text-color="#0470CC"
          active-text-color="#333"
          background-color="#fff"
          :default-active="activeMenu"
        >
          <!-- <menu-item
            v-for="route in routes"
            :key="route.path"
            :item="route"
            :base-path="route.path"
          />-->
          <el-menu-item index="/index/optics">
            <router-link to="/index/optics">首页</router-link>
          </el-menu-item>

          <el-menu-item v-if="loginStatus">
            <router-link to="/user/index/project">
              <div class="user">
                <el-dropdown>
                  <div>
                    <span :title="name">{{ name }}</span>
                    <i class="el-icon-arrow-down" />
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </router-link>
          </el-menu-item>
          <el-menu-item v-else>
            <router-link to="/login/index">登录/注册</router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </div>

    <section class="app-main">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="key" />
      </transition>
    </section>

    <div
      :class="['footer',fixedHeader?'fixed-footer':'',/^\/index([\/][\D]+)?$/.test($route.path)?'footer-index':/^\/login\/index$/.test($route.path)?'footer-login':'']"
    >
      <div>
        西安前沿动力软件开发有限责任公司
        <a
          target="_blank"
          href="http://www.beian.miit.gov.cn/"
        >备案号：渝ICP备 17006571号-1</a>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { resetRouter } from '@/router'
import { mapGetters } from 'vuex'
import { MenuItem } from './components'
import logo from '@/assets/logo.png'
export default {
  name: 'LayoutWeb',
  components: {
    MenuItem
  },
  data() {
    return {
      logo: logo
    }
  },
  created() {
    let path = this.$route.path
    let Reg = ''
    let reg1 = /^\/index([\/][\D]+)?$/ //首页正则
    let reg2 = /^\/login\/index$/ //登录页正则
    // console.log(path)
    // Reg = reg1
    // console.log(Reg.test(path))
    // Reg = reg2
    // console.log(Reg.test(path))
  },
  computed: {
    fixedHeader() {
      return this.$store.getters.fixedHeader
    },
    ...mapGetters(['name', 'loginStatus']),
    key() {
      return this.$route.path
    },
    routes() {
      return this.$router.options.routes // 导航栏是使用 router.options.routes来遍历生成
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // 如果设置了路径，侧边栏将突出显示您设置的路径
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  methods: {
    quit() {
      this.$store.dispatch('user/changeState', {
        key: 'token',
        value: ''
      })
      this.$store.dispatch('user/changeState', {
        key: 'name',
        value: ''
      })
      this.$store.dispatch('user/changeState', {
        key: 'userId',
        value: ''
      })
      this.$store.dispatch('user/changeState', {
        key: 'loginStatus',
        value: false
      })
      resetRouter() // 重置路由
      this.$message.success('退出成功!')
      setTimeout(() => {
        this.$router.replace(`/login/index?redirect=${this.$route.fullPath}`)
      }, 1000)
    },
    logout() {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let params = { transCode: 'A00004' }
          request(params)
            .then(() => {
              this.quit()
            })
            .catch(err => {
              this.quit()
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
// @import '@/styles/transition.scss';

.fixed {
  &-header {
    @include position(fixed, 0, auto, 0, 0, 9);
    @include w_h();
  }
  &-footer {
    // @include position(fixed, auto, 0, 0, 0, 9);
    @include w_h();
  }
}

.header {
  padding: 0 $pad;
  @include flex();
  @include w_h(100%, 40px);
  min-width: 1000px;
  background: $color_f;
  box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.04);
  .logo {
    @include w_h(70px);
  }

  .nav {
    @include flex();
    height: 100%;
    font-size: 14px;
    .el-menu {
      height: 100%;
      border: none;
      background: $color_f;
      color: #0470cc;
    }
    .user {
      color: inherit;
      span {
        display: inline-block;
        max-width: 100px;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
  }
}

.app-main {
  padding: 0;
  width: 100%;
  height: calc(100vh - 30px);
  min-height: 580px;
}
.fixed-header + .app-main {
  padding: 40px 0 0;
}

.footer {
  @include w_h(100%, 30px);
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  color: #737374;
  background: $color_f5;
  a:hover {
    color: $color_9;
  }
  &-login {
    background: $color_f;
  }
  &-index {
    background: #03000b;
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
.nav {
  .el-dropdown {
    color: inherit;
  }
  .el-menu-item,
  .el-submenu__title {
    height: 40px;
    line-height: 40px;
    color: $color_3;
  }

  .el-menu--horizontal > .el-menu-item a {
    display: block;
  }
}
</style>
