<template>
  <!-- <el-scrollbar height="100vh" always wrap-class="scorll" @scroll="scroll"> -->
  <div class="boutiqueColumn" ref="nav">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
      <el-breadcrumb-item>重点栏目分析</el-breadcrumb-item>
    </el-breadcrumb>
    <el-loading></el-loading>
    <el-tabs
      tab-position="top"
      style="max-height: 100%"
      @tab-click="selectTab"
      v-model="select"
    >
      <el-tab-pane
        v-for="(item, i) in columnNames"
        :key="i"
        :label="item.programName"
        :name="item.component"
      >
        <!-- <div
            class="tab-body"
            v-if="item.component === select || selectA[item.component]"
          > -->
        <default-components
          :select="select"
          :item="item"
          ref="child"
        ></default-components>
        <!-- </div> -->
      </el-tab-pane>
    </el-tabs>
  </div>
  <!-- </el-scrollbar> -->
</template>

<script>
// @ is an alias to /src
import { epgList } from '@/api/index';
// 重点栏目分析
import defaultComponents from './views/default.vue';

// let lastMoreDate = 0;
export default {
  name: 'boutiqueColumn',
  data() {
    return {
      columnNames: [],
      select: '',
      selectA: {},
    };
  },
  mounted() {
    epgList().then(programList => {
      this.columnNames = programList || [];
      this.select = (this.columnNames[0] || {}).component;
      this.selectA[this.select] = true;
    });
  },
  computed: {},
  methods: {
    // scroll(scroll) {
    //   let now = Date.now();
    //   let allheight = this.$refs.nav.offsetHeight - document.body.offsetHeight;
    //   let warn = allheight - scroll.scrollTop;
    //   if (now - lastMoreDate < 1000 || warn > 10) return;
    //   lastMoreDate = now;
    //   return this.$refs.child.changePage(this.$refs.child.current);
    // },
    selectTab(tab) {
      try {
        this.select = this.columnNames[tab.index].component;
        this.selectA[this.select] = true;
      } catch (err) {
        console.log(err);
      }
    },
  },
  beforeUnmount: function () {},
  components: {
    defaultComponents,
  },
};
</script>

<style>
.boutiqueColumn {
  padding: 10px 15px;
  box-sizing: border-box;
}
.tab-body {
  padding-bottom: 20px;
}
.export {
  float: right !important;
  margin: 10px;
}
</style>
