<template>
  <div class="layout">
    <div class="header">
      <div class="menu_wrapper">
        <img @click="$router.push('/home')" src="@/static/images/zzlogo2.png" alt="" v-if="$i18n.locale === 'zh'" />
        <img @click="$router.push('/home')" src="@/static/images/zzlogo4.png" alt="" v-else />
        <el-menu mode="horizontal" background-color="#fff" :default-active="active.toString()" text-color="#333"
          @select="selectTab" active-text-color="#428bca">
          <template>
            <el-menu-item key="0" index="0">{{ $t('home.menuName') }}</el-menu-item>
            <el-submenu key="1" index="1" @click.native="selectTab('1')">
              <template slot="title">
                {{ $t('service.menuName') }}
              </template>
              <el-menu-item key="1-1" index="1-1">{{ $t('service.subMenu1') }}</el-menu-item>
              <el-menu-item key="1-2" index="1-2">{{ $t('service.subMenu2') }}</el-menu-item>
            </el-submenu>
            <el-menu-item key="2" index="2">{{ $t('about.menuName') }}</el-menu-item>
            <el-menu-item key="3" index="3">{{ $t('media.menuName') }}</el-menu-item>
            <el-menu-item key="4" index="4">{{ $t('book.menuName') }}</el-menu-item>
            <el-menu-item key="5" index="5">{{ $t('login.menuName') }}</el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
    <div class="container">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view :key="$route.path + new Date().getTime()"></router-view>
      </keep-alive>
      <router-view :key="$route.path + new Date().getTime()" v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <div class="bottom" style="text-align: center">
      <!-- <a
        target="_blank"
        style="
          color: #fff;
          line-height: 32px;
          font-size: 12px;
          text-align: center;
        "
        >© {{ new Date().getFullYear() }} Elevate Imaging Inc. info@elevateimaging.ai</a
      > -->
      <div class="copyright cf">
        <p class="left">
          <a class="text-color" href="https://beian.miit.gov.cn" target="_blank">Copyright © {{ new Date().getFullYear()
          }}
            上海展影医疗科技有限公司 版权所有 |
            沪ICP备2021037850-2</a>
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002005859"
            style="margin-left:20px;">
            <img src="@/static/images/ba.png" style="vertical-align: middle;">
            <span style="margin: 0px 0px 0px 3px; vertical-align: middle;">沪公网安备 31011002005859号</span></a>
        </p>
        <!-- <a href="javascript:;" class="backTop tre"><i class="fa fa-angle-up"></i></a> -->
        <div class="shares cf">
          <a href="http://weibo.com/u/5834449233?is_all=1" class="a1" target="_blank"><img
              src="@/static/images/weibo.png" alt=""></a>
          <a href="javascript:;" class="a2">
            <img src="@/static/images/wechat.png" alt="">
            <img src="@/static/images/wxqr.jpg" style="width:128px;height:128px;" class="qrCode">
          </a>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        'Home',
        'Services',
        'About',
        'Media',
        'Book'
      ],
      routerList: [
        'home',
        'services',
        'about',
        'media',
        'book'
      ],
      active: '0'
    }
  },
  watch: {
    $route (v) {
      this.changeTab()
    }
  },
  methods: {
    changeTab () {
      if (this.menuList.findIndex((v) => v === this.$route.name) === -1) {
        if (this.$route.name === 'Center Imaging Services') {
          this.active = '1'
        }
        if (this.$route.name === '3D Post Processing Services') {
          this.active = '1'
        }
      } else {
        this.active = this.menuList.findIndex((v) => v === this.$route.name)
      }
    },
    selectTab (v, title) {
      console.log('selectTab')
      if (v === '5') {
        window.open('https://irc.extimaging.com')
        this.changeTab()
      } else {
        if (v.indexOf('-') > -1) {
          switch (v) {
            case '1':
              this.$router.push({ path: '/services' })
              break
            case '1-1':
              this.$router.push({ path: '/services/centralizedImagingServices' })
              break
            case '1-2':
              this.$router.push({ path: '/services/3DPostProcessingServices' })
              break
          }
        } else {
          this.$router.push(`/${this.routerList[v]}`)
        }
      }
    }
  },
  mounted () {
    if (this.menuList.findIndex((v) => v === this.$route.name) === -1) {
      if (this.$route.name === 'Center Imaging Services') {
        this.active = '1'
      }
      if (this.$route.name === '3D Post Processing Services') {
        this.active = '1'
      }
    } else {
      this.active = this.menuList.findIndex((v) => v === this.$route.name)
    }
  }
}
</script>
<style>
.layout .el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 90px;
  line-height: 120px;
  background: #fff !important;
  font-size: 18px;
}

.layout .el-menu--horizontal>.el-submenu .el-submenu__title i {
  line-height: 120px;
}
</style>
<style lang="scss" scoped>
.layout {
  overflow: auto;
  // user-select: none;

  .header {
    background: #fff;
    position: relative;

    p {
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      cursor: pointer;

      &:hover {
        letter-spacing: 5px;

        b {
          letter-spacing: 10px;
        }
      }

      span {
        line-height: 30px;
        position: relative;
        color: #fff;
        font-weight: 400;
        font-size: 24px;
        text-shadow: 0 0 1px rgba(94, 255, 216, 0.8);
        margin-left: 5px;
        letter-spacing: 1px;
        padding: 0;
        z-index: 2;
        transition: all 0.5s ease-out;

        b {
          letter-spacing: 2px;
          color: #fff;
          font-size: 54px;
          transition: all 0.5s ease-out;
          font-weight: normal;
        }
      }
    }

    .menu_wrapper {
      height: 120px;
      max-width: 1226px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 180px;
        cursor: pointer
      }
    }

    .el-menu {
      height: 100%;

      &.el-menu--horizontal {
        border-bottom: none;
      }

      .el-menu-item {
        height: 90px;
        line-height: 120px;
        background: #fff !important;
        font-size: 18px;
      }
    }

    .menu {
      background-color: #302f6d;

      div {
        max-width: 1226px;
        margin: 0 auto;

        .el-menu.el-menu--horizontal {
          border-bottom: none;
        }
      }
    }

  }

  .container {
    text-align: left;
    position: relative;
    box-sizing: border-box;
    min-height: calc(100vh - 160px);
  }

  .bottom {
    width: 1200px;
    height: 74px;
    background: #d4d4d4;
    margin: 30px auto 30px auto;
    position: relative;
    font-size: 12px !important;

    .copyright {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    p {
      padding-left: 30px;
      color: #3e3e3f;
      line-height: 74px;
    }

    .left {
      // float: left;
      font-size: 12px !important;

      a {
        font-size: 13px !important;
      }

      span {
        font-size: 13px !important;
      }
    }

    .shares {
      // float: right;
      width: 100px;
      height: 100%;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

      // margin-top: 22px;
      a {
        display: block;
        width: 34px;
        height: 34px;
        border: 1px solid #898d98;
        border-radius: 2px;
        margin-right: 15px;
        // float: left;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          font-size: 17px;
          color: #898d98;
          text-align: center;
          width: 30px;
          height: 30px;
          display: block;
        }
      }
    }

    .a2 {
      position: relative;

      .qrCode {
        display: none;
        position: absolute;
        right: -15px;
        bottom: 35px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }

      &:hover {
        .qrCode {
          display: block;
        }
      }
    }

  }
}
</style>
