<view class="container">
  <view class="title">
    <image class="titbg" src="../../src/titbg.png" background-size="cover"></image>
    <view class="tit">
    	<image class="scene" src="../../src/{{titclass}}.png" background-size="cover"></image>
    	<image class="mo" src="../../src/mo.png" background-size="cover"></image>
    </view>
  </view>
  <view class="items">
  	<view class="item" wx:key wx:for="{{list}}">
      <view class="audio" bindtap="bindViewTap" data-voice="{{item.voice}}" data-id="{{item.id}}">
        <image class="item-cover" src="{{item.thumbnail}}" mod="aspectFill"></image>
        <image class="a_btn" src="{{a_btn[item.id]?a_btn[item.id]:a_btn[0]}}" background-size="cover"></image>
      </view>
      <text bindtap="bindTextTap" data-id="{{item.id}}">{{item.name}}</text>
  	</view>
  </view>
  <view>
  	<image class="copyright" src="../../src/copyright.png" background-size="contain"></image>
  </view>
  <view>
    <audio src="{{detailInfo.voice}}" id="myAudio" bindended="audioEnd"></audio>
  </view>
</view>

.title{
	position:relative;
}
.titbg{
	width:268rpx;
	height:120rpx;
	margin:0 auto;
	display:block;
}
.tit{
	position:absolute;
	width:348rpx;
	height:40rpx;
	top:60rpx;
	left:50%;
	margin-left:-174rpx;
}
.scene{
	position:absolute;
	width:348rpx;
	height:40rpx;
}
.mo{
	position:absolute;
	width:54rpx;
	height:54rpx;
	right:10rpx;
	top:-26rpx;
}
.items{
	position:relative;
	z-index:2;
}
.item-cover{
	width:162rpx;
	height:162rpx;
	border-radius:50%;
	display:block;
	margin:0 auto 30rpx auto;
}
.audio{
	position:relative
}
.a_btn{
	width:36rpx;
	height:36rpx;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-18rpx;
	margin-top:-18rpx;
	z-index:2;
}
.item{
	width:50%;
	float:left;
	margin:30rpx 0 40rpx 0;
}
.item text{
	width:100%;
	display:block;
	text-align:center;
	font-size:28rpx;
	height:2em;
	overflow:hidden;
}

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    voice:"",
    list: [],
    titclass:"scene1",
    a_btn: ['../../src/play_scene.png'],
    last:0,
    pause:false
  },
  //事件处理函数
  bindTextTap: function(e) {
    var id = e.currentTarget.dataset.id;
    console.log(id);
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  },
  bindViewTap: function(e){
    var that = this
    var voice = e.currentTarget.dataset.voice;
    var id = e.currentTarget.dataset.id;
    that.audioPlay(voice,id);
  },
  getSceneList: function(id){
    var that = this
    wx.request({
      url: "https://qcloud.bmy.com.cn/api/voices/list?&id="+id,
      success: function(data){
        console.log(data.data);
        that.setData({
          list:data.data,
          titclass:'scene'+id
        })
        that.setAudio(data.data)
      },
      fail: function () {
        wx.showLoading({
          title: '数据加载错误，请刷新再试！'
        })
      }
    });
  },
  setAudio: function(data){
    var that = this;
    that.audioCtx = wx.createAudioContext('myAudio')
  },
  audioPlay: function(voice,id){
    var that = this;
    var tmp = that.data.a_btn;
    var pause;
    if(id == that.data.last&&that.data.pause==false){
      that.audioCtx.pause();
      tmp[id] = '../../src/play_scene.png'
      pause = true
    }else{
      if(id != that.data.last){
        that.audioCtx.setSrc(voice)
      }
      that.audioCtx.play();
      tmp[that.data.last] = '../../src/play_scene.png'
      tmp[id] = '../../src/pause_scene.png'
      pause = false
    }
    that.setData({
      a_btn: tmp,
      last:id,
      pause:pause
    })
  },
  audioEnd:function(){
    var that = this;
    var tmp = that.data.a_btn;
    tmp[that.data.last] = '../../src/play_scene.png'
    that.setData({
      a_btn: tmp
    })
  },
  onLoad: function (option) {
    var that = this
    that.getSceneList(option.id);
    wx.showLoading({
      title: '加载中'
    })
  },
  onReady:function(){
    setTimeout(function(){
      wx.hideLoading();
    },500)
    
  }
})