<template>
    <div class="about" @click="hiddenThemeMethods">
        <v-header />
        <v-sidebar />
        <div class="content-box" :class="{ 'content-collapse': collapse }">
            <v-tags></v-tags>
            <div class="content">
                <router-view v-slot="{ Component }">
                    <transition name="move" mode="out-in">
                        <keep-alive :include="tagsList">
                            <component :is="Component" />
                        </keep-alive>
                    </transition>
                </router-view>
                <!-- <el-backtop target=".content"></el-backtop> -->
            </div>
            <!-- <div class="fixed-plugin"  @click.stop="themeStatus=true">
              <div class="dropdown">
                <i class="iconfont httpicon-xitongguanli" @click.stop="showThemeMethods"></i>
                <ul class="dropdown-menu pb-2" v-show="themeStatus">
                    <li class="header-title">主题</li>
                    <li class="adjustments-line">
                      <div href="" class="switch-trigger background-color">
                        <div class="badge-colors text-center">
                          <span class="badge badge-info" :class="themesCss=='primary'?'active':''" @click.stop="selectThemeMethods('primary')"></span>
                          <span class="badge badge-vue" :class="themesCss=='vue'?'active':''" @click.stop="selectThemeMethods('vue')"></span>
                          <span class="badge  badge-primary" :class="themesCss=='info'?'active':''" @click.stop="selectThemeMethods('info')"></span>
                          <span class="badge badge-success" :class="themesCss=='success'?'active':''" @click.stop="selectThemeMethods('success')"></span>
                        </div>
                      </div>
                    </li>
                </ul>
              </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import vHeader from "../components/Header";
import vSidebar from "../components/Sidebar";
import vTags from "../components/Tags.vue";
export default {
		inject: ['reload'],
    components: {
        vHeader,
        vSidebar,
        vTags
    },
    data(){
      return{
        themeStatus:false,
        themesCss:''
      }
    },
    mounted() {
      var themesCss = localStorage.getItem('cssStyle') || 'primary';
      this.themesCss=themesCss
    },
    methods:{
      showThemeMethods(){
        this.themeStatus=!this.themeStatus
      },
      hiddenThemeMethods(){
         this.themeStatus=false
      },
      selectThemeMethods(name){
        localStorage.setItem('cssStyle',name)
        this.themesCss=name
        this.reload()
      },
    },
    computed: {
        tagsList() {
            return this.$store.state.tagsList.map(item => item.name);
        },
        collapse() {
            return this.$store.state.collapse;
        }
    }
};
</script>
<style type="text/css" scoped="scoped">
  .fixed-plugin{
    position: fixed;
    right: 0;
    width: 64px;
    background: rgba(0,0,0,.3);
    z-index: 1031;
    border-radius: 8px 0 0 8px;
    text-align: center;
    top: 130px;
    height: 50px;
    cursor: pointer;
  }
  .fixed-plugin .httpicon-xitongguanli{
    color: #fff;
    border-radius: 0 0 6px 6px;
    width: auto;
    font-size: 40px;
    position: absolute;
      transform: translateX(-50%) translateY(-50%);
      top: 50%;
      left: 50%;
  }
  .dropdown-menu{
    position: absolute;
    right: 80px;
    left: auto;
    top: -6px;
    width: 290px;
    border-radius: 0.1875rem;
    /* padding: 0 10px; */
    background: linear-gradient(#222a42,#1d253b);
  }
  .dropdown-menu::before{
    content: "";
        display: inline-block;
        position: absolute;
        top: 74px;
        width: 16px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        border-bottom: 0.4em solid transparent;
        border-left: 0.4em solid rgba(0,0,0,.2);
        border-top: 0.4em solid transparent;
        right: -16px;
        top: 46px;
  }
  .header-title{
    color: #fff;
        height: 30px;
        line-height: 25px;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
  }
  .fixed-plugin .badge {
      border: 2px solid #fff;
      border-radius: 50%;
      cursor: pointer;
      display: inline-block;
      height: 23px;
      margin-right: 5px;
      position: relative;
      width: 23px;
  }
  .badge-primary{
    color: #fff;
    background-color: #e14eca;
  }
  .badge-vue {
      background-color: #42b883;
  }
  .badge-info {
      color: #fff;
      background-color: #1d8cf8;
  }
  .badge-success {
      color: #fff;
      background-color: #00f2c3;
  }
  .fixed-plugin .badge.active, .fixed-plugin .badge:hover {
      border-color: #1d253b;
  }
  /* .content{
    background-color: #F0F0F0;
  } */
</style>
