<template>
  <transition name="el-fade-in-linear">
    <router-view v-if="isRouterAlive" />
  </transition>
</template>

<style>
  .el-table th.gutter{
    display: table-cell!important;
  }
</style>
<script>
import Cookies from 'js-cookie'
import { messages } from '@/i18n'
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  watch: {
    '$i18n.locale': 'i18nHandle'
  },
  created() {
    this.i18nHandle(this.$i18n.locale)
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    },
    i18nHandle(val, oldVal) {
      Cookies.set('language', val)
      document.querySelector('html').setAttribute('lang', val)
      document.title = messages[val].brand.lg
      // 非登录页面，切换语言刷新页面
      if (this.$route.name !== 'login' && oldVal) {
        window.location.reload()
      }
    }
  }
}
</script>
<style lang="scss">
  .detail-view {
    height: 100%;
    background: #0c1016;
    padding: 0;
  }
  .detail-view .el-dialog .el-dialog__header > .el-dialog__title{
    color: #FFFFFF;
  }
  .detail-view .el-dialog > .el-dialog__header{
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: linear-gradient(180deg,#0c1016, #2c3543 100%);
    padding: 0;
  }
  .detail-view .el-dialog > .el-dialog__body{
    height: calc(100% - 48px);
    flex: 1;
    background: #0c1016;
    padding: 0;
  }
</style>
