<template>
    <section>
        <SearchHeader @search="search"/>
        <SplitLine/>
        <!-- 没有结果页面 -->
        <section v-show="!hasResult">
          <!-- <NoResultPage/>
          <RecommendCourse/> -->
        </section>
        <!-- 有结果页面 -->
        <section v-show="hasResult">
          <mt-navbar v-model="selected" :fixed="false">
            <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">
              <!-- 课程 -->
              <SplitLine borderWidth="3px"/>
              <!-- 五分钟医学 -->
              <SplitLine borderWidth="3px"/>
              <!-- 讲师 -->
              <SplitLine borderWidth="3px"/>
              <!-- 健康漫画 -->
              <ShowAllItem/>
              <NoMoreItem/>
              <GroupTitle/>
            </mt-tab-container-item>
            <mt-tab-container-item id="1">
              bbbb
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
              cccc
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
              dddd
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
              eee
            </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 { Navbar, TabItem } from 'mint-ui';

export default {
  data() {
    return {
      hasResult: true,
      searchText: '',
      selected: '0'
    }
  },
  components: {
    SearchHeader,
    SplitLine,
    Navbar,
    TabItem,
    NoMoreItem,
    ShowAllItem,
    GroupTitle
  },
  watch: {
    selected(val) {
      this.showIndex(val)
    }
  },
  created(){
    this.searchText = this.$route.query.searchText || ''
  },
  mounted(){
    this.search()
  },
  methods: {
    // 搜索
    search() {
      console.log('in result search: ' + this.searchText)
    },
    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';

</style>
