<view class="container">

    <view class="ar_coverpath">
        <image src="../../images/banner_02.png" mode="aspectFill"></image>
    </view>

    <view class="ar_picker">
        <view class="ar_picker_wrap">
        <picker bindchange="bindAddrPickerChange" value="{{addrIndex}}" range="{{addrArray}}">
            <view>
                <text>{{addrArray[addrIndex]}}</text>
            </view>
        </picker>
        </view>
    </view>

    <view class="ar_cont">
        <text class="ar_cont_h1">服务时间</text>
        <view class="ar_date_time">
            <view class="ar_date">
                <image src="../../images/date.png"></image>
                <picker mode="date" placeholder="选择日期" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" >
                    <view>
                        {{date}}
                    </view>
                </picker>
            </view>
            <view class="ar_time">
                <image src="../../images/time.png"></image>
                <picker mode="time" placeholder="选择时间" value="{{time}}" start="01:00" end="24:00" bindchange="bindTimeChange">
                    <view>
                        {{time}}
                    </view>
                </picker>
            </view>
        </view>

        <text class="ar_cont_h1">留言信息</text>

        <input type="text" placeholder="输入信息" class="input_msg" placeholder-style="font-family:'微软雅黑'"/>

        <button class="ar_book" bindtap="bindToastTap">确认预定</button>
        <toast hidden="{{bookToastHidden}}"  bindchange="hideToast">
        预定成功
        </toast>
    </view>

</view>

.container{
    background:#fff;
}
.ar_coverpath{
    width:100%;
    margin:0rpx;
    padding:0rpx;
    height:175px;
}
.ar_coverpath image{
    width:100%;
}
.ar_picker{
    width:100%;
    font-size:30rpx;
    color:#000;
    background: #efeff4;
    margin:0;
}
.ar_picker .ar_picker_wrap{
    width: 670rpx;
    background: #fff url(../../images/arrow.png) no-repeat right center;
    background-size:25rpx 14rpx;
    background-position:650rpx;
    border-radius:20rpx;
    padding:20rpx;
    margin:20rpx auto;
}
.ar_cont{
    padding:20rpx 60rpx;
    font-size:30rpx;
    background: #fff;
    margin-bottom:40rpx;
    line-height: 45rpx;
    color:#666666;
}
.ar_cont .ar_cont_h1{
    font-size: 32rpx;
    font-weight: 600;
    line-height: 64rpx;
    color:#000;
}
.ar_date_time{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin:30rpx 0rpx 60rpx;
}
.ar_date_time .ar_date,
.ar_date_time .ar_time{
    width:47%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.ar_date_time .ar_date image{
    width:34rpx;
    height:38rpx;
    
}
.ar_date_time .ar_time image{
    width:45rpx;
    height:38rpx;
}
.ar_date_time picker{
    width:220rpx;
    border:1px solid #ddd;
    border-radius:8rpx;
    padding:0rpx 10rpx;
    margin-left:10rpx;
}
.input_msg{
    border:1px solid #ddd; 
    border-radius:8rpx;
    padding:0rpx 10rpx;
}
.ar_book{
    background:#d24a58;
    font-size: 32rpx;
    color:#fff;
    border-radius: 0rpx;
    margin:40rpx 0rpx 10rpx;
}

var app = getApp()
var mydata = require('../../utils/data')
var util = require('../../utils/util')

Page( {
  data: {
    addrArray:util.replacePhone(mydata.userData().addrs,true),
    addrIndex:0,
    date : '2016-10-14',
    time : '12:00',
    bookToastHidden:true
  },
  onLoad: function (options) {
    this.setData({
      artype:options.artype
    })   
  },
  // 地址选择
  bindAddrPickerChange : function(e){
    console.log('Addrpicker发送选择改变，携带值为', e.detail.value)
    this.setData({
      addrIndex: e.detail.value
    })
  },
  bindToastTap:function(){
      console.log('预定成功')
      this.setData({
          bookToastHidden:false
      })
  },
  hideToast:function(){
    this.setData({
          bookToastHidden:true
      })
  },
  // 日期选择
  bindDateChange: function(e){
    console.log('date picker发送选择改变，携带值为', e.detail.value)
    this.setData({
          date: e.detail.value
    })
  },
  // 时间选择
  bindTimeChange: function(e){
    console.log('time picker发送选择改变，携带值为', e.detail.value)
    this.setData({
          time: e.detail.value
    })
  }
  
})