import { useState } from 'react'
import Taro from '@tarojs/taro'
import { getUserQcode, setUserPhone } from '@/services/login'

import { View, Image, Input, Text, Form } from '@tarojs/components'
import CustomNav from '@/components/CustomNav'
import ButtontWX from '@/components/ButtontWX'
import checkedImg from '@/assets/lolginImages/checkedImg.png'
import unselectedImg from '@/assets/lolginImages/unselectedImg.png'
import { useModel } from '@/store'

import withLayout from '@/layouts'

import './style.less'


export default withLayout((props) => {

  const { person, setUserPhoneInfo } = useModel('userData')


  const [countCenter, setCountCenter] = useState({
    count: 60,
    toast: false,
    show_btn: false,
    code_ts: '获取验证码'
  })

  const [checkImage, setCheckImage] = useState(false)

  const [InputPhoneValue, setInputPhoneValue] = useState('18082043755')
  const [InputCodeValue, setInputCodeValue] = useState('375501')

  const onInputPhone = (r) => {
    setInputPhoneValue(r.detail.value)
    console.log("🚀 ~ file: index.jsx ~ line 26 ~ InputCodeValue", InputPhoneValue)

  }
  const onInputCode = (r) => {
    setInputCodeValue(r.detail.value)

  }
  //获取验证码
  const getCode = (r) => {
    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
      console.log('提示')
      Taro.showToast({
        title: '手机号码有误',
        icon: 'none',
        duration: 2000
      })

    } else {
      getUserQcode({ phone: InputPhoneValue }).then(() => {
        Taro.showToast({
          title: '验证码发送成功',
          icon: 'none',
          duration: 2000
        })
      })
      let count = countCenter.count
      const timer = setInterval(() => {
        setCountCenter({
          count: (count--),
          show_btn: true,
          code_ts: count + '秒后重发'
        })
        if (count == 0) {
          setCountCenter({
            show_btn: false,
            count: 60,
            code_ts: '获取验证码'
          })
          clearInterval(timer)

        }

      }, 1000)
    }
  }



  const getUserLogin = () => {
    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
      console.log('提示')
      Taro.showToast({
        title: '手机号或验证码有误',
        icon: 'none',
        duration: 2000
      })
    } else {
      if (!checkImage) {
        Taro.showToast({
          title: '下方协议未勾选',
          icon: 'none',
          duration: 2000
        })
      } else {
        setUserPhone(person.personId, { captcha: InputCodeValue, phone: InputPhoneValue }).then((e) => {
          console.log('e', e);
          Taro.reLaunch({ url: '/pages/index/index?tab=2&userOk' });
        })
        // console.log('person', person);
      }

    }

  }



  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='登陆' home />
      </View>
      <View className='loginBackImg-box' >
        <Image src={require("@/assets/lolginImages/backLogin.png")} />

        <View className='loginhallo-text'>
          <View>您好！</View>
          <View>欢迎进入农户端小程序！</View>
        </View>
        <View>
          <View className='loginPhone-box' >
            <View className='loginPhone-box-loginPhoneView'>+86</View>
            <Input maxlength={11} placeholder='请输入手机号码' type={Number} value={InputPhoneValue} onInput={onInputPhone} />

            <ButtontWX opacity={countCenter.show_btn ? '0.7' : '11'} disabled={countCenter.show_btn} onClick={getCode} butText={countCenter.code_ts} butWidth={94} butHeight={34} butFontSize={15} butBorderRadius={10} />
          </View>
          <View className='loginPhone-box'>
            <View className='loginPhone-box-loginPhoneView'>
              <Image style={{ width: '16px', height: '20px', margin: 'auto 2.8vw auto 2.8vw' }} src={require("@/assets/lolginImages/phoneCode.png")} />
            </View>
            <Input maxlength={10} placeholder='请输入验证码' value={InputCodeValue} onInput={onInputCode} />
          </View>
        </View>
      </View>
      <View className='BottomtButrelative'  >
        <ButtontWX onClick={getUserLogin} butText='登陆' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
      </View>
      <View className='bottom-agreement'>
        <Image src={!checkImage ? checkedImg : unselectedImg} onClick={() => { setCheckImage(!checkImage) }} />
        <View>
          请认真查看<Text style={{ color: '#CE3800' }}>文本协议/隐私政策</Text>，确认之后选择此项！
        </View>
      </View>

    </View>
  )
})