<!--pages/search/search.wxml-->
<view class="search df">
    <input class="df_1" placeholder="请输入你有搜索的内容" auto-focus focus="{{focus}}" value="{{searchValue}}" bindinput="searchValueInput"/>
    <button bindtap="doSearch"><image class="searchcion" src="/images/search.png"></image></button>
</view>
<view class="cont" wx:if="{{hotKeyShow}}">
    <text class="font_14">热门搜索</text>
    <view class="w100">
        <button wx:for="{{hotKeyList}}" bindtap="doKeySearch" data-key="{{item.keyword}}">{{item.keyword}}</button>
    </view>
    <text class="font_14 mt10">历史搜索</text>
    <view class="w100">
        <button wx:for="{{historyKeyList}}" bindtap="doKeySearch" data-key="{{item.keyword}}">{{item.keyword}}</button>
    </view>
</view>
<view class="search_no" wx:if="{{!!searchValue && !productData.length}}">
    <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
    <text>没有找到您要的宝贝/(ㄒoㄒ)/~~</text>
</view>
<view class="shop" wx:for="{{productData}}"> 
    <navigator url="../product/detail?productId={{item.id}}" hover-class="changestyle">      
        <image class="sh_slt" src="{{item.photo_x}}"></image>
        <view class="sp_text">
            <view class="sp_tit ovh1">{{item.name}}</view>
            <view class="sp_jg">￥：{{item.price_yh}}</view>
        </view>
    </navigator>
</view>

/* pages/search/search.wxss */
.search{
    padding: 1% 3%;
    background: #000;
}
.search input{
    width: 75%;
    border-radius: 13px;
    background: #fff;
    border: none;
    font-size: 12px;
    padding:1% 2.5%;
    margin-right: 5px;
    }
.search button{
    line-height:30px;
    background: none;
    text-align: center;
    border: none;
    padding: 3px;
}
.search button::after{
    content: none;
}
.searchcion{
    width: 24px;
    height: 24px;
    text-align: center
}
.cont{
     width: 94%;
     padding: 3%;     
}
.w100{ 
    width: 100%;
    padding-bottom: 10px;
}
.w100 button{
    text-align: center;
    line-height: 20px;
    margin: 3% 2% 0 0;
    display: inline-table;
    padding:5px 10px;
    font-size: 12px;
}
.shop{
    width: 49%;
    background: #fff;
    float: left;
    margin-bottom: 4%;
}
.shop:nth-child(even){
    margin-right: 2%;
}
.sh_slt{
    width: 100%;
    height: 370rpx;
    overflow: hidden;
}
.sp_text{
    float: left;
    line-height: 25px;
    width: 92%;
    padding: 4%;
    }
.sp_tit{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
}
.sp_jg{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fc0628;
    line-height: 30px;
}

var app = getApp();
// pages/search/search.js
Page({
  data:{
    focus:true,
    hotKeyShow:true,
    historyKeyShow:true,
    searchValue:'',
    page:0,
    productData:[],
    historyKeyList:[],
    hotKeyList:[]
  },
  onLoad:function(options){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Search/index',
      method:'post',
      data: {uid:app.d.userId},
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var remen = res.data.remen;
        var history = res.data.history;

        that.setData({
          historyKeyList:history,
          hotKeyList:remen,
        });
      },
      fail:function(e){
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      },
    })
  },
  onReachBottom:function(){
      //下拉加载更多多...
      this.setData({
        page:(this.data.page+10)
      })
      
      this.searchProductData();
  },
  doKeySearch:function(e){
    var key = e.currentTarget.dataset.key;
    this.setData({
      searchValue: key,
       hotKeyShow:false,
       historyKeyShow:false,
    });

    this.data.productData.length = 0;
    this.searchProductData();
  },
  doSearch:function(){
    var searchKey = this.data.searchValue;
    if (!searchKey) {
        this.setData({
            focus: true,
            hotKeyShow:true,
            historyKeyShow:true,
        });
        return;
    };

    this.setData({
      hotKeyShow:false,
      historyKeyShow:false,
    })
    
    this.data.productData.length = 0;
    this.searchProductData();

    this.getOrSetSearchHistory(searchKey);
  },
  getOrSetSearchHistory:function(key){
    var that = this;
    wx.getStorage({
      key: 'historyKeyList',
      success: function(res) {
          console.log(res.data);

          //console.log(res.data.indexOf(key))
          if(res.data.indexOf(key) >= 0){
            return;
          }

          res.data.push(key);
          wx.setStorage({
            key:"historyKeyList",
            data:res.data,
          });

          that.setData({
            historyKeyList:res.data
          });
      }
    });
  },
  searchValueInput:function(e){
    var value = e.detail.value;
    this.setData({
      searchValue:value,
    });
    if(!value && this.data.productData.length == 0){
      this.setData({
        hotKeyShow:true,
        historyKeyShow:true,
      });
    }
  },
  searchProductData:function(){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Search/searches',
      method:'post',
      data: {
        keyword:that.data.searchValue,
        uid: app.d.userId,
        page:that.data.page,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {   
        var data = res.data.pro;
        that.setData({
          productData:that.data.productData.concat(data),
        });
      },
      fail:function(e){
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      },
    });
  },

});