<template>
    <section>
        <SearchHeader @search="search" :searchText="searchText"/>
        <!-- <SplitLine/> -->
        <!-- 没有结果页面 -->
        <section v-show="!hasResult" class="mt-100">
          <!-- <NoResultPage/>
          <RecommendCourse/> -->
        </section>
        <!-- 有结果页面 -->
        <section v-show="hasResult" class="mt-100">
          <mt-navbar v-model="selected" :fixed="true" style="top: 58px;">
            <mt-tab-item id="0">综合</mt-tab-item>
            <mt-tab-item id="1">课程</mt-tab-item>
            <mt-tab-item id="2">五分钟医学</mt-tab-item>
            <mt-tab-item id="3">讲师</mt-tab-item>
            <mt-tab-item id="4">健康漫画</mt-tab-item>
          </mt-navbar>

          <!-- tab-container -->
          <mt-tab-container v-model="selected">
            <mt-tab-container-item id="0">
              <!-- 课程 -->
              <CourseList/>
              <!-- 五分钟医学 -->
              <FiveMinutes/>
              <!-- 讲师 -->
              <TeacherList/>
              <!-- 健康漫画 -->
              <HealthComics/>
              <!-- <NoMoreItem/>
              <GroupTitle/>
              <ShowAllItem/> -->
              <!-- <CourseAdjust/> -->
              <NoMoreItem/>
            </mt-tab-container-item>
            <mt-tab-container-item id="1">
              <CourseList/>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
              <FiveMinutes/>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
              <TeacherList/>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
              <HealthComics/>
            </mt-tab-container-item>
          </mt-tab-container>
        </section>
    </section>
</template>

<script>
import SearchHeader from '../components/business/search-header';
import SplitLine from '../components/business/split-line';
import NoMoreItem from '../components/business/no-more-item';
import ShowAllItem from '../components/business/show-all-item';
import GroupTitle from '../components/business/group-title';

import CourseList from '../components/business-new/yqy-teacher-list';
import CourseAdjust from '../components/business-new/yqy-adjust';
import FiveMinutes from '../components/business-new/yqy-five-minutes';
import TeacherList from '@/components/business/teacher-list';
import HealthComics from '@/components/business/health-comics';

import { Navbar, TabItem } from 'mint-ui';

export default {
  data() {
    return {
      hasResult: true,
      searchText: '',
      selected: '0'
    }
  },
  components: {
    SearchHeader,
    SplitLine,
    Navbar,
    TabItem,
    NoMoreItem,
    ShowAllItem,
    GroupTitle,
    CourseList,
    CourseAdjust,
    FiveMinutes,
    TeacherList,
    HealthComics
  },
  watch: {
    selected(val) {
      this.showIndex(val)
    }
  },
  created(){
    this.searchText = this.$route.query.searchText || ''
  },
  mounted(){
    this.search(this.searchText)
  },
  methods: {
    // 搜索结果
    search(searchText) {
      let _this = this,
          para = {
              searchCategory: '1,2,3,4',
              searchValue: searchText,
              sortItem: 1,
              pageNo: 1,
              pageSize: 4,
              token: _this.token,
              setEntry: 'headers',
          }
      let url = 'contents/searchKeyword/searchContent'
      this.GET(url, para).then(res => {
          if (res.code == '000000') {
            // 课程
            this.contentAppModels = this.data.contentAppModels
            this.contentAppModelCount = this.data.contentAppModelCount
            // 健康漫画
            this.educationContents = this.data.educationContents
            this.educationContentCount = this.data.educationContentCount
            // 五分钟医学
            this.fiveMinutesMedicalContentList = this.data.fiveMinutesMedicalContentList
            this.fiveMinutesMedicalContentListCount = this.data.fiveMinutesMedicalContentListCount
            // 讲师
            this.pCourseDoctorModels = this.data.pCourseDoctorModels
            this.pCourseDoctorModelCount = this.data.pCourseDoctorModelCount


// contentAppModelCount: 0
// contentAppModels: []
// educationContentCount: 0
// educationContents: []
// fiveMinutesMedicalContentList: []
// fiveMinutesMedicalContentListCount: 0
// pCourseDoctorModelCount: 0
// pCourseDoctorModels: []

          }
      })
    },
    showIndex(index) {
      console.log(index)
    }
  },
}
</script>
<style lang="scss">
  @import '../style/mixin.scss';
  .mint-tab-item-label {
      color: inherit;
      font-size: px2rem(14px);
      line-height: 1;
  }
  .mint-navbar {
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    border-bottom: px2rem(1px) solid #f0f0f0 !important;
  }
  .mint-navbar .mint-tab-item.is-selected {
    border-bottom: px2rem(2px) solid #449284;
    color: #449284;
    margin-bottom: px2rem(-1px);
  }
  .mint-navbar .mint-tab-item {
    padding: px2rem(19px) 0 px2rem(11px);
    font-size: px2rem(14px);
  }
</style>
<style lang="scss" scoped>
@import '../style/mixin.scss';
@import '../style/global.scss';
.mt-100 {
  padding-top: px2rem(105px);
}
</style>
