<template>
  <div class="searchAll">
    <div class="search">
      <div class="kuang">
        <input type="text" v-model="searchContext" placeholder="全站搜索" @keyup.enter="blurUpset(false)" />
        <img :src="imgUrl.search" alt @click="blurUpset(false)" />
      </div>
      <div class="tjHold">
        统计热词
        <div>
          <div v-for="(item,index) in hotFont" :key="index" :title="item" @click="blurUpset(item)">{{comHotCi(item)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'search',
  data () {
    return {
      imgUrl: {
        search: require('../../../static/index/search.png')
      },
      searchContext: this.$route.path === '/searchList' ? (this.$route.query.keyVal) : '',
      hotFont: ['GDP', 'CPI', '总人口', '社会消费品零售总额', '粮食产量', 'PMI']
    }
  },
  methods: {
    blurUpset (textCont) {
      /*eslint-disable*/
      console.log(textCont, '3523')
      // if (this.searchContext === '') {
      //   alert('搜索词不能为空！')
      //   return
      // }
      if (this.$route.path === '/searchList') {
        this.$router.push({
          path: '/'
        })
        this.$router.push({
          path: './searchList',
          query: {
            keyVal: textCont?textCont:this.searchContext
          }
        })
        this.$router.go(0)
      } else {
        this.$router.push({
          path: './searchList',
          query: {
            keyVal: textCont?textCont:this.searchContext
          }
        })
      }
    },
    // 获取统计热词
    getHotWords () {
      this.$axios({
        method: 'GET',
        url: 'search/search/hot-words',
        params: {}
      }).then(res => {
        // console.log(res, '统计热词')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.hotFont = res.data.data.list.map((item, index) => {
            return item.word
          })
        }
      }).catch((fail) => {
        console.log(fail)
      })
    }
  },
  computed: {
    comHotCi () {
      return (str) => {
        let Strs = ''
        if (str.length <= 5) {
          Strs = str
        } else {
          Strs = str.substr(0, 5)
        }
        return Strs
      }
    }
  },
  mounted () {
    this.getHotWords()
  }
}
</script>
<style scoped lang="scss">
.searchAll {
  width: 100%;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f8f8f8 !important;
  // border:1px solid red;
  & > .search {
    margin: 1.25rem 0;
    width: 84.25rem;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    & > .kuang {
      width: 43.25rem;
      height: 3.5rem;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      border: 0.125rem solid #414141;
      border-radius: 0.35rem;
      & > img {
        width: 1.75rem;
        height: 1.75rem;
      }
      & > img:hover {
        cursor: pointer;
      }
      & > input {
        width: 36rem;
        border: none;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #333333;
        background-color: #f8f8f8;
      }
      & > input:focus {
        outline: none;
      }
    }
    & > .tjHold {
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: space-between;
      -moz-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: 1.25rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #333333;
      & > div {
        margin-left: 2.25rem;
        width: 25.25rem;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #999999;
        & > div {
          margin-right: 1.25rem;
        }
        & > div:hover {
          cursor: pointer;
          color: #52b6e3;
        }
      }
    }
  }
}
</style>
