<template>
    <div >
        <div class="top-bar-height"></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" :placeholder="pSearchText" @focus="onInputFocus" @blur="onInputBlur">
              <span v-show="isOnFocus" 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>
        <div class="mt-80"></div>
        <!-- <SplitLine /> -->
        <!-- <div class="mt-100"></div> -->
        <HistoryLabels/>
        <HotLabels/>
        <!-- <FirstTimeSS v-show="needShowFirstTime" @closeFC="closeFC"/> -->
    </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 FirstTimeSS from '../components/common/first-time-ss';
import { mapGetters, mapActions } from 'vuex';

export default {
  data() {
    return {
      searchText: '',
      pSearchText: '',
      token: '',
      needShowFirstTime: true,
      isOnFocus: false
    }
  },
  components: {
    SearchHeader,
    SplitLine,
    HistoryLabels,
    HotLabels,
    FirstTimeSS
  },
  created(){
    
  },
  computed: {
    ...mapGetters({
      statusBarHeight: 'statusBarHeight'
    })
  },
  created() {
    let _self = this;
    window.__getUserInfo_S = function(params){
        _self.token = params.userToken
        _self.getData()
    }
    window.__getStatusBarHeight = function (param) {
        _self.setStatusBarHeight(param)
    }
  },
  mounted(){
    this.getUserInfo()
    // this.getStatusBarHeight()
  },
  methods: {
    ...mapActions({
      setStatusBarHeight: 'setStatusBarHeight'
    }),
    // 跳转到结果页面，并
    search() {
      // if(!this.searchText) return;
      this.$router.push({
        path: '/result',
        query: {
          searchText: this.searchText || this.pSearchText
        }
      })
    },
    // 获取历史搜索
    getData() {
      let _this = this,
          para = {
              type: 1,
              token: _this.token,
              setEntry: 'headers'
          }
      let url = '/contents/searchKeyword/listKeywords'
      this.GET(url, para).then(res => {
          // alert(JSON.stringify(res))
          if (res.code == '000000') {
            if (res.data && res.data.length) {
              let index = Math.floor(Math.random() * res.data.length)
              this.pSearchText = res.data[index].keyword
              // this.searchText = res.data[index].keyword
            }
          }
      })
    },
    getUserInfo: function () {
      // alert('getUserInfo')
      rocNative.getUserInfo({'__funcName': '__getUserInfo_S'})
    }, 
    getStatusBarHeight: function () {
      rocNative.getStatusBarHeight({'__funcName': '__getStatusBarHeight'})
    },
    gotoPage(item) {
      let obj = {

      }
      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 = ''
    },
    isFirstTime() {
        rocNative.isFirstTime({
            projectName: 'YQY_PROJECT_SOUSUO_1',
            __funcName: '__isFirstTime'
        })
    },
    onInputFocus() {
      this.isOnFocus = true
    },
    onInputBlur() {
      this.isOnFocus = false
    },
    closeFC() {
      this.needShowFirstTime = false
    }
  },
}
</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-80 {
    padding-top: px2rem(70px);
  }
.mt-100 {
  padding-top: px2rem(63px) !important;
}
.search-icon {
  font-size: 20px;
}
.search-icon:before {
    content: "\E604";
}
.search-container {
  display: flex;
  position: fixed;
  top: px2rem(10px);
  left: 0;
  z-index: 3;
  width: 100%;
  flex-direction: row;
  text-align: center;
  padding: px2rem(10px) 0 px2rem(4px);
  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;
  }
}
.top-bar-height {
  position: fixed;
  height: px2rem(10px);
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: #fff;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none;
}
</style>
