<view class="appointmentPage-wrap page" id="appointmentPage" data-router="appointmentPage">
  <view class="appointment-top-section">
    <view class="appointment-model-field">
      <text>服务时长</text>
      <text style="float:right;">{{ serviceTimeUnit }}</text>
      <view class="appointment-model-right">
        <picker class="appointment-field-selection" mode="selector" range="{{ appointmentInfo.serviceLongRange }}" value="{{ longRangeIndex }}" bindchange="serviceLongChange">
          <view>{{ appointmentInfo.serviceLongRange[longRangeIndex] }}</view>
        </picker>
      </view>
    </view>
    <view class="appointment-model-field" wx:if="{{ serviceTimeUnit == '小时' }}">
      <text>营业时段</text>
      <view class="appointment-model-right">
        <picker class="appointment-field-selection" mode="selector" range="{{ appointmentInfo.servicePeriodRange }}" value="{{ periodRangeIndex }}" bindchange="servicePeriodSelectChange">
          <view>{{ appointmentInfo.servicePeriodRange[periodRangeIndex] }}</view>
        </picker>
      </view>
    </view>
    <view class="appointment-model-field" style="border:none;"><text>价格</text><view class="appointment-model-right"><text class="appointment-service-price">{{ servicePrice }}</text> 元</view></view>
  </view>
  <view class="appointment-time-section">
    <view class="appointment-date-list">
      <view wx:for="{{ appointmentInfo.serviceDateList }}" wx:for-item="date" class="appointment-date-item {{ selectedDate == date.date ? 'selected':'' }} {{ !date.ifBusiness ? 'disabled':'' }}" data-date="{{ date.date }}" data-ifBusinessDay="{{ date.ifBusiness }}" bindtap="serviceDateChange">
        <view>{{ date.week }}<text wx:if="{{ !date.ifBusiness }}">(不营业)</text></view>
        <view>{{ date.modifiedDate }}</view>
      </view>
    </view>
    <view class="appointment-period-list">
      <view wx:for="{{ appointmentInfo.servicePeriodList }}" wx:for-item="period" class="appointment-period-item {{ selectedPeriod == period.interval ? 'selected':'' }} {{ period.can_buy == 0 || period.expired == 1 ? 'disabled' : '' }}" bindtap="servicePeriodListChange" data-expired="{{ period.expired }}" data-can-buy="{{ period.can_buy }}" data-interval="{{ period.interval }}">
        <view>{{ period.interval }}</view>
        <text wx:if="{{ period.can_buy == 0 || period.expired == 1 }}">({{ period.expired == 1 ? '过期' : '约满' }})</text>
      </view>
    </view>
  </view>
  <view class="appointment-bottom-bar">
    <form report-submit="true" bindsubmit="sureMakeAppointment">
      <button formType="submit" class="btn btn-block sure-make-appointment">确认</button>
    </form>
    <!-- <text class="btn btn-block sure-make-appointment" bindtap="sureMakeAppointment">确认</text> -->
  </view>
</view>

.appointmentPage-wrap {
  padding-bottom: 117rpx;
}
.appointment-top-section {
  padding: 0 35rpx;
  line-height: 93rpx;
}
.appointment-model-field {
  padding: 12rpx 23rpx;
  border-bottom: 1px solid #ddd;
}
.appointment-model-right {
  float: right;
}
.appointment-field-selection {
  width: 400rpx;
  height: 94rpx;
  line-height: 94rpx;
  text-align: right;
}
.appointment-service-price {
  color: red;
}
.appointment-date-list {
  width: 100%;
  padding-bottom: 23rpx;
  white-space: nowrap;
  overflow-x: auto;
}
.appointment-date-item {
  display: inline-block;
  padding: 23rpx 33rpx;
  border: 1px solid #ddd;
  border-left: none;
  background-color: #eee;
  text-align: center;
}
.appointment-date-item.disabled {
  color: #aaa;
}
.appointment-date-item.selected {
  position: relative;
  background-color: #666;
  color: #fff;
}
.appointment-date-item.selected:before {
  content: '';
  position: absolute;
  left: calc(50% - 19rpx);
  bottom: -19rpx;
  display: block;
  border-left: 19rpx solid transparent;
  border-right: 19rpx solid transparent;
  border-top: 23rpx solid #666;
}
.appointment-period-list {
  padding: 12rpx 23rpx 33rpx;
}
.appointment-period-item {
  position: relative;
  display: inline-block;
  height: 70rpx;
  width: 24.5%;
  margin-left: -1px;
  margin-top: -1px;
  padding: 33rpx 0;
  z-index: 1;
  font-size: 29rpx;
  text-align: center;
  color: #666;
  background-color: #fff;
  border: 1px solid #aaa;
  vertical-align: top;
}
.appointment-period-item.disabled {
  color: #aaa;
  background-color: #eee;
  border-color: #ccc;
  z-index: 0;
}
.appointment-period-item.selected {
  border-color: #10b935;
  /*box-shadow: inset 0 0 1px #10b935;*/
  z-index: 2;
}
.appointment-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 23rpx 35rpx;
  z-index:1;
  background:#fff;
  border-top: 1px solid #f8f8f8;
}
.sure-make-appointment {
  color: #fff;
  background-color: #10b935;
}

var app = getApp()

Page({
  data: {
    appointmentInfo: {},
    servicePrice: '',
    goodsId: '',
    longRangeIndex: 0,
    periodRangeIndex: 0,
    selectedDate: '',
    selectedDateIfBusiness: 0,
    selectedPeriod: '',
    serviceTimeUnit: ''
  },
  onLoad: function(options){
    var goodsId = options.detail,
        franchiseeId = options.franchisee || '';
    this.setData({
      goodsId: goodsId,
      franchiseeId: franchiseeId
    });
    this.getAppointmentList({
      app_id: app.getAppId(),
      goods_id: goodsId,
      sub_shop_app_id: franchiseeId
    }, true);
  },
  getAppointmentList: function(param, initial){
    var that = this;

    app.sendRequest({
      url: '/index.php?r=AppShop/getAppointmentList',
      data: param,
      success: function(res){
        var data = {},
            day7from_now;

        if(initial){
          day7from_now = res.day7from_now;
          for (var i = 0; i < day7from_now.length; i++) {
            var date = day7from_now[i].date+'';

            day7from_now[i].modifiedDate = date.substring(4, 6)+'月'+date.substring(6)+'日';
          }
          data['appointmentInfo.serviceDateList'] = day7from_now;
          data['appointmentInfo.serviceLongRange'] = res.can_select_long;
          data['appointmentInfo.servicePeriodRange'] = res.can_select_interval;
          data['selectedDate'] = day7from_now[0].date;
          data['selectedDateIfBusiness'] = day7from_now[0].ifBusiness;
          data['serviceTimeUnit'] = res.unit;
        }

        data['appointmentInfo.servicePeriodList'] = res.appointment_info;
        data['servicePrice'] = res.price;
        that.setData(data);
      }
    })
  },
  serviceLongChange: function(e){
    var value = e.detail.value;
    this.setData({
      longRangeIndex: value
    });
    this.serviceConditionChange();
  },
  servicePeriodSelectChange: function(e){
    var value = e.detail.value;
    this.setData({
      periodRangeIndex: value
    });
    this.serviceConditionChange();
  },
  serviceDateChange: function(e){
    var dataset = e.currentTarget.dataset,
        ifBusinessDay = dataset.ifbusinessday,
        date = dataset.date,
        data = {};

    data['selectedDate'] = date;
    if(!ifBusinessDay){
      data['appointmentInfo.servicePeriodList'] = '';
    }
    this.setData(data);

    if(ifBusinessDay){
      this.serviceConditionChange();
    }
  },
  servicePeriodListChange: function(e){
    var dataset = e.currentTarget.dataset,
        canBuy = dataset.canBuy,
        expired = dataset.expired;

    if(expired == 1 || canBuy == 0){
      return;
    }

    this.setData({
      selectedPeriod: e.currentTarget.dataset.interval
    });
  },
  serviceConditionChange: function(){
    var param = this.getParam();

    this.getAppointmentList(param, false);
    this.setData({
      selectedPeriod: ''
    });
  },
  getParam: function(){
    var appointmentInfo = this.data.appointmentInfo;
    var param = {
            timelong: appointmentInfo.serviceLongRange[this.data.longRangeIndex],
            day: this.data.selectedDate,
            app_id: app.getAppId(),
            goods_id: this.data.goodsId,
            sub_shop_app_id: this.data.franchiseeId
          };
    if(this.data.serviceTimeUnit == '小时'){
      param.interval = appointmentInfo.servicePeriodRange[this.data.periodRangeIndex];
    }
    return param;
  },
  sureMakeAppointment: function(e){
    var selectPeriod = this.data.selectedPeriod,
        param;

    if(!selectPeriod){
      app.showModal({
        content: '请选择具体时间'
      });
      return;
    }

    param = this.getParam();
    param.interval = selectPeriod;
    param.model_id = 0;
    param.num = 1;
    param.formId = e.detail.formId;

    app.sendRequest({
      url: '/index.php?r=AppShop/addOrder',
      data: param,
      success: function(res){
        app.turnToPage('/pages/orderDetail/orderDetail?detail='+res.data, true);
      }
    })
  }
})