import React from 'react'
import { Image, Text, View, Input, Label } from '@tarojs/components'
import './index.scss'

import { useEffect } from 'react';
import { useState } from 'react';
import backNav from '@/images/backNav.png'
import next from '@/images/next.png'
import uncheck from '@/images/uncheck.png'
import checked from '@/images/checked.png'
import Taro from '@tarojs/taro';
import { useRouter } from '@tarojs/taro';
import { Button, Textarea, Address } from '@nutui/nutui-react-taro';
import { Avatar } from '@nutui/nutui-react-taro';
import { Overlay } from '@nutui/nutui-react-taro';
import { modifyUser, userDetail } from '../../utils/api';
import { closeLoading, errorNotice, loading, navigateTo, successNotice } from '../../utils/utils';
import { upload } from '../../utils/request';



function Index() {

  const param = useRouter().params
  const [id] = useState(param.id)
  const [visible, setVisible] = useState(false)
  const [user, setUser] = useState({})

  useEffect(() => {
    userDetail().then(rs => {
      if (!rs) return
      setUser(rs)
    })
  }, [])


  // 跳转
  const navDetailFn = (id) => {
    Taro.navigateTo({
      url: `/pages/pay-success/index?id=${id}`
    })
  }
  // 返回页面
  const backFn = () => {
    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
  }

  // editAvatar
  const editAvatarFn = () => {
    setVisible(true)

  }

  const loadAvatar = (type = 'album') => {

    Taro.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      count: 1,
      sourceType: [type], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
      success: async function (res) {
        setVisible(false)
        loading('头像上传中, 请稍后')
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        try {
          const re = await upload(tempFilePaths[0])
          const r = await modifyUser('avatar', re.url)
          closeLoading()
          if (!r) return
          successNotice('头像上传成功')
          setUser({ ...user, avatar: re.url })
        } catch {
          errorNotice('头像上传失败')
        }
      }
    })
  }


  return (
    <View className='userInfo-container'>
      <View className='userInfo-detail-title'>
        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
        编辑资料
      </View>

      <View className='userInfo-body' >
        <View className=' userInfo-item'>
          <View className='item-bg' >
            <View className='my-order-title flex-between'>
              <Avatar size={46} icon={user.avatar} alt={user.nick_name}
              />
              <View className='my-order-more flex-center' onClick={editAvatarFn}>
                <Text>修改头像</Text>
                <Image className='next-icon' src={next} />
              </View>
            </View>
          </View>
        </View>

        <View className='userInfo-item mt-22'>
          <View className='userInfo-form' onClick={() => { navigateTo('/pages/change-user/index') }}>
            <View className='userInfo-form-name'>个人信息</View>
            <View className='flex justify-between items-center ' >
              <Label />
              <Image src={next} className='next-icon' />
            </View>
          </View>
          <View className='userInfo-form' onClick={() => { navigateTo('/pages/change-pwd/index') }}>
            <View className='userInfo-form-name'>修改密码</View>
            <View className='flex justify-between items-center ' >

              <Image src={next} className='next-icon' />
            </View>
          </View>
          <View className='userInfo-form' onClick={() => { navigateTo('/pages/change-phone/index') }}>
            <View className='userInfo-form-name'>修改手机号</View>
            <View className='flex justify-between items-center ' >
              <Label>{user.phone}</Label>
              <Image src={next} className='next-icon ml-2' />
            </View>
          </View>
          <View className='userInfo-form' onClick={() => { navigateTo('/pages/my-card/index') }}>
            <View className='userInfo-form-name'>我的银行卡</View>
            <View className='flex justify-between items-center ' >
              <Image src={next} className='next-icon' />
            </View>
          </View>
          <View className='userInfo-form' onClick={() => { !user.is_city_partner && navigateTo('/pages/city-partant/index') }}>
            <View className='userInfo-form-name'>申请城市合伙人</View>
            <View className='flex justify-between items-center ' >
              <Image src={next} className='next-icon' />
            </View>
          </View>
        </View>

      </View>
      <Overlay visible={visible} >
        <View className='modify-box'>
          <View className='modify-item '>
            <View className='modify-item-btn flex-center' onClick={() => {
              loadAvatar('camera')
            }}>立即拍照</View>
            <View className='modify-item-btn flex-center bt-none' onClick={() => {
              loadAvatar('album')
            }}>从相册选取</View>
          </View>
          <View className='modify-item mt-4'>
            <View className='modify-item-btn bt-none flex-center' onClick={() => { setVisible(false) }}>取消</View>
          </View>
        </View>
      </Overlay>
    </View>
  )
}

export default Index
