<template>
  <div class="main-container">
    <app-search-bar v-model="searchValue" @search="onSearch" />
    <div class="search-tips" v-if="!searchValue">
      <div class="search-tips-item" v-if="historyList.length && isLogin">
        <h3 class="search-tips__title">搜索历史</h3>
        <ul class="search-tips__list">
          <li
            v-for="(item, index) in historyList"
            :key="index"
            @click="changeSearchValue(item)"
          >{{item}}</li>
        </ul>
      </div>
      <div class="search-tips-item" v-if="featureList.length">
        <h3 class="search-tips__title">搜索发现</h3>
        <ul class="search-tips__list">
          <li
            v-for="(item, index) in featureList"
            :key="index"
            @click="changeSearchValue(item)"
          >{{item}}</li>
        </ul>
      </div>
    </div>
    <div class="search-main" v-if="searchValue">
      <van-tabs
        class="main-tabs"
        v-model="tabActive"
        color="#C62245"
        :line-height="2"
        :animated="true"
        :swipeable="true"
        @click="onTabClick"
      >
        <van-tab title="考点" name="0">
          <tag-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '0'"></tag-list>
        </van-tab>
        <van-tab title="视频课程" name="1">
          <video-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '1'"></video-list>
        </van-tab>
        <van-tab title="课程" name="2">
          <course-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '2'"></course-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
// components
import AppSearchBar from '@/components/AppSearchBar.vue'
import TagList from './components/tagList.vue'
import VideoList from './components/videoList.vue'
import CourseList from './components/courseList.vue'
// api
import * as api from './api'

export default {
  name: 'SearchIndex',
  components: { AppSearchBar, TagList, VideoList, CourseList },
  metaInfo: {
    title: '搜索'
  },
  data() {
    return {
      tabActive: '0',
      searchValue: '',
      detail: {
        base_tips: [],
        tips: []
      }
    }
  },
  watch: {
    $route: {
      immediate: true,
      depp: true,
      handler(route) {
        this.tabActive = route.query.tab || '0'
        this.searchValue = route.query.keywords || ''
      }
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin
    },
    // 搜索发现
    featureList() {
      // 最多显示10条
      return this.detail.base_tips.filter((item, index) => index < 10)
    },
    // 搜索记录
    historyList() {
      // 最多显示10条
      return this.detail.tips.filter((item, index) => index < 10)
    }
  },
  methods: {
    // 获取所搜记录
    getSearchTips() {
      api.getSearchTips().then(response => {
        this.detail = response
      })
    },
    changeSearchValue(value) {
      this.searchValue = value
    },
    onTabClick(name) {
      this.$router.replace({ query: { tab: name, keywords: this.searchValue } })
    },
    onSearch() {
      if (!this.searchValue.trim()) {
        return
      }
      this.$router.replace({
        query: { tab: this.tabActive, keywords: this.searchValue }
      })
    }
  },
  beforeMount() {
    this.getSearchTips()
  }
}
</script>

<style lang="scss" scoped>
.search-tips-item {
  clear: both;
  overflow: hidden;
}
.search-tips__title {
  font-size: 0.3rem;
  font-weight: 400;
  color: #222;
}
.search-tips__list {
  padding-top: 0.37rem;
}
.search-tips__list li {
  display: inline-block;
  max-width: 100%;
  font-size: 0.26rem;
  color: #999;
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
