<template>
  <div class="main">
    <div class="serviceCard-layout">
      <ServiceCardList></ServiceCardList>
    </div>
    <div class="main-content">
      <transition :name="transitionName" mode="out-in" enter-active-class="animated bounce" leave-active-class="animated hinge">
        <keep-alive :include='cachedViews'>
          <router-view class="router-v" />
        </keep-alive>
      </transition>
      <!-- <iframe :id="item.id" class="iFrame" :src="item.src" :key="item.src" v-for="item in serviceCardList" scrolling="auto" frameborder="0" width="100%" v-show="item.src===activeCard.src"></iframe> -->
    </div>
  </div>
</template>

<script>

import ServiceCardList from "./LayoutTabs"

export default {
  name: "LayoutMain",
  components: { ServiceCardList },
  data () {
    return {
      transitionName: '',
      transitionArr: ["slide-right", "slide-left"]
    }
  },
  computed: {
    cachedViews () {
      return this.$store.state.app.cachedViews
    },
  },
  created () {

  },
  watch: {
    // $route (to, from) {
    //   if (to.path != '/home') {
    //     let n = Math.floor(Math.random() * this.transitionArr.length + 1) - 1;
    //     this.transitionName = this.transitionArr[n]
    //   } else
    //     this.transitionName = ''
    // }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-left: 1px solid #e5e3e3;
  border-top: 1px solid #e8e8e8;
  background: #fff;
  .serviceCard-layout {
    width: 100%;
    height: 42px;
    line-height: 40px;
    padding-top: 6px;
  }
  .serviceCard-layout > span:first-child {
    padding: 0 8px;
  }
  .main-content {
    height: calc(100% - 42px);
    // background: #fff;
    overflow: hidden;
  }
}
</style>
<style lang="scss" >
.router-v {
  // position: absolute;
  transition: all 0.1s;
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
</style>