<import src="../common/tab.wxml" />
<import src="../common/list.wxml" />


<template name="search">
	<view class="search-area"> 
		<input bindinput="inputing" placeholder="请输入搜索关键字" value="{{data.value}}" />
		<button type="primary" size="mini" bindtap="bindSearch" loading="{{data.loading}}"> 立即搜索 </button>
	</view>
</template>

<view class="container">
	<template is="tab" data="{{list: tab, active: tabActive}}" />
	<template is="search" data="{{data: search}}" />
	<view class="songlist">
		<block wx:for="{{list}}">
			<template is="song-mini-item" data="{{item: item, index: index}}" />
		</block>
	</view>

	<toast wx:if="{{toast}}" icon="{{toast.type}}">
	    {{toast.text}}
	</toast>

</view>

.search-area{
	background: #f4f4f4;
	padding: 1rem 0.5rem;
}

.search-area input{
	background: #fff;
	border-radius: 3px;
	height: 2rem;
	line-height: 2rem;
	margin-bottom: 0.5rem;
	padding-left: 0.5rem;
	font-size: 0.8rem;
}

var api = require('../../utils/api.js')


//index.js
//获取应用实例
var app = getApp()
Page({
  data: Object.assign({
    tabActive: 'search',
    list: [],
    search: {
      value: ""
    },
    isEnd: false,
    paged: 1,
  }, app.globalData.data),
  showToast(text, type = 'success'){
    this.setData({
      toast: {
        text, type
      }
    })
    setTimeout(() => {
      this.setData({
        toast: ''
      })
    }, 3000);
  },
  inputing(e){
    console.log(e)
    
    this.setData({
      search: Object.assign(this.data.search, {value: e.detail.value})
    })
  },
  bindSearch(e){
    var keyword = this.data.search.value
    if(!keyword) {
      this.showToast('请输入关键字', 'warn')
      return;
    }
    api.search(keyword, 1).then(data => {
      this.setData({
        paged: 1,
        list: data.song
      })
    })
  },
  onReady: function(){
    wx.setNavigationBarTitle({title: "在线搜索"})
  },
  onLoad: function (option) {

  }
})