<!--pages/detail/appointment/index.wxml-->
<view class='page-wrapper'>

  <view class='project-title'>
    <text>预约项目</text>
  </view>

  <!-- 报名详情 -->
  <view class='project_info-box'>
    <view class='project_info'>
      <image class='project_info_image' src='{{detail.poster}}'></image>
      <view class='info-box'>
        <text>{{detail.title}}</text>
        <view>
          <text class='text-price'>￥{{detail.price}}</text>
          <text class='text-vip-price'>￥{{detail.vip_price}}</text>
          <image class='vip-img' src='/images/icon_vip_price.png'></image>
        </view>
      </view>
    </view>
  </view>

  <view class='project-title'>
    <text>预约信息</text>
  </view>

  <!-- 报名信息 -->
  <view class='project-input'>
    <i-cell-group>
      <i-cell title="姓名" i-class="cell-class">
        <input slot="footer" class='input' type='text' placeholder='请输入您的姓名' bindinput='handleNickname' value='{{nickname}}'></input>
      </i-cell>
      <i-cell title="手机号" i-class="cell-class">
        <block wx:if="{{phone.length == 0}}">
          <button slot="footer" bindgetphonenumber="handlePhoneAuth" type="info" open-type="getPhoneNumber" class="btn-auth-phone">授权手机号</button>
        </block>
        <block wx:else>
          <text slot="footer">{{phone}}</text>
        </block>
      </i-cell>
      <i-cell title="期望时间" is-link i-class="cell-class">
        <picker slot="footer" class='input' mode="date" value="{{date}}" bindchange="handleDateChange" class="picker">
          <view class='picker-text'>{{date}}</view>
        </picker>
      </i-cell>
      <i-cell title="备注" i-class="cell-class">
        <input slot="footer" class='input' type='text' placeholder='备注(可选)' bindinput='handleRemark'></input>
      </i-cell>
    </i-cell-group>
  </view>

  <i-row i-class="margin-top-20">
    <i-col span="20" offset='2' i-class="col-class">
      <i-button bind:click="handleSubmit" type="info" shape="circle">提交预约</i-button>
    </i-col>
  </i-row>
</view>

<i-toast id="toast" />