<template>
  <view class="container">
    <unitv-page
      id="mineCurriculumPage"
      ref="mineCurriculumPage"
      class="mineCurriculumPage"
      :show="true"
    >
      <app-header />
      <view class="content">
        <view class="tabs">
          <unitv-zone
            id="tabs_zone"
            class="tabs_zone"
            :auto-fous="true"
            :right="tabsZoneRight"
            :item="currentTab"
            :values="tabs"
            :column="1"
            :row="tabs.length"
          >
            <unitv-item
              v-for="(item, index) in tabs"
              :key="index"
              :item="index"
              class="item"
              @hover="fnHoverTabs"
            >
              <view class="title">{{ item.name }}</view>
            </unitv-item>
          </unitv-zone>
        </view>
        <view style="flex: 1; margin-left: 33rpx">
          <all v-if="currentTab === 0" />
          <learning v-if="currentTab === 1" />
          <completed-learning v-if="currentTab === 2" />
        </view>
      </view>
    </unitv-page>
  </view>
</template>

<script>
import All from "./all.vue";
import Learning from "./learning.vue";
import CompletedLearning from "./completed_learning.vue";
export default {
  components: {
    All,
    Learning,
    CompletedLearning,
  },
  data() {
    return {
      tabs: [{ name: "全部" }, { name: "学习中" }, { name: "已学完" }],
      currentTab: 0,
    };
  },
  onLoad(query) {
    this.currentTab = query.tabIndex ? +query.tabIndex : 0;
  },
  onShow() {
    if (this.$refs.mineCurriculumPage) {
      this.$refs.mineCurriculumPage.showPage();
    }
  },
  computed: {
    tabsZoneRight() {
      if (this.currentTab === 0) return "mine_curriculum_all_first_zone";
      if (this.currentTab === 1) return "mine_curriculum_learning_first_zone";
      if (this.currentTab === 2)
        return "mine_curriculum_completed_learning_first_zone";
      return "";
    },
  },
  methods: {
    fnHoverTabs(item) {
      this.currentTab = item;
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  margin-top: 19rpx;
  display: flex;

  .tabs {
    width: 94rpx;

    .tabs_zone {
      font-size: 14rpx;
      text-align: center;

      .item {
        margin-top: 5rpx;
        background-color: transparent;
        border-radius: 34rpx;
        padding: 6rpx 18rpx;

        &.hover {
          background-color: #254eff;
        }

        &.active {
          background-color: rgba(37, 78, 255, 0.39);
        }
      }
    }
  }
}
</style>
