<template>
  <view class="container">
    <unitv-page
      id="indexPage"
      ref="indexPage"
      class="indexPage"
      :show="true"
      @back="pageBack"
    >
      <app-header />
      <unitv-zone
        id="tabs_zone"
        class="tabs_zone"
        :auto-fous="true"
        up="header_zone"
        :down="tabsZoneDown"
        :item="0"
        :values="tabs"
        :column="tabs.length"
      >
        <unitv-item
          v-for="(item, index) in tabs"
          :key="index"
          :item="index"
          class="item"
          @hover="fnHoverTabs"
        >
          <view>{{ item.name }}</view>
        </unitv-item>
      </unitv-zone>
      <home v-if="currentTab === 0" />
      <premium-recommendation v-if="currentTab === 1" />
      <course-classification v-if="currentTab === 2" />
    </unitv-page>
  </view>
</template>

<script>
import Home from "./home.vue";
import PremiumRecommendation from "./premium_recommendation.vue";
import CourseClassification from "./course_classification.vue";

export default {
  components: {
    Home,
    PremiumRecommendation,
    CourseClassification,
  },
  data() {
    return {
      tabs: [{ name: "首页" }, { name: "精品推荐" }, { name: "课程分类" }],
      currentTab: 0,
    };
  },
  onShow() {
    if (this.$refs.indexPage) {
      this.$refs.indexPage.showPage();
    }
  },
  computed: {
    tabsZoneDown() {
      if (this.currentTab === 0) return "home_first_zone";
      if (this.currentTab === 1) return "premium_recommendation_first_zone";
      if (this.currentTab === 2) return "course_classification_first_zone";
      return "";
    },
  },
  methods: {
    pageBack() {
      uni.showModal({
        title: "提示",
        content: "是否退出",
        success: function (res) {
          if (res.confirm) {
            plus.runtime.quit();
          }
        },
      });
      return false;
    },
    fnHoverTabs(item) {
      this.currentTab = item;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  .indexPage {
    .tabs_zone {
      font-size: 14rpx;
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      text-align: center;
      position: relative;
      z-index: 99;

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

        &:first-child {
          margin-left: 0;
        }

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

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