<template>
  <LayoutApp class="" :show-back="true">
      <form action="javascript:void(0)">
        <div class="search-header middle">
          <div class="search-img"></div>
          <input class="search-input" type="search" v-model="query" placeholder="Search" @keypress="suggest"
                 @keyup.13="searchGoods"/>
          <div class="search-clear" :class="query && 'search-clear-img'" @click="clear()"></div>
        </div>
      </form>
      <Scroll v-if="!query.length" :options="scrollOptions">
        <div class="recent middle" v-if="localHistory.length">
          <div class="title">最近搜索</div>
          <div class="clearSearch" @click="clearLocalHistory()">清除</div>
        </div>
        <div class="item middle" v-if="localHistory.length" v-for="item of localHistory" @click="goSearch(item)">{{item}}
        </div>
        <div class="recent title middle" v-if="searchWord.length">热门推荐</div>
        <div class="item middle" v-if="searchWord.length" v-for="item of searchWord" @click="goSearch(item.search_word)">
          {{item.search_word}}
        </div>
      </Scroll>
      <Scroll v-if="query.length" :options="scrollOptions" :data="searchSuggestList">
        <div class="item middle" v-if="searchSuggestList.length" v-for="item of searchSuggestList" @click="goSearch(item.item)">
          {{item.item}}
        </div>
      </Scroll>
  </LayoutApp>
</template>
<script>
import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('list');

export default {
  name: 'Search',
  components: {
    Scroll,
  },
  data() {
    return {
      scrollOptions: {
        bounce: {
          top: false
        }
      },
      query: '',
      localHistory: []
    };
  },
  mounted() {
    this.fetchSearchWords();
    this.fetchDefaultSearchWords();
    this.setLocalList();
  },
  computed: {
    ...mapState(['searchWord', 'defaultSearchWord', 'searchSuggestList']),
  },
  methods: {
    ...mapActions(['setSearchQuery', 'fetchSearchWords', 'fetchDefaultSearchWords', 'fetchSearchSuggest']),

    clear: function() {
      this.query = '';
    },
    searchGoods: function() {
      this.setSearchQuery(this.query);
      this.addLocalWord();
      this.$router.push({
        name: 'List'
      });
    },
    suggest: function() {
      this.fetchSearchSuggest(this.query);
    },
    goSearch: function(query) {
      this.setSearchQuery(query);
      this.$router.push({
        name: 'List'
      });
    },
    clearLocalHistory: function() {
      localStorage.setItem('@YohoUFOStore:searchHistory', '');
      this.setLocalList();
    },
    setLocalList: function() {
      let localHistory = localStorage.getItem('@YohoUFOStore:searchHistory');

      if (localHistory) {
        localHistory = localHistory.split(',');
      }
      this.localHistory = localHistory;
    },
    addLocalWord: function() {
      if (this.query) {
        let localHistory = localStorage.getItem('@YohoUFOStore:searchHistory');

        if (localHistory) {
          let localArr = localHistory.split(',');

          if (!localArr.includes(this.query)) {
            localStorage.setItem('@YohoUFOStore:searchHistory', this.query + ',' + localHistory);
          }
        } else {
          localStorage.setItem('@YohoUFOStore:searchHistory', this.query);
        }
      }
    }
  }
};
</script>
<style scoped>
  .search-header {
    height: 72px;
    background: #f5f5f5;
    flex-direction: row;
    display: flex;
    font-size: 17px;
    color: #8e8e93;
    line-height: 44px;
    align-items: center;
    border-radius: 5px;
  }

  .search-input {
    background: #f5f5f5;
    height: 72px;
    font-size: 34px;
    color: #000;
    flex: 1;
    border-radius: 0;
    padding: 14px;
  }

  .middle {
    margin: 0 40px;
  }

  .search-img {
    width: 40px;
    height: 40px;
    margin-left: 20px;
    background: url(~statics/image/list/searchPage_icon@3x.png) no-repeat;
    background-size: cover;
  }

  .search-clear {
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }

  .search-clear-img {
    background: url(~statics/image/list/search_clear@3x.png) no-repeat;
    background-size: cover;
  }

  .title {
    font-size: 40px;
    font-weight: 500;
    color: #000;
  }

  .item {
    line-height: 88px;
    height: 88px;
    font-size: 28px;
    color: #333;
    border-bottom: 1px #eee solid;
  }

  .recent {
    flex-direction: row;
    justify-content: space-between;
    display: flex;
    align-items: center;
    margin-top: 60px;
  }

  .clearSearch {
    font-size: 32px;
    color: #999;
  }
</style>