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 {
  state = {
    userInfo: {}, //用户信息
  };
  // 退出登录
  handleLogout = () => {
    Taro.showModal({
      title: "",
      content: "退出后，请重新登录!",
      cancelText: "暂不退出",
      confirmText: "退出登录",
      cancelColor: "#000000",
      confirmColor: "#F6C71A",
      success: function (res) {
        if (res.confirm) {
          Taro.removeStorageSync("session_key");
          Taro.removeStorageSync("loginInfo");
          Taro.removeStorageSync("userInfo");
          console.log("用户点击退出登录");
        }
      },
    });
  };
  componentDidShow(){
    const userInfo = Taro.getStorageSync('userInfo')
    const session_key = Taro.getStorageSync('session_key')
    if(!userInfo&&session_key){
      this.getUserInfo()
    }else{
      this.setState({
        userInfo: userInfo||{},
      })
    }
  }
  // 获取用户信息
  getUserInfo = async () => {
    const res = await getUserInfo();
    Taro.setStorageSync("userInfo", res);
    this.setState({
      userInfo: res,
    });
  };
  // 去登录
  Login = () => {   
    if (!Taro.getStorageSync("session_key")) {
      Taro.reLaunch({
        url: "/pages/login/index",
      });
    }
  };
  render() {
    const { userInfo } = this.state;
    return (
      <View className="index">
        {/* 个人信息 */}
        <View className="info">
          <Image src={userInfo.icon?userInfo.icon:avatar} className="avatar" />
          <View className="info-right">
            <View className="user-info">
              <View onClick={this.Login} className="name">{userInfo.name?userInfo.name:'去登录'}</View>
              <View className="account">{userInfo.id?userInfo.id:'XXXX'}</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>
    );
  }
}