<!--pages/onmyouji/hellspawnSearch/hellspawnSearch.wxml-->
<view class="page">
  <view class="hot">
    <text class="hot_title">热门搜索</text>
    <view class="hot_list">
      <navigator url="../onmyoji/onmyoji?id={{item.id}}" wx:for="{{ popularList }}" wx:key="name" class="hot_item">{{ item.name }}</navigator>
    </view>
  </view>
  <view class="page__bd">
    <view class="weui-search-bar">
      <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
          <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
            <icon type="clear" size="14"></icon>
          </view>
        </view>
        <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
          <icon class="weui-icon-search" type="search" size="14"></icon>
          <view class="weui-search-bar__text">搜索</view>
        </label>
      </view>
      <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
    </view>
    <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
      <block wx:for="{{hellspawnList}}" wx:key="id">
        <navigator url="../onmyoji/onmyoji?id={{ item.id }}" class="weui-cell" hover-class="weui-cell_active">
          <view class="weui-cell__hd">
            <image src="{{item.icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
          </view>
          <view class="weui-cell__bd">{{ item.name }}</view>
        </navigator>
      </block>
    </view>
  </view>
  <view class="weui-footer weui-footer_fixed-bottom">
    <view class="weui-footer__text">Copyright © 2017 serenitynight.com</view>
  </view>
</view>

/* pages/onmyouji/hellspawnSearch/hellspawnSearch.wxss */

.hot {
  height: 210rpx;
  background-color: #17212C;
  padding: 10rpx;
}

.hot_title {
  color: white;
  font-size: medium;
  display: block;
}

.hot_list {
  margin-top: 10rpx;
  margin-left: 10rpx;
}

.hot_item {
  display: inline-block;
  color: #99DDFF;
  line-height: 50rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  background-color: #242E3F;
  border-radius: 15rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
  border:1px solid #67809F;
}

/**
 * pages/onmyouji/hellspawnSearch/hellspawnSearch.js
 * 
 * @description 式神搜索页
 * @version 1.0.0
 * 
 */

var http = require("../../../utils/http.js");
var app = getApp();

Page({

  data: {
    popularList: [],
    inputShowed: false,
    inputVal: "",
    hellspawnList: []
  },

  onShow: function () {
    this.getPopular();
  },

  // 获取 热门搜索
  getPopular: function () {
    //console.log(http)
    var url = http.generateUrl('api/v1/populars');
    var _this = this;
    wx.request({
      url: url,
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        console.log(res)
        // success
        if (res.data.status == 1) {
          _this.setData({
            popularList: res.data.body.popular_list
          });
        }
      },
      fail: function (error) {
        console.error(error)
      }
    })
  },

  // 显示搜索input
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },

  // 隐藏搜索input
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },

  // 清空搜索input
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },

  // 搜索input状态改变时
  inputTyping: function (e) {
    var _this = this;
    this.setData({
      inputVal: e.detail.value
    });
    if (e.detail.value) {
      var url = http.generateUrl('api/v1/search/' + e.detail.value);
      wx.request({
        url: url,
        method: 'GET',
        success: function (res) {
          if (res.data.status == 1) {
            _this.setData({
              hellspawnList: res.data.body.hellspawn_list
            })
          }
        }
      })
    }
  }

})