<wxs src="../wxs/utils.wxs" module="utils" />

<view class="fbm-send-code custom-class">
  <fbm-cell-group>
    <fbm-field
      value="{{ phone }}"
      placeholder="{{ phonePlaceholder }}"
      clearable
      type="number"
      maxlength="{{ phoneMaxLength }}"
      bind:change="onPhoneChange"
    >
      <view slot="label">
        <view class="fbm-send-code__county-code-block" bindtap="onCountyCodeClick">
          <view>+{{ phoneCountyCode }}</view>
          <van-icon name="arrow-down" color="rgba(0, 0, 0, 0.3)" size="16px" />
        </view>
      </view>
    </fbm-field>
    <fbm-field
      value="{{ code }}"
      center
      clearable
      type="number"
      maxlength="{{ codeLength }}"
      label="{{ codeLabel }}"
      placeholder="{{ codePlaceholder }}"
      use-button-slot
      bind:change="onCodeChange"
    >
      <fbm-button wx:if="{{ !codeDisabled }}" slot="button" size="small" plain round color="{{ codeButtonColor }}" bind:click="onSendCode">{{ codeButtonText }}</fbm-button>
      <fbm-button wx:else slot="button" size="small" custom-style="border:none;color:rgba(0, 0, 0, 0.3)">{{ codeCountdownNum }}{{codeCountdownText}}</fbm-button>
    </fbm-field>
  </fbm-cell-group>
</view>
<fbm-toast id="fbm-toast" />
