<template>

  <transition name="search">

    <div class="search">

    <header class="g-header-container">

        <search-header @query="getQuery"/>

    </header>

    <div class="g-content-container">

    </div>

  </div>

  </transition>

</template>

<script>

  import MeScroll from 'base/scroll';

  //import MeConfirm from 'base/confirm';

  import SearchHeader from './header';

  import SearchHot from './hot';

  import SearchHistory from './history';

  import SearchResult from './result';

  export default {

    name: 'Search',

    components: {

      MeScroll,

      //MeConfirm,

      SearchHeader,

      SearchHot,

      //SearchHistory,

      //SearchResult

    },

    data() {

      return {

        query: ''

      };

    },

    methods: {

      getQuery(query) {

        this.query = query;

      },

      showConfirm() {

        this.$refs.confirm.show();

      },

      clearAllSearchHistorys() {

        this.$refs.history.clear();

        this.$refs.history.update();

      },

      updateScroll() {

        this.$refs.scroll.update();

      }

    }

  };

</script>

<style scoped>

  @import "~assets/scss/mixins";

  .search {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: $search-z-index;

    background-color: $bgc-theme;

  }

  .search-enter-active,

  .search-leave-active {

      transition: all 0.3s;

  }

  .search-enter,

  .search-leave-to {

     transform: translate3d(100%, 0, 0);

  }

</style>

<template>

<me-navbar class="header">

<i

class="iconfont icon-back" slot="left" @click="goBack">

</i>

<me-search-box

placeholder="开学季有礼,好货五折起"

slot="center"

@query="query">

</me-search-box>

</me-navbar>

</template>

<script>

import MeNavbar from 'base/navbar';

import MeSearchBox from 'base/search-box';

export default{

name:'SearchHeader',

components:{

MeNavbar,

MeSearchBox

},

methods:{

query(){

this.$emit('query',query);//通过$emit把当前组件的query参数传递给父组件

},

goBack(){//点击返回事件

this.$router.back();

//this.go(-1);

}

}

}

</script>

<style>

</style>

<template>

 <!--  <div>

    hot

  </div> -->

  <div class="hot">

    <h4 class="hot-title">热门搜索</h4>

    <div class="loading-container" v-if="!hots.length">

      <me-loading/>

    </div>

    <ul class="hot-list" v-else>

      <li

        class="hot-item"

        v-for="(item, index) in hots"

        :key="index"

        @click="$_search_selectItem(item.hotWord)"

      >{{item.hotWord}}</li>

    </ul>

  </div>

</template>

<script>

  import MeLoading from 'base/loading';

  import {getSearchHotKeyword} from 'api/search';

  //import {searchMixin} from 'assets/js/mixins';

  export default {

    name: 'SearchHot',

    components: {

      MeLoading

    },

    //mixins: [searchMixin],

    created() {

      this.getHotKeyword().then(() => {

        this.$emit('loaded');

      });

    },

    data() {

      return {

        hots: []

      };

    },

    methods: {

      getHotKeyword() {

        return getSearchHotKeyword().then(data => {

          return new Promise(resolve => {

            if (data) {

              this.hots = data;

              resolve();

            }

          });

        });

      }

    }

  };

</script>

<style scoped>

@import "~assets/scss/mixins";

  .hot {

    padding-left: 10px;

    background-color: #fff;

    border-bottom: 1px solid $border-color;

    margin-bottom: 10px;

    &-title {

      height: 34px;

      line-height: 34px;

      font-size: $font-size-l;

      font-weight: bold;

    }

    &-list {

      display: flex;

      flex-wrap: wrap;

    }

    &-item {

      padding: 8px;

      background-color: #f0f2f5;

      border-radius: 4px;

      margin: 0 10px 10px 0;

      color: #686868;

    }

  }

  .loading-container {

    padding: 10px 0;

  }

</style>