<template>
  <div class="tabPage-main">
    <el-tabs v-model="activeTab" type="card" @tab-click="handleClick" @tab-remove="handleRemove">
      <el-tab-pane v-for="item of tabPageData" :key="item.id" :label="item.name" :name="item.id">
        <!-- <iframe-page v-if="item.type === 'admin'" :path="item.path" /> -->
        <iframe
          :src="item.path"
          v-if="item.type === 'out'"
          frameborder="0"
          allowTransparency="true"
        ></iframe>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  data() {
    return {
      activeTab: 'tab1',
    }
  },
  computed: {
    ...mapGetters(['tabPageData']),
  },
  watch: {
    tabPageData: {
      handler(newVal) {
        this.activeTab = newVal[0].id
      },
      deep: true,
    },
  },
  mounted() {
    console.log(this.tabPageData)
    this.activeTab = this.tabPageData[0].id
  },
  methods: {
    handleClick() {},
    handleRemove(data) {
      console.log(data)
      this.$store.dispatch('home/removeTabPageData', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.tabPage-main {
  width: 100%;
  height: 100%;
  padding: 100px 30px 40px;
  color: #fff;
  // font-size: 32px;
  pointer-events: auto;
  ::v-deep .el-tabs {
    width: 100%;
    height: 100%;
    &.el-tabs--card > .el-tabs__header {
      margin: 0;
      border-bottom: 1px solid #5cc6f0;
      .el-tabs__nav {
        border: none;
      }
      .el-tabs__item {
        border: 1px solid transparent !important;
        // border-left: 0 !important;
        color: #fff;
        height: 34px;
        line-height: 34px;
      }
      .el-tabs__item.is-active {
        border-color: #5cc6f0 !important;
        border-radius: 8px 8px 0 0;
        background-color: rgba(0, 116, 146, 0.5);
        // border-bottom-color: #5CC6F0;
      }
    }
    .el-tabs__content {
      height: calc(100% - 50px);
      .el-tab-pane {
        height: 100%;
      }
    }
  }
  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
