<template>
  <div class="data-list-tabs">
    <!-- 页签 -->
    <div class="tabs-header">
      <ul>
        <li
          v-for="(tab, index) in data"
          :key="tab.label"
          :class="{ hover: activeIndex === index }"
          @mouseover="trigger === 'hover' ? changeTab(index) : null"
          @click="trigger === 'click' ? changeTab(index) : null"
        >
          {{ tab.label }}
        </li>
      </ul>
      <nuxt-link
        v-if="withMore && currentTab.moreLink != null"
        :to="currentTab.moreLink"
      >
        更多<el-icon><ElIconDArrowRight /></el-icon>
      </nuxt-link>
    </div>
    <!-- 搜索表单 -->
    <slot name="search"></slot>
    <!-- 数据列表 -->
    <slot v-if="items.length > 0" :items="items" :tab="data[activeIndex]">
      <ArticleList :articles="items"/>
    </slot>
    <!-- 暂无数据 -->
    <EmptyTip v-else/>
  </div>
</template>

<script>
import EmptyTip from "~/components/common/EmptyTip.vue";
import ArticleList from "~/components/cms/ArticleList.vue";

export default {
  name: 'DataListTabs',
  components: {ArticleList, EmptyTip},
  emits: ['changeTab'],
  props: {
    // 数据，[{ label: '', items: [ { title: '', updateTime: '' } ] }]
    data: {
      default: () => {
        return []
      }
    },
    // 是否‘更多’按钮
    withMore: {
      default: true
    },
    // 触发方式
    trigger: {
      default: 'hover'
    }
  },
  computed: {
    // 当前选中的tab
    currentTab () {
      return this.data[this.activeIndex]
    },
    // 获取展示列表
    items () {
      if (this.currentTab == null) {
        return
      }
      return this.currentTab.items
    }
  },
  methods: {
    /**
     * 切换tab
     * @param index 坐标
     */
    changeTab (index) {
      this.activeIndex = index
      this.$emit('changeTab', index)
    }
  },
  data() {
    return {
      // 当前选中的tab索引
      activeIndex: 0
    }
  }
}
</script>

<style scoped lang="scss">
.data-list-tabs {
  width: 100%;
  min-height: 200px;
  overflow: hidden;
  // 页签头
  .tabs-header {
    position: relative;
    border-bottom: 1px solid #eee;
    color: var(--primary-color);
    ul {
      width: 100%;
      display: flex;
      padding-right: 100px;
      overflow: hidden;
      box-sizing: border-box;
      li {
        padding: 8px 15px;
        cursor: default;
        font-size: var(--font-size-middle);
        flex-shrink: 0;
        &.hover {
          font-weight: bold;
          border-bottom: 3px solid var(--primary-color);
        }
      }
    }
    // 更多
    a {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: var(--font-size-small);
      display: flex;
      align-items: center;
      color: var(--primary-color) !important;
      text-decoration: none;
    }
  }
}
</style>
