import { useState } from "react"
import { useModel } from '@/store'
import Taro from "@tarojs/taro"
import { Input, View, Image } from "@tarojs/components"
import CustomNav from '@/components/CustomNav'
import ButtontWX from '@/components/ButtontWX'
import { updateInfo } from "@/services/login"
// import banner1 from '@/assets/banner/1.jpg'
// import resetImg from '@/assets/user/cancel.png'
import './style.less'

export default (props) => {

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

  const [name, setName] = useState(person.nickName)
  const [phone, setPhone] = useState(person.phone)
  const [avatar, setAvatar] = useState(person.avatar)
  const changeName = (e) => {
    setName(e.detail.value)
  }
  const changePhone = (e) => {
    setPhone(e.detail.value)
  }
  const rulePhone = (val) => {
    if (!/^1[0-9]{10}$/.test(val)) {
      Taro.showToast({
        title: '请输入正确的11位手机号',
        icon: 'none',
        duration: 2000
      })
      return false
    } else return true
  }
  const handleSave = () => {
    if (rulePhone(phone)) {
      updateInfo(person.personId, { ...person, avatar: avatar, phone: phone, nickName: name }).then((res) => {
        setPerson(res)
        Taro.showToast({
          title: '保存成功',
          icon: 'none',
        })
        setTimeout(() => {
          Taro.navigateBack({
            delta: 1
          })
        }, 1500)
      }).catch((e) => {
        console.log(e)
        Taro.showToast({
          title: '网络异常, 请刷新小程序重试',
          icon: 'none',
        })
      })
    }
  }
  const resetName = () => {
    setName()
  }
  const resetPhone = () => {
    setPhone()
  }
  const changeAvatar = () => {
    Taro.getUserProfile({
      lang: 'zh_CN',
      desc: "获取你的昵称、头像、地区及性别",
      success: function (res) {
        setAvatar(res.userInfo.avatarUrl)
      },
      fail: () => {
        //拒绝授权
        console.error("拒绝了请求");
        return;
      }
    })
  }
  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='个人信息' />
      </View>
      <View className='index-container userCard'>
        <View className='avatar' onClick={changeAvatar}>
          <Image src={avatar} className='avatarImg' />
          <View className='change'>更换头像</View>
        </View>
        <View className='userCell'>
          <View>姓名：</View>
          <View style={{ display: 'flex', alignItems: 'center', height: '54px' }}>
            <Input type='text' placeholder='请输入您的姓名' value={name} onBlur={changeName} className='userName' />
            <View className='reset' onClick={resetName}>
              {/* <Image src={resetImg} className='close' /> */}
            </View>
          </View>
        </View>
        <View className='userCell'>
          <View>手机号：</View>
          <View style={{ display: 'flex', alignItems: 'center', height: '54px' }}>
            <Input type='text' placeholder='请输入您的手机号' value={phone} onBlur={changePhone} className='userName' />
            <View className='reset' onClick={resetPhone}>
              {/* <Image src={resetImg} className='close' /> */}
            </View>
          </View>
        </View>
        <View className='bottomBtn'>
          <ButtontWX onClick={handleSave} butText='保存' butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />

        </View>
      </View>
    </View>
  )
}