/*layout模板*/
<template>
  <div>
    <div class="lbg_color1" :class="['header',fixedHeader?'fixed-header':'']">
  
           <router-link to="/home">
        <div class="logo">
        <el-image :src="logo" fit="cover" /> </div>
        <!-- <span class="title">CADWEB</span> -->
        </router-link> 
      <div
        class="nav"
        v-if="$route.path!='/login/index' && $route.path!='/register/index' && $route.path!='/forget/index'&& $route.path!='/protocol/index'"
      >
        <el-menu
         class="lbg_color1 font_color1" 
          mode="horizontal"
          :unique-opened="true"
          text-color="#0470CC"
          active-text-color="#333"      
          :default-active="activeMenu"
        >
          <div class="headericon">
            <ul>
              
              <li ><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i>  </el-tooltip> </li> 
              <li ><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i>  </el-tooltip></li>
              <li  @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li>

              <li>
                <span >  <i class="el-icon-question" style="padding:1px 0"></i>
                <i style="font-size:12px;padding:5px 0" class="el-icon-arrow-down"></i>
                  
                </span>
                </li>
            </ul>
            </div>
    
          <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>
      <el-dialog
  :visible.sync="dialogsystem"
  title="系统设置"
  width="800px"
  >
  <div>
   <button v-for="(item,index) in itemlist" :key='index'  @click="clicksel(index)">{{item.name}}</button>
    </div>
    <!-- <span :data-theme='theme'></span> -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogsystem = false">清 除</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { resetRouter } from '@/router'
import { mapGetters } from 'vuex'
import { MenuItem } from './components'
import logo from '@/assets/hcfd_images/adilog.png'
export default {
  name: 'LayoutWeb',
  components: {
    MenuItem
  },
  data() {
    return {
     logo: logo,
      dialogsystem:false,
        itemlist:[
     {
       id:0,name:"黑色",
     },
       {
       id:1,name:"白色",
     }
     ],
     num:0,
    }
  },
  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))
      if(localStorage.getItem("num")==0){
  document.getElementById('theme').href="/static/black.css"
    }else{
        document.getElementById('theme').href="/static/white.css"
    }
  },
  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: '已取消'
          })
        })
    },
    //  主题替换
  clicksel(index){
      if(index==0){
        console.log(111)
        this.num=0;
      localStorage.setItem("num",this.num);
        document.getElementById('theme').href="/static/black.css"
      }else if(index==1){
           console.log(222)
         this.num=1;
            localStorage.setItem("num",this.num);
         document.getElementById('theme').href="/static/white.css"
      }else{

      }
    },
  }
}
</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();

   -moz-box-shadow: 2px 6px 11px #909090;

   -webkit-box-shadow:2px 6px 11px #666;

   box-shadow:2px 6px 11px #666;
  }
  &-footer {
    // @include position(fixed, auto, 0, 0, 0, 9);
    @include w_h();
  }
}

.header {
  padding: 0 20px;
  @include flex();
  @include w_h(100%, 40px);
  min-width: 1000px;
//background: $color_f;
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.04);
      // background-color:#757070;
  .logo {
    @include w_h(100px);
   .el-image{
          margin-top: 5px;
    }
  }

  .nav {
    @include flex();
    height: 100%;
    font-size: 14px;
    .el-menu {
      height: 100%;
      border: none;
    }
    .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;
  }

  &-index {
    background: #03000b;
  }
}
.el-menu-item a{
  color: #fff
}
</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;
    &:hover{
   background-color: rgba($color: #fff, $alpha: 0.3);
    }
  }

  .el-menu--horizontal > .el-menu-item a {
    display: block;
  }
}
.headericon{
  ul{
    display: flex;
    li{
      flex: 1;
     padding: 5px 5px;
      font-size: 20px;
      cursor: pointer;
      &:hover{
        background-color: rgba($color: #fff, $alpha: 0.3) !important;
      }
      span{
        display: flex;
      }
    }
  }
}
.title{
  font-size: 24px;
  color: #fff;
}
</style>
