<template>
  <section>
    <form @submit.prevent="search">
      <mt-search v-model="searchText" ></mt-search>
      <button v-show="false" type="submit" />
    </form>
    <!-- 没有结果页面 -->
    <article v-show="!(showTab1 || showTab2 || showTab3 || showTab4)" class="mt-80">
      <section></section>
      <NoResultPage/>
      <SplitLine borderWidth="3px"/>
      <CourseAdjust/>
    </article>

    <!-- 有结果页面 -->
    <article v-show="showTab1 || showTab2 || showTab3 || showTab4">
      <div class="navbar-container" >
        <div class="navbar-container-item" v-show="showTab0" :class="{'bt-2': navIndex === '0'}" @click="navIndex = '0'">综合</div>
        <div class="navbar-container-item" v-show="showTab1" :class="{'bt-2': navIndex === '1'}" @click="navIndex = '1'">课程</div>
        <div class="navbar-container-item" v-show="showTab2" :class="{'bt-2': navIndex === '2'}" @click="navIndex = '2'">五分钟医学院</div>
        <div class="navbar-container-item" v-show="showTab3" :class="{'bt-2': navIndex === '3'}" @click="navIndex = '3'">讲师</div>
        <div class="navbar-container-item" v-show="showTab4" :class="{'bt-2': navIndex === '4'}" @click="navIndex = '4'">健康漫画</div>
      </div>
      <div class="list-container" v-show="navIndex === '0' && showTab0">
        <!-- 课程 -->
        <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/>
      </div>
      <div class="list-container" v-show="navIndex === '1' && showTab1">
        <CourseList :showTitle="showTitle" :showOrder="showOrder" :parmData="contentAppModelsAll" :groupNum="contentAppModelCount"/>
        <NoMoreItem/>
      </div>
      <div class="list-container" v-show="navIndex === '2' && showTab2">
        <FiveMinutes :showTitle="showTitle" :showOrder="showOrder" :parmData="fiveMinutesMedicalContentListAll" :groupNum="fiveMinutesMedicalContentListCount"/>
        <NoMoreItem/>
      </div>
      <div class="list-container" v-show="navIndex === '3' && showTab3">
        <TeacherList :showTitle="showTitle" :showOrder="showOrder" :parmData="pCourseDoctorModelsAll" :groupNum="pCourseDoctorModelCount"/>
        <NoMoreItem/>
      </div>
      <div class="list-container" v-show="navIndex === '4' && showTab4">
        <HealthComics :showTitle="showTitle" :showOrder="showOrder" :parmData="educationContentsAll" :groupNum="educationContentCount"/>
        <NoMoreItem/>
      </div>
    </article>
    <Loading v-show="showLoading"/>
  </section>
</template>

<script>
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 Loading from '@/components/common/loading-new'
import ConfirmTip from '@/components/common/confirm-tip'

export default {
  data() {
    return {
      navIndex: '0',
      showLoading: false,
      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,
      showTitle: false,
      showOrder: true
    }
  },
  components: {
    SplitLine,
    NoMoreItem,
    ShowAllItem,
    GroupTitle,
    CourseList,
    CourseAdjust,
    FiveMinutes,
    TeacherList,
    HealthComics,
    NoResultPage,
    Loading,
    ConfirmTip
  },
  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(typeof index)
      this.navIndex = index
    },
    // 搜索结果
    search(searchText) {
      this.showLoading = true
      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.showLoading = false
          _this.searchText = ''
          _this.navIndex = '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" scoped>
  @import '../style/mixin.scss';
  .navbar-container {
    display: flex;
    position: fixed;
    top: px2rem(60px);
    left: 0;
    z-index: 2;
    flex-direction: row;
    border-bottom: 1px solid #E7E7E7;
    background: #fff;
    padding-top: 10px;
    margin-bottom: 6px;
    &-item {
      display: inline-flex;
      margin: px2rem(15px) px2rem(15px) px2rem(-1px);
      padding-bottom: px2rem(11px);
      font-size: px2rem(14px);
      color: #666;
    }
    .bt-2 {
      color: #449284;
      border-bottom: px2rem(3px) solid #449284;
    }
  }
  .list-container {
    margin: 0;
    padding-top: px2rem(120px);
  }
  .mt-80 {
    padding-top: px2rem(80px);
  }
  .mt-100 {
    margin-top: px2rem(112px);
  }
</style>
