<template>
  <section>
    <!-- <form @submit.prevent="search" class="search-form">
      <mt-search v-model="searchText" ></mt-search>
      <span class="onCancle"></span>
      <button v-show="false" type="submit" />
    </form> -->

    <div class="top-bar-height"></div>
    <form @submit.prevent="search">
      <!-- <mt-search v-model="searchText" ></mt-search> -->
      <div class="search-container">
        <img class="search-container-img" @click.stop="back" src="../images/sousuo/left-arrow-black.png"/>
        <div >
          <span class="search-container-img2">
          <img class="search-container-img" @click.stop="back" src="../images/sousuo/search-black.png"/></span>
          <input class="search-container-input" type="search"  v-model="searchText" maxlength="100" @focus.prevent="onInputFocus" @blur.prevent="onInputBlur">
          <span v-show="isOnFocus" class="search-container-img3" @click.prevent="clearText"><img class="search-container-img" src="../images/sousuo/delete.png"/></span>
          <span class="search-container-cancle" @click.prevent="search">搜索</span>
        </div>
      </div>
      <button v-show="false" type="submit" />
    </form>

    <!-- 没有结果页面 -->
    <article v-show="!(showTab1 || showTab2 || showTab3 || showTab4)" class="mt-80">
      <NoResultPage/>
      <SplitLine borderWidth="3px"/>
      <CourseAdjust :parmData="adjustList"/>
    </article>

    <!-- 有结果页面 -->
    <article id="navbar-container-wrapper" v-show="showTab1 || showTab2 || showTab3 || showTab4" style="position:relative;">
      <div class="navbar-container" >
        <div class="navbar-container-item" v-show="showTab0" :class="{'bt-2': navIndex === '0'}" @click="tabClick('0')">综合</div>
        <div class="navbar-container-item" v-show="showTab1" :class="{'bt-2': navIndex === '1'}" @click="tabClick('1')">课程</div>
        <div class="navbar-container-item" v-show="showTab2" :class="{'bt-2': navIndex === '2'}" @click="tabClick('2')">五分钟医学院</div>
        <div class="navbar-container-item" v-show="showTab3" :class="{'bt-2': navIndex === '3'}" @click="tabClick('3')">讲师</div>
        <div class="navbar-container-item" v-show="showTab4" :class="{'bt-2': navIndex === '4'}" @click="tabClick('4')">健康漫画</div>
      </div>
      <div class="fixed-split-line"></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" :searchText="searchTextSub"/>
          <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 ref="courseListRef" :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"/>
    <BackTop ref="refBackTop" @backTop="backTop" v-show="isShowTop" />
  </section>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import {
    m_search_search,
    m_search_result_tab_switch
    } from '@/utils/buryingPoint'
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'
import BackTop from '@/components/common/backTop'
let tabTitle = ['综合', '课程', '五分钟医学院', '讲师', '健康漫画']

export default {
  data() {
    return {
      isOnFocus: false,
      isShowTop: false,
      // token: '',
      navIndex: '0',
      showLoading: false,
      hasResult: true,
      searchText: '',
      searchTextSub: '',
      // 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,
      adjustList: []
    }
  },
  components: {
    SplitLine,
    NoMoreItem,
    ShowAllItem,
    GroupTitle,
    CourseList,
    CourseAdjust,
    FiveMinutes,
    TeacherList,
    HealthComics,
    NoResultPage,
    Loading,
    ConfirmTip,
    BackTop
  },
  computed: {
    ...mapGetters({
      orderNum: 'orderNum'
    })
  },
  watch: {
    searchText(val){
      this.searchTextSub = val
    }
  },
  created(){
    this.searchText = this.$route.query.searchText || ''
    let _this = this;
    window.__getUserInfo = function(params){
      _this.token = params.userToken
      // _this.getAdjustData()
      _this.search()
    }
    
    if(window.__isWeb){
      _this.search()
    }
    window.addEventListener('scroll', this.scrollFun)
  },
  mounted(){
    this.getUserInfo()
    // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
  },
  methods: {
    ...mapActions({
      setCSearchText: 'setCSearchText',
      setOrderNum: 'setOrderNum'
    }),
    showAllItem(index) {
      console.log(typeof index)
      this.navIndex = index
      this.pageBurialPoin({
          ...m_search_result_tab_switch,
          labelValue: tabTitle[index],
          createdTime: new Date().getTime(),
      })
      this.$refs.refBackTop.backTop()
    },
    // 搜索结果
    search() {
      this.pageBurialPoin({
          ...m_search_search,
          labelValue: this.searchText,
          createdTime: new Date().getTime(),
      })
      this.showLoading = true
      let str2 = (this.searchText || '').replace(/[\-\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\L\<\>\?\/\\]/g, '');// 去掉特殊字符
      this.setCSearchText(str2)
      let _this = this,
          para = {
              searchCategory: '1,2,3,4',
              searchValue: str2,
              keywordColor: 'rgba(244,122,72,1)',
              sortItem: 1,
              pageNo: 1,
              pageSize: 4,
              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') {
            // 课程
            _this.contentAppModels = this.spliceCertenNumData(res.data.contentAppModels, 4)
            _this.contentAppModelsAll = res.data.contentAppModels
            _this.contentAppModelCount = res.data.contentAppModelCount + ''
            // if(res.data.contentAppModelCount > 100){
            //   _this.searchForOrder('1', str2, 1, res.data.contentAppModelCount).then( param => {
            //     _this.contentAppModelsAll = param
            //   })
            // }
            // _this.$refs.courseListRef.orderAction(1, true)
            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
            }
            _this.setOrderNum((_this.orderNum + 1))
          }
      })
    },
    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;
    },
    //为您推荐
    getAdjustData(){
        this.adjustList = []
        let _this = this,
        parm = {
            pageNo: 1,
            pageSize: 4,
            token: _this.token,
            setEntry: 'headers',
        }
          
        _this.GET('contents/courses/recommendCourseList',parm).then(function(res){
            if(res.code === '000000'){
                _this.adjustList = res.data || [];
                // _this.adjustPageNo = 1;
                // _this.SET_DATA(_this.adjustList)
                // if(_this.adjustList.length>0){
                //     _this.userToken = userToken
                // }
            }
          })
    },
    getUserInfo: function () {
      rocNative.getUserInfo({'__funcName': '__getUserInfo'})
    },
    scrollFun() {
      let navConWrapDom = document.querySelector('#navbar-container-wrapper')
      let navConWrapDomOT = document.querySelector('#navbar-container-wrapper').offsetParent.offsetTop;
      let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
      if(scrollTop > 5){
        this.isShowTop = true
      } else {
        this.isShowTop = false
      }
    },
    backTop() {
      this.isShowTop = false
    },
    tabClick(index) {
      this.navIndex = index
      this.pageBurialPoin({
          ...m_search_result_tab_switch,
          labelValue: tabTitle[index],
          createdTime: new Date().getTime(),
      })
      this.$refs.refBackTop.backTop()
    },
    back() {
      this.$router.push('/search')
    },
    clearText() {
      this.searchText = ''
    },
    onInputFocus() {
      this.isOnFocus = true
    },
    onInputBlur() {
      this.isOnFocus = false
    }
  },
}
</script>
<style lang="scss" scoped>
  @import '../style/mixin.scss';
  // .search-form {
  //   // position: relative;
  // }
  .navbar-container {
    width: 100%;
    height: px2rem(57px);
    display: flex;
    position: fixed;
    top: px2rem(70px);
    left: 0;
    z-index: 2;
    flex-direction: row;
    // border-bottom: 1px solid #E7E7E7;
    background: #fff;
    // margin-top: 10px;
    margin-bottom: 6px;
    &-item {
      display: inline-flex;
      margin: px2rem(25px) px2rem(15px) px2rem(-1px);
      padding-bottom: px2rem(11px);
      font-size: px2rem(14px);
      color: #666;
    }
    .bt-2 {
      color: #449284;
      border-bottom: px2rem(2px) solid #449284;
    }
  }
  .list-container {
    margin: 0;
    padding-top: px2rem(130px);
  }
  .fixed-split-line {
    position: fixed;
    width: 100%;
    top: px2rem(127px);
    z-index: 1;
    border-bottom: 1px solid #e7e7e7;
  }
  .mt-80 {
    padding-top: px2rem(90px);
  }
  .mt-100 {
    margin-top: px2rem(112px);
  }
.search-icon {
  font-size: 20px;
}
.search-icon:before {
    content: "\E604";
}
.search-container {
  display: flex;
  position: fixed;
  top: px2rem(10px);
  left: 0;
  z-index: 3;
  width: 100%;
  flex-direction: row;
  text-align: center;
  // padding: px2rem(10px) 0;
  padding: px2rem(10px) 0 px2rem(4px);
  background: #fff;
  border-bottom: 1px solid #E7E7E7;
  &-img {
    padding: px2rem(21px) 0 px2rem(10px) px2rem(16px);
    width: px2rem(20px);
    height: px2rem(20px);
    // transform: rotate(180deg);
  }
  &-img2 {
    position: absolute;
    top: px2rem(9.5px);
    left: px2rem(24px);
    z-index: 2;
    img {
      width: px2rem(22px);
      height: px2rem(22px);
    }
  }
  &-img3 {
    position: absolute;
    top: px2rem(9px);
    left: px2rem(274px);
    z-index: 5;
    img {
      width: px2rem(22px);
      height: px2rem(22px);
    }
  }
  &-input {
    flex: 1;
    position: relative;
    left: px2rem(0px);
    width: px2rem(280px);
    height: px2rem(26px);
    margin-left: px2rem(0px);
    // padding-left: px2rem(26px);
    // padding-right: px2rem(28px);
    padding: px2rem(1px) px2rem(28px) 0 px2rem(26px);
    border-radius: px2rem(4px);
    background: rgba(246, 246, 246, 1);
    font-size: px2rem(13px);
    color: #666;
    -webkit-appearance: none;
  }
  &-cancle {
    position: relative;
    top: px2rem(1px);
    left: 0;
    height: px2rem(14px);
    line-height: px2rem(14px);
    margin-top: px2rem(2px);
    font-size: px2rem(14px);
    color: #999;
  }
}
.top-bar-height {
  position: fixed;
  height: px2rem(10px);
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: #fff;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none;
}
</style>
