<template>
    <div>
        <!-- <SearchHeader @search="search" :searchText="searchText"/> -->
        <form @submit.prevent="search">
          <mt-search v-model="searchText" ></mt-search>
          <button v-show="false" type="submit" />
        </form>

        <!-- <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';
// import { Search } from 'mint-ui';

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

  mounted(){
    this.getData()
  },
  methods: {
    // 跳转到结果页面，并
    search() {
      if(!this.searchText) return;
      this.$router.push({
        path: '/result',
        query: {
          searchText: this.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>
<style >
  .mint-search {
    position: fixed;
    top: 0px;
    z-index: 2;
    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;
  }
  .mint-searchbar-core {
    background: #F5F6F6;
  }
</style>

<!-- 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>
