<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 {mapState, mapMutations} from 'vuex'

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: '',
      token: ''
    }
  },
  components: {
    SearchHeader,
    SplitLine,
    HistoryLabels,
    HotLabels
  },
  created(){
    
  },
  computed:{
    ...mapState([
        'sousuo'
    ])
  },
  mounted(){
    let _self = this;
    window.__getUserInfo = function(params){
        _self.token = params.userToken
        // _self.SET_USER_INFO(params)
        _self.getData()
    }
    window.__refresh = function(){
      _self.getUserInfo()
    }
    window.__getStatusBarHeight = function(params){
      _self.SET_NAVBAR_HEIGHT(params)
    }

    // window.__getStatusBarHeight = function(parm){
    //   //lert(parm.statusBarHeight)
    //   if(window.__isAndroid){
    //     _this.popHeight = parseInt(parm.statusBarHeight)/2.5
    //   }else{
    //     _this.popHeight = parm.statusBarHeight
    //   }
    //   _this.ptop = _this.popHeight+'px';
    //   _this.menuptop = _this.popHeight+'px'
    //  // alert(parm.statusBarHeight);
    // }

    if(window.__isWeb) {
      _self.getData()
    }
    _self.getUserInfo()
    _self.getStatusBarHeight()
  },
  methods: {
    ...mapMutations([
        'SET_USER_INFO', 'SET_NAVBAR_HEIGHT'
    ]),
    // 跳转到结果页面，并
    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
            }
          }
      })
    },
    getUserInfo: function () {
      rocNative.getUserInfo({'__funcName': '__getUserInfo'})
    }, 
    getStatusBarHeight: function () {
      rocNative.getStatusBarHeight({'__funcName': '__getStatusBarHeight'})
    }
  },
}
</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>
