<dialog
  visible="{{visible}}"
  showMask="{{true}}"
  maskClosable="{{true}}"
  zIndex="{{12000}}"
  containerStyle="overflow: visible; background: transparent; border-radius: 24rpx;"
  bind:close="onClose"
>
  <view class="reservation-content {{isDarkTheme ? 'reservation-content-dark' : ''}}">
    <view class="title">预约直播</view>

    <!-- 手机号输入行 -->
    <view class="input-group">
      <view class="input-box phone-box">
        <input
          class="input"
          type="number"
          placeholder="请输入手机号"
          placeholder-class="input-placeholder"
          value="{{tel}}"
          bindinput="onTelInput"
          maxlength="11"
        />
      </view>
    </view>

    <!-- 验证码输入行 -->
    <view class="input-group">
      <view class="input-box code-box">
        <input
          class="input"
          type="number"
          placeholder="请输入验证码"
          placeholder-class="input-placeholder"
          value="{{verifyCode}}"
          bindinput="onCodeInput"
          maxlength="6"
        />
        <view class="divider"></view>
        <view
          class="code-btn {{countdown > 0 ? 'disabled' : ''}}"
          catchtap="onSendCode"
        >
          {{countdown > 0 ? '重新发送(' + countdown + ')' : '获取验证码'}}
        </view>
      </view>
    </view>

    <!-- 错误提示 -->
    <view wx:if="{{errMsg}}" class="reservation-error-msg">{{errMsg}}</view>

    <!-- 提交按钮 -->
    <button
      class="submit-btn"
      hover-class="submit-btn-hover"
      bindtap="onSubmit"
      disabled="{{submitting || !tel || !verifyCode}}"
      loading="{{submitting}}"
    >
      预约
    </button>
  </view>

  <!-- 关闭按钮 (放在容器外) -->
  <view class="close-btn" catchtap="onClose">
    <image src="../../assets/icon_close_btn.svg" class="close-icon" />
  </view>
</dialog>
