<template>
    <div>
        <SearchHeader @search="search" :searchText="searchText"/>
        <!-- <SplitLine /> -->
        <div class="mt-100"></div>
        <HistoryLabels/>
        <HotLabels/>
    </div>
</template>

<script>
import SearchHeader from '../components/business/search-header';
import SplitLine from '../components/business/split-line';
import HistoryLabels from '../components/business/history-labels';
import HotLabels from '../components/business/hot-labels';

export default {
  data() {
    return {
      searchText: ''
    }
  },
  components: {
    SearchHeader,
    SplitLine,
    HistoryLabels,
    HotLabels
  },
  created(){
    
  },

  mounted(){
    this.getData()
  },
  methods: {
    // 跳转到结果页面，并
    search(searchText) {
      console.log(searchText)
      if(!searchText) return;
      this.$router.push({
        path: '/result',
        query: {
          searchText: searchText
        }
      })
    },
    // 获取历史搜索
    getData() {
      let _this = this,
          para = {
              type: 1,
              token: _this.token,
              setEntry: 'headers'
          }
      let url = '/contents/searchKeyword/listKeywords'
      this.GET(url, para).then(res => {
          if (res.code == '000000') {
            if (res.data && res.data.length) {
              let index = Math.floor(Math.random() * res.data.length)
              this.searchText = res.data[index].keyword
            }
          }
      })
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../style/mixin.scss';
@import '../style/global.scss';
.mt-100 {
  padding-top: px2rem(63px) !important;
}
</style>
