<template>
  <div class="yj-rent-iframe-tabs">
    <div class="left">
      <el-menu unique-opened :default-active="activeIndex">
        <el-menu-item
          :class="item.group ? 'group-line' : ''"
          :index="'' + index"
          v-for="(item, index) in menuList"
          :key="index"
          @click="menuClick(item, activeIndex)"
        >{{ item.name }}</el-menu-item>
      </el-menu>
    </div>

    <div class="right">
      <iframe
        v-if="menuActive.menuUrl"
        :src="menuActive.menuUrl"
        style="width: 100%; height: 100%; border: 0"
      ></iframe>
    </div>

  </div>
</template>

<script>


export default {

  name: "TabsIframe",

  props: {
    menuList: {
      type: Array,
      default: []
    },

    menuActive: {
      type: Object,
      default: {}
    },

    menuIndex: {
      type: Number,
      default: 0
    },
  },

  data() {
    return {
      activeIndex: '0',
    }
  },

  watch: {
    menuIndex () {
      this.activeIndex = String(this.menuIndex)
    }
  },

  mounted() {
  },

  methods: {
    menuClick(item, preIndex) {
      item.PREINDEX = preIndex
      let query = JSON.parse(JSON.stringify(this.$route.query))
      query.Submenu = item.menuUrl //Submenu 子菜单打开的页签
      this.$router.push({ path: this.$route.path, query })
      this.$emit('menuClick', item);
    },
  }
}
</script>

<style lang="scss">
.yj-rent-iframe-tabs{
  position: relative;
  height: calc(100vh - 60px);
  box-sizing: border-box;
  padding: 10px;
  background: #f9fafc;
  overflow: hidden;
  display: flex;

  .el-menu{
    border: none;
  }

  .group-line{
    border-bottom: 10px solid #f9fafc;
  }

  .left {
    width: 200px;
    height: 100%;
    margin-right: 10px;
    overflow: hidden;
    overflow-y: auto;
    text-align: left;
    background: #ffffff;
  }

  .right {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
  }

  .el-menu-item{
    height: auto;
    font-size: 15px;
  }

  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:vertical {
    height: 2px;
    -webkit-border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:horizontal {
    width: 2px;
    -webkit-border-radius: 3px;
  }

  .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;

    .el-tabs__header{
      background: #ffffff;
      margin: 0 0 0px;
    }

    .el-tabs__content{
      flex: 1;
      background: #ffffff;    
      border: 1px solid #E4E7ED;
      border-top: 0px;
    }

    .el-tab-pane{
      height: 100%;
    }
  }

 
}

</style>
