<template>
    <div>
        
        <!-- <SearchHeader @search="search" :searchText="searchText"/> -->
        <form @submit.prevent="search">
          <!-- <mt-search v-model="searchText" ></mt-search> -->
          <div class="search-container">
            <img class="search-container-img" @click="back" src="../images/sousuo/left-arrow-black.png"/>
            <div >
              <span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
              <input class="search-container-input" type="search"  v-model="searchText" maxlength="100">
              <span class="search-container-img3" @click="clearText"><img class="search-container-img" src="../images/sousuo/delete.png"/></span>
              <span class="search-container-cancle" @click.prevent="search">搜索</span>
            </div>
          </div>
          <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);
    // }

    // _self.getData()

    // 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'})
    },
    gotoPage(item) {
      let obj = {

      }
      console.log(item);
      // let url = pageJumpUrl();
      //  console.log(url.pageListUrl);
      let itemData = {
          "imageUrl": "",
          "appModuleInfo": {
              "code": "M300",
              "type": 4,
              "name": "课程介绍页",
              "paramFlag": 1,
              "paramList": []
          }
      };
      obj = {
          menuLevel: 1,
          menuCode: 'm_home',
          functionCode: 'f_five_minutes',
          actionCode: 'c_content',
          labelId: item.id,
          labelValue: item.title,
      }
      itemData.title = item.name;
      itemData.appModuleInfo["paramList"] = [{
              "key": "pageUrl",
              "value": 'http://10.177.11.253:8019/#/search',
              // "value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
              "type": 4,
              "seqNo": 1
          }
      ]
      
      // this.pageBurialPoin(obj)

      let paramList = this.setEventByModuleCode(itemData);
      // alert(itemData.appModuleInfo.code)
      // alert(JSON.stringify(paramList))
      rocNative.dispatchEventByModuleCode({
          modeCode: itemData.appModuleInfo.code,
          jsonString: paramList
      })
    },
    back() {
      rocNative.goBack()
    },
    clearText() {
      this.searchText = ''
    }

  },
}
</script>
<style >
  .mint-search {
    position: fixed;
    top: 0px;
    z-index: 2;
    height: 66px;
    width: 100%;
    /* margin: 0 20px; */
    border-bottom: 1px solid #E7E7E7 !important;
    background-color: #fff;
  }
 .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;
    margin: 0 10px;
    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 {
    color: #555555;
    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;
}
.search-icon {
  font-size: 20px;
}
.search-icon:before {
    content: "\E604";
}
.search-container {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  flex-direction: row;
  text-align: center;
  padding: px2rem(10px) 0;
  background: #fff;
  border-bottom: 1px solid #E7E7E7;
  &-img {
    padding: px2rem(21px) 0 0 px2rem(16px);
    width: px2rem(20px);
    height: px2rem(20px);
    // transform: rotate(180deg);
  }
  &-img2 {
    position: absolute;
    top: px2rem(9.5px);
    left: px2rem(24px);
    z-index: 2;
    img {
      width: px2rem(22px);
      height: px2rem(22px);
    }
  }
  &-img3 {
    position: absolute;
    top: px2rem(9px);
    left: px2rem(274px);
    z-index: 2;
    img {
      width: px2rem(22px);
      height: px2rem(22px);
    }
  }
  &-input {
    flex: 1;
    position: relative;
    left: px2rem(0px);
    width: px2rem(280px);
    height: px2rem(26px);
    margin-left: px2rem(0px);
    // padding-left: px2rem(26px);
    // padding-right: px2rem(28px);
    padding: px2rem(1px) px2rem(28px) 0 px2rem(26px);
    border-radius: px2rem(4px);
    background: rgba(246, 246, 246, 1);
    font-size: px2rem(13px);
    color: #666;
    -webkit-appearance: none;
  }
  &-cancle {
    position: relative;
    top: px2rem(1px);
    left: 0;
    height: px2rem(14px);
    line-height: px2rem(14px);
    margin-top: px2rem(2px);
    font-size: px2rem(14px);
    color: #999;
  }
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none;
}
</style>
