<template>
  <!-- 验证码弹窗 -->
  <view
    v-show="showCodePop"
    class="valid-code-popup"
  >
    <view class="mask" />
    <view class="pop-content">
      <view class="title">
        请输入验证码
        <image
          class="close"
          src="../../static/images/icon_close.png"
          @tap="closePop"
        />
      </view>
      <view class="main">
        <view class="txt">
          {{ validCodeConfig.mainText }}
        </view>
        <view class="amount-number">
          <text class="icon">
            ￥
          </text> {{ amount }}
        </view>
        <view class="valid-code">
          <view class="input-wrapper">
            <input
              v-model="validCode"
              type="text"
              class="text"
              placeholder="请输入验证码"
            >
            <image
              v-if="validCode"
              class="icon"
              src="@/static/images/close-w.png"
              @click="validCode=''"
            />
          </view>
          <view
            v-if="validCodeConfig.showGetCodeBtn"
            class="get-captcha"
            @tap="getCode"
          >
            获取验证码
          </view>
          <view
            v-if="!validCodeConfig.showGetCodeBtn"
            class="get-captcha"
          >
            {{ validCodeConfig.count }} s
          </view>
        </view>
        <view
          v-if="validCodeConfig.isValidCodeTip && phone"
          class="tip"
        >
          验证码已发送至{{ phone }}
        </view>
        <view
          class="btn"
          @tap="confirm"
        >
          确定
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

const emit = defineEmits(['getCode', 'closePop', 'confirm'])
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  showCodePop: { // 显示验证码弹窗
    type: Boolean,
    default: false
  },
  amount: { // 操作的金额
    type: Number,
    default: 0
  },
  validCodeConfig: { // 验证码配置
    type: Object,
    default: () => {
      return {
        mainText: '提现金额', // 主标题文字
        showGetCodeBtn: true, // 获取验证码按钮显隐
        isValidCodeTip: false, // 是否显示验证码提示
        count: '' // 验证码倒计时
      }
    }
  },
  phone: { // 验证码发送手机号
    type: String,
    default: ''
  }
})

const getCode = () => {
  emit('getCode')
}
const closePop = () => {
  emit('closePop')
}

const validCode = ref('')
const confirm = () => {
  emit('confirm', validCode.value)
}

</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
