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

          <!-- tab-container -->
          <mt-tab-container v-model="selected">
            <mt-tab-container-item v-show="showTab0" id="0">
              <!-- 课程 -->
              <div v-show="showTab1">
                <CourseList :parmData="contentAppModels" :groupNum="contentAppModelCount"/>
                <ShowAllItem @showAllItem="showAllItem" itemIndex="1" />
                <SplitLine borderWidth="3px"/>
              </div>
              <!-- 五分钟医学 -->
              <div v-show="showTab2">
                <FiveMinutes :parmData="fiveMinutesMedicalContentList" :groupNum="fiveMinutesMedicalContentListCount"/>
                <ShowAllItem @showAllItem="showAllItem" itemIndex="2" />
                <SplitLine borderWidth="3px"/>
              </div>
              <!-- 讲师 -->
              <div v-show="showTab3">
                <TeacherList :parmData="pCourseDoctorModels" :groupNum="pCourseDoctorModelCount"/>
                <ShowAllItem @showAllItem="showAllItem" itemIndex="3" />
                <SplitLine borderWidth="3px"/>
              </div>
              <!-- 健康漫画 -->
              <div v-show="showTab4">
                <HealthComics :parmData="educationContents" :groupNum="educationContentCount"/>
                <ShowAllItem @showAllItem="showAllItem" itemIndex="4" />
                <NoMoreItem/>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item v-show="showTab1" id="1">
              <CourseList :parmData="contentAppModelsAll" :groupNum="contentAppModelCount"/>
              <NoMoreItem/>
            </mt-tab-container-item>
            <mt-tab-container-item v-show="showTab2" id="2">
              <FiveMinutes :parmData="fiveMinutesMedicalContentListAll" :groupNum="fiveMinutesMedicalContentListCount"/>
              <NoMoreItem/>
            </mt-tab-container-item>
            <mt-tab-container-item v-show="showTab3" id="3">
              <TeacherList :parmData="pCourseDoctorModelsAll" :groupNum="pCourseDoctorModelCount"/>
              <NoMoreItem/>
            </mt-tab-container-item>
            <mt-tab-container-item v-show="showTab4" id="4">
              <HealthComics :parmData="educationContentsAll" :groupNum="educationContentCount"/>
              <NoMoreItem/>
            </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/course-list';
import FiveMinutes from '../components/business/five-minutes';
import TeacherList from '@/components/business/teacher-list';
import HealthComics from '@/components/business/health-comics';
import CourseAdjust from '../components/business/course-adjust';
import NoResultPage from '@/components/business/no-result-page'
import { Navbar, TabItem } from 'mint-ui';

export default {
  data() {
    return {
      hasResult: true,
      searchText: '',
      selected: '0',
      contentAppModelCount: '0',
      contentAppModels: [],
      contentAppModelsAll: [],
      educationContentCount: '0',
      educationContents: [],
      educationContentsAll: [],
      fiveMinutesMedicalContentListCount: '0',
      fiveMinutesMedicalContentList: [],
      fiveMinutesMedicalContentListAll: [],
      pCourseDoctorModelCount: '0',
      pCourseDoctorModels: [],
      pCourseDoctorModelsAll: [],
      showTab0: true,
      showTab1: true,
      showTab2: true,
      showTab3: true,
      showTab4: true
    }
  },
  components: {
    SearchHeader,
    SplitLine,
    Navbar,
    TabItem,
    NoMoreItem,
    ShowAllItem,
    GroupTitle,
    CourseList,
    CourseAdjust,
    FiveMinutes,
    TeacherList,
    HealthComics,
    NoResultPage
  },
  watch: {
    selected(val) {
      this.showIndex(val)
      // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
    }
  },
  created(){
    this.searchText = this.$route.query.searchText || ''
    console.log(this.searchText)
  },
  mounted(){
    this.search(this.searchText)
    // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
  },
  methods: {
    showAllItem(index) {
      console.log(index)
      this.selected = index
    },
    // 搜索结果
    search(searchText) {
      this.showTab0 = true
      this.showTab1 = true
      this.showTab2 = true
      this.showTab3 = true
      this.showTab4 = true
      let _this = this,
          para = {
              searchCategory: '1,2,3,4',
              searchValue: searchText,
              sortItem: 1,
              pageNo: 1,
              pageSize: 100,
              token: _this.token,
              setEntry: 'headers',
          }
      let url = 'contents/searchKeyword/searchContent'
      this.GET(url, para).then(res => {
          if (res.code == '000000') {
            console.log(res)
            // 课程
            _this.contentAppModels = this.spliceCertenNumData(res.data.contentAppModels, 4)
            _this.contentAppModelsAll = res.data.contentAppModels
            _this.contentAppModelCount = res.data.contentAppModelCount + ''
            if(res.data.contentAppModelCount === 0){
              this.showTab1 = false
            }
            // 五分钟医学
            _this.fiveMinutesMedicalContentList = this.spliceCertenNumData(res.data.fiveMinutesMedicalContentList, 4)
            _this.fiveMinutesMedicalContentListAll = res.data.fiveMinutesMedicalContentList
            _this.fiveMinutesMedicalContentListCount = res.data.fiveMinutesMedicalContentListCount + ''
            if(res.data.fiveMinutesMedicalContentListCount === 0){
              this.showTab2 = false
            }
            // 讲师
            _this.pCourseDoctorModels = this.spliceCertenNumData(res.data.pCourseDoctorModels, 4)
            _this.pCourseDoctorModelsAll = res.data.pCourseDoctorModels
            _this.pCourseDoctorModelCount = res.data.pCourseDoctorModelCount + ''
            if(res.data.pCourseDoctorModelCount === 0){
              this.showTab3 = false
            }
            // 健康漫画
            _this.educationContents = this.spliceCertenNumData(res.data.educationContents, 4)
            _this.educationContentsAll = res.data.educationContents
            _this.educationContentCount = res.data.educationContentCount + ''
            if(res.data.educationContentCount === 0){
              this.showTab4 = false
            }
          }
      })
    },
    searchAll(searchText, searchCategory, receive, receiveList) {
      let _this = this,
          para = {
              searchCategory: searchCategory,
              searchValue: searchText,
              sortItem: 1,
              pageNo: 1,
              pageSize: 100,
              token: _this.token,
              setEntry: 'headers',
          }
      let url = 'contents/searchKeyword/searchContent'
      this.GET(url, para).then(res => {
          if (res.code == '000000') {
            // 课程
            _this[receiveList] = res.data[receive]
          }
      })
    },
    showIndex(index) {
      console.log(index)
    },
    spliceCertenNumData(oriData, num) {
      let result = []
      if (oriData.length === 0 || oriData.length < num) {
        return oriData
      } else {
        for ( let i = 0; i < num; i ++){
          result.push(oriData[i])
        }
        return result
      }
      console.log(result)
    }
  },
}
</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-80 {
  margin-top: px2rem(80px);
}
.mt-100 {
  margin-top: px2rem(105px);
}
</style>
