<template>
    <section>
        <!-- <SearchHeader @search="search" :searchText="searchText"/> -->
        <!-- <form @submit="search">
          <input type="search" v-model="searchText">
          <button v-show="false" type="submit" />
        </form> -->
        <!-- <mt-search v-model="searchText" ></mt-search> -->
        <form @submit.prevent="search">
          <mt-search v-model="searchText" ></mt-search>
          <button v-show="false" type="submit" />
        </form>

        <!-- <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="false" style="top: 66px;">
            <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" />
              </div>
              <NoMoreItem/>
            </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>
        <Loading v-show="false"/>
    </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';
import Loading from '@/components/common/loading-new'
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,
    Loading
  },
  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) {
      let _this = this,
          para = {
              searchCategory: '1,2,3,4',
              searchValue: _this.searchText,
              sortItem: 1,
              pageNo: 1,
              pageSize: 100,
              token: _this.token,
              setEntry: 'headers',
          }
      let url = 'contents/searchKeyword/searchContent'

      this.showTab0 = true
      this.showTab1 = true
      this.showTab2 = true
      this.showTab3 = true
      this.showTab4 = true
      this.GET(url, para).then(res => {
          _this.searchText = ''
          _this.selected = '0'
          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 = this.handelFive(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)
    },
    handelFive(d) {
      for (let i = 0; i < d.length; i++) {
          d[i].play = '0';
      }
      return d;
    }
  },
}
</script>
<style >
  .mint-search {
    position: fixed;
    top: 0px;
    z-index: 20;
    height: 66px;
    width: 100%;
    border-bottom: 1px solid #E7E7E7 !important;
  }
 .mint-searchbar {
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 30px 10px 8px;
    z-index: 1;
  }
  .mint-searchbar-cancel {
    margin-left: 10px;
    font-size: 14px ;
    color: #999;
    text-decoration: none;
  }
  .mint-searchbar-inner {
    background: #F5F6F6;
    /* border-radius: 15px; */
  }
  .mint-searchbar-core {
    background: #F5F6F6;
  }
</style>
<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(112px);
}
</style>
