import Taro from "@tarojs/taro"
import { View, Input } from "@tarojs/components"
import withLayout from '@/layouts'
import CustomNav from "@/components/CustomNav"
import MyButton from "@/components/MyButton"
import './style.less'
import { useState } from "react"

export default withLayout((props) => {
  const [name, setName] = useState()
  const [bankCode, setBankCode] = useState()
  const [bankAddress, setBankAddress] = useState()
  const [phone, setPhone] = useState()
  const rulePhone = (val) => {
    if (!/^1[0-9]{10}$/.test(val)) {
      Taro.showToast({
        title: '请输入正确的11位手机号',
        icon: 'none',
        duration: 2000
      })
      return false
    } else return true
  }
  const ruleCard = (val) => {
    if (!/[0-9]{19}$/.test(val)) {
      Taro.showToast({
        title: '请输入正确的19位银行卡号',
        icon: 'none',
        duration: 2000
      })
      return false
    } else return true
  }
  const onClick = () => {
    if (name) {
      if (bankAddress) {
        if (ruleCard(bankCode) && rulePhone(phone)) {
          Taro.showToast({
            title: '添加成功',
            icon: 'none',
            duration: 2000
          })
          Taro.navigateBack({ delta: 1 })
        }
      } else {
        Taro.showToast({
          title: '请输入开户行',
          icon: 'none',
        })
      }
    } else {
      Taro.showToast({
        title: '请输入持卡人姓名',
        icon: 'none',
      })
    }
  }
  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='我的银行卡' />
      </View>
      <View className='index-container addBankCard'>
        <View className='title'>请绑定持卡人本人的银行卡</View>
        <View className='addCardCell'>
          <View className='cellLeft'>
            <View className='label'>持卡人姓名</View>：</View>
          <Input type='text' value={name} onBlur={(e) => { setName(e.detail.value) }} placeholder='请输入真实姓名' />
        </View>
        <View className='addCardCell'>
          <View className='cellLeft'>
            <View className='label'>卡号</View>：
          </View>
          <Input type='number' maxlength='19' value={bankCode} onBlur={(e) => { setBankCode(e.detail.value) }} placeholder='请输入有效卡号' />
        </View>
        <View className='addCardCell'>
          <View className='cellLeft'>
            <View className='label'>开户行</View>：
          </View>
          <Input type='text' value={bankAddress} onBlur={(e) => { setBankAddress(e.detail.value) }} />
        </View>
        <View className='addCardCell'>
          <View className='cellLeft'>
            <View className='label'>预留手机号</View>：
          </View>
          <Input type='number' maxlength='11' value={phone} onBlur={(e) => { setPhone(e.detail.value) }} placeholder='请输入银行卡预留手机号' />
        </View>
        <View className='bottomBtn'>
          <MyButton value='提现' onClick={onClick} />
        </View>
      </View>
    </View>
  )
})