<template>
  <div class="bx-demo-wrap">
    <span class="tip">每次页面刷新后只能测一个 case, 不同 case 的测试需要再次刷新页面</span>

    <div class="controller-debug">
      <label>测试语音验证码:</label>
      <bxs-switch
        v-model="debugVoice"
        />
    </div>

    <h2 class="bx-demo-title">
      基本用法 - 正常模式 - 非 debug 模式
    </h2>
    <bxs-verify-code-input
      v-model="cellphone"
      :error-message="errorMessage"
      :placeholder="placeholder"
      />

    <h2 class="bx-demo-title">
      基本用法 - debug - 无痕验证直接通过
    </h2>
    <bxs-verify-code-input
      v-model="cellphone1"
      :debug-nvc="{
        nvcCode: 200
      }"
      :debug-voice="debugVoice"
      />

    <h2 class="bx-demo-title">
      基本用法 - debug - 无痕验证直接拦截
    </h2>
    <bxs-verify-code-input
      v-model="cellphone2"
      :debug-nvc="{
        nvcCode: 800
      }"
      :debug-voice="debugVoice"
      />

    <h2 class="bx-demo-title">
      基本用法 - debug - 唤醒滑动验证，且滑动验证通过
    </h2>
    <bxs-verify-code-input
      v-model="cellphone3"
      :debug-nvc="{
        nvcCode: 400,
        key1: 'code0'
      }"
      :debug-voice="debugVoice"
      />

    <h2 class="bx-demo-title">
      基本用法 - debug - 唤醒滑动验证，且滑动验证未通过（拦截）
    </h2>
    <bxs-verify-code-input
      v-model="cellphone4"
      :debug-nvc="{
        nvcCode: 400,
        key1: 'code300'
      }"
      :debug-voice="debugVoice"
      />
  </div>
</template>
<script>
export default {
  data() {
    return {
      cellphone: '',
      cellphone1: '',
      cellphone2: '',
      cellphone3: '',
      cellphone4: '',
      debugVoice: true,
      errorMessage: '',
      placeholder: '请输入手机号',
    }
  },
}
</script>
<style>
.controller-debug {
  display: flex;
  align-items: center;
  margin: 20px 0 0 10px;
  font-size: 16px;
}
.controller-debug label {
  margin-right: 10px;
}
.bx-demo-wrap {
  overflow-x: hidden;
  padding-bottom: 200px;
}
.bx-demo-title {
  margin: 0;
  font-size: 14px;
  color: #333;
  padding: 30px 15px 15px;
}
.bx-demo-button {
  border: none;
  width: 80px;
  color: #508cee;
  font-size: 15px;
  margin-left: 10px;
  outline: none;
  background: none;
}
.bx-hairline--bottom:after {
  margin-left: 15px;
}
.bx-demo-states-line {
  font-size: 15px;
  padding-left: 15px;
  margin-bottom: 10px;
}
.bx-demo-states-line > div {
  height: 25px;
  line-height: 25px;
}
.bx-demo-states-line > div > label {
  width: 85px;
  display: inline-block;
}
.tip {
  font-size: 14px;
  text-align: center;
  display: block;
  padding: 0 30px;
  line-height: 20px;
  margin: 30px 0 0 0;
}
</style>
