import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtList, AtListItem } from "taro-ui"
import {getUserInfo} from '../../service'
import './index.less'
import loginOut from '../../images/mine/loginOut.png'
import edit from '../../images/mine/edit.png'
import norm from '../../images/mine/norm.png'
import avatar from '../../images/mine/avatar.png'
export default class Index extends Component {
  handleLogout = () => {
    Taro.showModal({
      title: '',
      content: '退出后，请重新登录!',
      cancelText: '暂不退出',
      confirmText: '退出登录',
      cancelColor: '#000000',
      confirmColor: '#F6C71A',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击退出登录')
        }
      }
    })
  }
  getUserInfo = async () => {
    const res = await getUserInfo();
    console.log(res);
  };
  componentDidMount(){
    this.getUserInfo()
  }
  render () {
    return (
      <View className='index'>
        {/* 个人信息 */}
        <View className="info">
          <Image src={avatar} className="avatar" />
          <View className="info-right">
            <View className='user-info'>
            <View className="name">张三</View>
            <View className="account">138001</View>
            </View>
            <Image onClick={() => Taro.navigateTo({ url: `/pages/mineSub/infoEdit/index` })} className='edit-icon' src={edit}></Image>
          </View>
        </View>
        {/* 功能 */}
        <View className='function'>
          <AtList hasBorder={false}>
            <AtListItem hasBorder={false} onClick={() => Taro.navigateTo({ url: `/pages/mineSub/userSpecification/index` })} title='用户规范' arrow='right' thumb={norm}/>
            <View className='line'></View>
            <AtListItem 
              hasBorder={false}
              title='退出登录' 
              arrow='right' 
              thumb={loginOut}
              onClick={this.handleLogout}
            />
          </AtList>
        </View>
      </View>
    )
  }
}