import { Image, Input, Text, View } from '@tarojs/components'
import styles from './index.module.scss'
import useLogin from '@/use/useLogin'
import classnames from "classnames";
import { formatImgUrl } from '@/common/fotmat'
import { useEffect, useMemo, useState } from 'react';
import { alert } from '@/common/common';
import CloseBtn from '@/components/closeBtn';
import SuccessBind from './component/successBind';
import Taro, { useDidShow } from "@tarojs/taro";
import { BindInvitationInfoApi, GetInvitationInfoApi } from '@/api/user';
import { debounce, getFilterData, throttle } from '@/common/util';
export default () => {
  useLogin()

  useDidShow(() => {
    onClipboardData()
  })

  const [submitData, setSubmitData] = useState({
    invitation_code: '',
  })
  
  //获取业务员信息
  type Param = {invitation_code: string, name: string, phone: string}
  const [salesMan, setSalesMan] = useState<Param|null>(null)
  const {fetchData: GetInvitationInfoFetchData} = GetInvitationInfoApi()
  const getInvitationInfo = async () => {
    let res = await GetInvitationInfoFetchData(getFilterData({...submitData}))
    res.success?setSalesMan(res.data):setSalesMan(null)
  }
  useEffect(() => {
    if(submitData.invitation_code.length === 4)
      getInvitationInfo()
  }, [submitData])

  const onInputCode = (e) => {
    const value = e.detail.value.replace(/[\W]/g, "")
    setSubmitData((val) => ({...val, invitation_code:value}))
  }

  const oncloseEven = () => {
    setSubmitData((val) => ({...val, invitation_code:''}))
    setSalesMan(null)
  }

  //绑定业务员
  const [bindShow, setBindShow] = useState(false)
  const {fetchData: bindInvitationInfoFetchData} = BindInvitationInfoApi()
  const onSubmit = async () => {
    if(!submitData.invitation_code) return alert.error('请输入邀请码')
    let res = await bindInvitationInfoFetchData({...submitData})
    if(res.success) setBindShow(() => true)
  }

  const onScanCode = () => {
    Taro.scanCode({
      success: (res) => {
        setSubmitData(() => ({invitation_code: res.result}))
      }
    })
  }
  
  //获取粘贴版内容
  const onClipboardData = () => {
    Taro.getClipboardData({
      success: function (res){
        let val = res.data.match(/InviteCode:([a-zA-Z0-9]{4})/)
        setSubmitData((e) => ({...e, invitation_code: val?val[1]:''}))
      }
    })
  }
 
  return (
    <View className={styles.bindSalesmanPage_main}>
      <View className={styles.header_image}>
        <Image src={formatImgUrl('/mall/invite_code_bg.png')} mode="aspectFill"/>
      </View>
      <View className={styles.inputCode}>
        <Input maxlength={4} value={submitData.invitation_code} placeholder='请输入邀请码' onInput={onInputCode} type="text" />
        <View className={styles.close_btn} >
          {submitData.invitation_code&&<CloseBtn styleObj={{backgroundColor: '#ccc', color: '#fff'}} onClose={oncloseEven}/>}
        </View>
        <View className={styles.scan_code} onClick={() => onScanCode()}>
          <Text className={classnames('iconfont icon-saomazhifu', styles.miconfont)}></Text>
        </View>
      </View>
      {salesMan&&<View className={styles.salesman_name}><Text>邀请人:</Text><Text>{`${salesMan.name} (${salesMan.phone})`}</Text></View>}
      <View className={styles.btns} onClick={onSubmit}>提交</View>
      <View className={styles.message}>
        <Text>温馨提示</Text>
        <Text>1. 新用户授权手机号码后，7天内可以输入邀请码，超过时间不能输入。</Text>
        <Text>2. 一个手机只能输入一次邀请码。输入邀请码。</Text>
      </View>
      <View className='common_safe_area_y'></View>
      <SuccessBind show={bindShow} onClose={() => setBindShow(false)} saleMan={salesMan?.name}/>
    </View>
  )
}