import { useState, useEffect } from "react"
import { useModel } from '@/store'
import Taro from "@tarojs/taro"
import { View, Image, ScrollView } from "@tarojs/components"
import userBgi from '@/assets/user/userBgi.png'
import avatar from '@/assets/user/defaultAvatar.png'
import MyCell from "@/components/MyCell"
import account from '@/assets/user/account.png'
import aboutUs from '@/assets/user/aboutUs.png'
import update from '@/assets/user/update.png'
import feedback from '@/assets/user/feedback.png'
import goto from '@/assets/user/goto.png'
import machinery from '@/assets/user/machinery.png'
import wallet from '@/assets/user/wallet.png'
import bankCard from '@/assets/user/bankCard.png'
import './style.less'

export default (props) => {
  const { phone, setPhone } = useModel('phone')

  const handleAccount = () => {
    Taro.navigateTo({ url: '/pages/userInfo/index' });
  }
  const handleAboutUs = () => {
    Taro.navigateTo({ url: '/pages/aboutUs/index' });
  }
  const handleUpdate = () => {
    Taro.navigateTo({ url: '/pages/versionUpdate/index' });
  }
  const handleFeedback = () => {
    Taro.navigateTo({ url: '/pages/feedback/index' });
  }
  const goMachinery = () => {
    Taro.navigateTo({ url: '/pages/machineryList/index' });
  }
  const goWallet = () => {
    Taro.navigateTo({ url: '/pages/wallet/index?balance=2022.56' });
  }
  const goBank = () => {
    Taro.navigateTo({ url: '/pages/bankCard/index' });
  }
  const signOut = () => {
    setPhone()
    Taro.reLaunch({ url: '/pages/index/index?tab=2' });
  }
  return (
    <ScrollView scrollY style={{ height: '100%' }}>
      <View className='personTip'>该账号归张三所属</View>
      <View className='userHead'>
        <Image src={userBgi} className='userBgi' />
        <View className='headcontent' >
          <Image src={avatar} className='avatar' />
          <View>
            <View>张三</View>
            <View>{phone}</View>
          </View>
        </View>
      </View>
      <View className='userCard'>
        <View
          className='cardItem'
          onClick={() => goMachinery()}
        >
          <Image className='cardImg' src={machinery}></Image>
          <View className='text'>我的农机</View>
        </View>
        <View
          className='cardItem'
          onClick={() => goWallet()}
        >
          <Image className='cardImg' src={wallet}></Image>
          <View className='text'>我的钱包</View>
        </View>
        <View
          className='cardItem'
          onClick={() => goBank()}
        >
          <Image className='cardImg' src={bankCard}></Image>
          <View className='text'>我的银行卡</View>
        </View>
      </View>
      <View className='userContent'>
        <View className='userBox'>
          <MyCell icon={account} action={goto} user handleAction={handleAccount} >账号与安全</MyCell>
        </View>
        <View className='userBox'>
          <MyCell icon={aboutUs} action={goto} user handleAction={handleAboutUs}>关于我们</MyCell>
        </View>
        <View className='userBox'>
          <MyCell icon={update} action={goto} user handleAction={handleUpdate}>版本更新</MyCell>
        </View>
        <View className='userBox'>
          <MyCell icon={feedback} action={goto} user handleAction={handleFeedback}>意见反馈</MyCell>
        </View>
        <View className='signOut' onClick={signOut}>退出登录</View>
      </View>
    </ScrollView>
  )
}