<template>
  <div class="main-container">
    <search-bar readonly @click.native="toSearch"></search-bar>
    <div class="banner">
      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../assets/images/banner.png" @click="onClickNav('pay')" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/images/banner.png" @click="onClickNav('examIndex')" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <ul class="nav-list">
        <li class="nav-item" @click="onClickNav('courseLearn', true)">
          <img src="../../assets/images/home_menu_01.png" alt="课程学习" />
        </li>
        <li class="nav-item" @click="onClickNav('examIndex')">
          <img src="../../assets/images/home_menu_02.png" alt="课程测验" />
        </li>
        <li class="nav-item" @click="onClickNav('mockIndex', true)">
          <img src="../../assets/images/home_menu_03.png" alt="模拟考试" />
        </li>
      </ul>
    </div>
    <card title="课程试听" style="padding-bottom:60px;">
      <free-course-item v-for="item in courseList" :data="item" :key="item.course_id"></free-course-item>
    </card>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar.vue'
import Card from '@/components/Card.vue'
import FreeCourseItem from '@/components/FreeCourseItem.vue'
import * as api from '@/api/course.js'

export default {
  name: 'Index',
  components: { SearchBar, Card, FreeCourseItem },
  data() {
    return {
      courseList: [] // 免费课程列表
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  methods: {
    // 获取课程试听列表
    getCourseList() {
      this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      api
        .getFreeCourseList()
        .then(response => {
          this.courseList = response
        })
        .finally(() => {
          this.$toast.clear()
        })
    },
    // 搜索
    toSearch() {
      if (this.isWeapp) {
        wx.miniProgram.navigateTo({
          url: `/pages/web/index?src=${window.location.origin}/search`
        })
      } else {
        this.$router.push({ name: 'search' })
      }
    },
    // 点击导航
    async onClickNav(name, requireLogin) {
      const map = {
        courseLearn: `/pages/web/index?src=${window.location.origin}/course/learn`,
        examIndex: `/pages/web/index?src=${window.location.origin}/exam/index?isBack=1`,
        mockIndex: `/pages/web/index?src=${window.location.origin}/mock/index`,
        pay: `/pages/web/index?src=${window.location.origin}/pay`
      }
      const isLogin = requireLogin
        ? await this.$store.dispatch('checkLogin')
        : false
      // 未登录
      if (requireLogin && !isLogin) {
        if (this.isWeapp) {
          // 小程序
          wx.miniProgram.navigateTo({
            url: `/pages/login/index?redirect_uri=${encodeURIComponent(
              map[name]
            )}`
          })
        } else {
          this.$router.push({ name: 'login' })
        }
        return
      }
      if (this.isWeapp) {
        // 小程序
        wx.miniProgram.navigateTo({ url: map[name] })
        return
      }
      // h5
      this.$router.push({ name })
    }
  },
  beforeMount() {
    this.getCourseList()
  }
}
</script>

<style lang="scss" scoped>
.main-container {
  padding-bottom: env(safe-area-inset-bottom);
}
.banner {
  height: 2.4rem;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.nav {
  padding: 0.4rem 0;
}
.nav-list {
  display: flex;
  justify-content: space-between;
  padding: 0;
  list-style: none;
}
.nav-item {
  width: 2rem;
  height: 2rem;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .course-item:last-child {
  border-bottom: 0;
}
</style>
