<template>
  <div class="main-container">
    <search-bar readonly @click.native="toSearch"></search-bar>
    <div class="banner">
      <van-swipe class="banner-swipe" :autoplay="3000">
        <van-swipe-item>
          <img src="../../assets/images/banner.png" @click="onClickNav('pay')" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/images/banner2.png" @click="onClickNav('examIndex')" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <ul class="nav-list">
        <li class="nav-item" @click="onClickNav('courseLearn')">
          <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="课程试听">
      <free-course-item v-for="(item, index) in courseList" :data="item" :key="index"></free-course-item>
    </card>
    <card title="完整课程" style="padding-bottom:1.2rem;">
      <div class="course" @click="onClickNav('courseLearn')">
        <div class="course-content">
          <h2 class="course-content__title">道路运输安全管理培训课程</h2>
          <ul class="course-content-tag">
            <li>16个课程模块</li>
            <li>700个知识考点</li>
          </ul>
          <div class="course-content-ft">
            <div class="course-content__price">
              ¥
              <span>199</span>.00
            </div>
            <div class="course-content__button">立即报名</div>
          </div>
        </div>
        <div class="course-pic">
          <img src="../../assets/images/course_01.png" />
        </div>
      </div>
    </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 },
  metaInfo: {
    title: '道路运输安全知识线上课'
  },
  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' })
      }
    },
    // 点击导航
    onClickNav(name) {
      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`
      }
      if (this.isWeapp) {
        // 小程序
        wx.miniProgram.navigateTo({ url: map[name] })
      } else {
        // h5
        this.$router.push({ name })
      }
      window.localStorage.examTab = 0
      window.localStorage.isExamEnd = false
    }
  },
  beforeMount() {
    this.getCourseList()
  }
}
</script>

<style lang="scss" scoped>
.banner {
  height: 2.9rem;
  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;
}
.course {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
}
.course-pic {
  width: 2.4rem;
  height: 1.35rem;
  margin-left: 10px;
  border-radius: 6px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.course-content__title {
  font-size: 0.3rem;
  font-weight: 400;
  line-height: 1;
  color: #222;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.course-content-tag {
  li {
    display: inline-block;
    padding: 0 5px;
    font-size: 10px;
    color: #2b7ce9;
    line-height: 14px;
    background-color: #e9f1fc;
    border-radius: 3px;
  }
}
.course-content-ft {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-content__price {
  font-size: 13px;
  font-weight: bold;
  color: #ff6767;
  line-height: 1;
  span {
    font-size: 24px;
  }
}
.course-content__button {
  width: 80px;
  height: 24px;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  text-align: center;
  background: rgba(255, 103, 103, 1);
  border-radius: 12px;
}
</style>
