<template>
  <div :class="isTablet ? 'tablet-adapter' : ''" class="app-layout">
    <TopNav />
    <div :class="{'has-left-menu': showMenus}" class="app-main">
      <div v-if="showMenus" class="app-menu">
        <LeftMenu/>
      </div>
      <div :class="showMenus ? 'fix-height' : ''" class="app-content">
        <keep-alive :include="cachedViews">
          <router-view :key="key"/>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from '@/components/TopNav'
import LeftMenu from '@/components/LeftMenu'

export default {
  name: 'Layout',
  components: { TopNav, LeftMenu },
  data() {
    return {
      isTablet: window.OS.isTablet
    }
  },
  computed: {
    cachedViews() {
      return this.$store.state.stepView.cachedViews
    },
    key() {
      return this.$route.path
    },
    showMenus() {
      const name = this.$route.name
      return ['CarAuth1', 'CarAuth2', 'DealerManagement', 'UserManagement', 'CarCardManagement', 'OrganizationManagement', 'AgreementManagement', 'SystemLog', 'CarInfoManagement', 'AuditList', 'WorkOrderRnrList'].includes(name)
    }
  }
}
</script>

<style lang="scss">
.app-layout {
  min-height: 100%;
  height: 100%;
  width: 100%;

  .app-main {
    padding: 0;
    display: flex;
    min-height: calc(100% - 60px);
    &.has-left-menu {
      border-top: 1px solid #E5E6EC;
    }
    .app-menu {
      position: relative;
      padding-top: 12px;
      max-width: 209px;
      border-right: 1px solid #E5E6EC;
      background: #fff;
      flex: none;
    }
    .app-content {
      flex: 1;
      width: 0;
      overflow: auto;
      &.fix-height {
        height: calc(100vh - 61px);
      }
    }
    .el-menu {
      border-right: 0 none;
      .icon-menu {
        width: 18px;
        height: 18px;
        display: inline-block;
        &.basic {
          background: url(../../assets/image/menu_basic.svg) no-repeat 0 0 / 18px 18px;
        }
        &.count {
          background: url(../../assets/image/menu_count.svg) no-repeat 0 0 / 18px 18px;
        }
      }
    }
    .el-menu--collapse {
      width: 60px;
      .icon-menu {
        width: 24px;
        height: 24px;
        display: inline-block;
        &.basic {
          background: url(../../assets/image/menu_basic.svg) no-repeat 0 0 / 24px 24px;
          &:hover {
            background: url(../../assets/image/menu_basic_hover.svg) no-repeat 0 0 / 24px 24px;
          }
        }
        &.count {
          background: url(../../assets/image/menu_count.svg) no-repeat 0 0 / 24px 24px;
          &:hover {
            background: url(../../assets/image/menu_count_hover.svg) no-repeat 0 0 / 24px 24px;
          }
        }
      }
      .el-submenu__title {
        padding: 0 18px !important;
      }
    }
    .el-submenu__title {
      padding: 0 30px !important;
      &:hover {
        background: #fff;
        color: #2A68FF;
      }
    }
    .el-submenu__title,
    .el-submenu .el-menu-item {
      margin-top: 8px;
      height: 40px;
      line-height: 40px;
    }
    .el-submenu__icon-arrow {
      margin-top: -5px;
    }
    .el-submenu .el-menu-item {
      border-radius: 2px;
      min-width: auto;
      margin: 8px 18px 0 12px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      position: relative;
      &.is-active,
      &:hover {
        background: rgba(42, 104, 255, 0.08);
        color: #2A68FF;
      }
      &.is-active {
        &:after {
          content: '';
          width: 3px;
          height: 24px;
          background: #2A68FF;
          position: absolute;
          top: 50%;
          right: 0;
          margin-top: -12px;
        }
      }
    }
  }

  &.tablet-adapter {
    .page-home {
      .page-home-other-service {
        .page-home-row {
          width: 100%;
          max-width: 960px;
          .page-home-column-middle {
            width: 33.33%;
          }
          .page-home-column-large {
            width: 50%;
          }
        }
      }
    }
    .el-dialog {
      max-width: 800px;
    }
    .page {
      .vin-input-wrapper {
        width: 100%;
      }
    }
    .page-steps, .page-module {
      width: 100%;
      max-width: 960px;
    }
    .cbt-el-radio-group {
      .cbt-el-radio {
        width: 100%;
        max-width: 960px;
      }
    }
  }
}
</style>
