<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" @input="suggest" @focus="yasFocus"
                 @keyup.13="searchGoods"/>
          <div class="search-clear" :class="query && 'search-clear-img'" @click="clear()"></div>
        </div>
      </form>
      <Scroll v-show="!query.length" :options="scrollOptions">
        <div class="recent title middle" v-if="searchWord && searchWord.length">热门推荐</div>
        <div class="content middle">
          <div class="item" v-if="searchWord && searchWord.length" v-for="item of searchWord" @click="goSearch({query : item.search_word} ,2)">
            {{item.search_word}}
          </div>
        </div>
        <div class="recent middle" v-if="localHistory && localHistory.length">
          <div class="title">最近搜索</div>
          <div class="search-clear search-clear-img" @click="clearLocalHistory()"></div>
        </div>
        <div class="content middle">
          <div class="item" v-if="localHistory && localHistory.length" v-for="item of localHistory" @click="goSearch({query : item} ,1)">{{item}}
          </div>
        </div>
      </Scroll>
      <Scroll v-show="query.length" :options="scrollOptions" :data="searchSuggestList">
        <div class="item-line middle" v-if="searchSuggestList.length" v-for="item of searchSuggestList" @click="goSearch({query : item.item} ,0)">
          {{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: []
    };
  },
  activated() {
    this.query = '';
    this.fetchSearchWords();
    this.fetchDefaultSearchWords();
    this.setLocalList();
  },
  computed: {
    ...mapState(['searchWord', 'defaultSearchWord', 'searchSuggestList']),
  },
  methods: {
    ...mapActions(['fetchSearchWords', 'fetchDefaultSearchWords', 'fetchSearchSuggest']),

    clear: function() {
      this.query = '';
    },
    searchGoods: function() {
      this.addLocalWord();
      this.yasInput(0);
      this.$router.push({
        name: 'List',
        query: {
          query: this.query,
          type: 6
        }
      });
    },
    suggest: function() {
      this.fetchSearchSuggest(this.query);
    },
    goSearch: function(parameters, type) {
      let query = parameters.query;

      this.yasInput(type);
      this.$router.push({
        name: 'List',
        query: {
          query,
          type: 6
        }
      });
    },
    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);
        }
      }
    },
    yasFocus() {
      this.$store.dispatch('reportYas', {
        params: {
          param: {SEARCH_POS: 3},
          appop: 'XY_UFO_SEARCH_CLICK'
        }
      });
    },
    yasInput: function(type) {
      this.$store.dispatch('reportYas', {
        params: {
          param: {
            SEARCH_POS: 3,
            KEYWORD: this.query,
            POS_ID: type,
            TYPE_ID: type,
            FLR_INDEX: type,
          },
          appop: 'XY_UFO_HOME_KEYWORD_SEARCH_C'
        }
      });
    }
  }
};
</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: 60px;
    height: 60px;
    font-size: 24px;
    color: #000;
    padding: 0 20px;
    border-radius: 30px;
    background: #f5f5f5;
    margin-right: 20px;
    margin-bottom: 30px;
  }

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

  .content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
  }

  .clearSearch {
    font-size: 32px;
    color: #999;
  }

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

</style>