import { Component } from "react";
import { View, Text, Image,Input, Button } from "@tarojs/components";
import { AtInput } from "taro-ui";
import Taro from "@tarojs/taro";
import { updateUserInfo,getUserInfo } from "../../../service";
import avatar from "../../../images/mine/avatar.png";
import "./index.less";

export default class Index extends Component {
  state = {
    wxAccount: "",
    nickName: "",
    phone: "",
    avatar: "",
  };
  componentDidMount() {
    this.getUserInfo();
  }
  // 获取用户信息
  async getUserInfo() {
    const res = await getUserInfo();
    this.setState({
      wxAccount: res.wechat_account,
      nickName: res.name,
      phone: res.phone,
      avatar: res.icon,
    });
  }
  // 微信账号
  handleAccountChange(value) {
    this.setState({
      wxAccount: value,
    });
    return value;
  }
  // 昵称
  handleNickNameChange(value) {
    this.setState({
      nickName: value,
    });
    return value;
  }
  // 手机号
  handlePhoneChange(value) {
    this.setState({
      phone: value,
    });
    return value;
  }
  // 选择头像
  handleChooseAvatar = (e) => {
    this.setState({
      avatar: e.detail.avatarUrl,
    });
  }
  // 提交
  handleSubmit = async () => {
    const phoneRegex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则
    if (!this.state.nickName || !this.state.phone) {
      Taro.showToast({
        title: "请输入完整信息",
        icon: "none",
      });
      return;
    } else if (!phoneRegex.test(this.state.phone)) {
      Taro.showToast({
        title: "请输入正确的手机号",
        icon: "none",
      });
      return;
    }
    const res = await updateUserInfo({
      icon: this.state.avatar,
      name: this.state.nickName,
      phone: this.state.phone,
      wechat_account: this.state.wxAccount,
    });
    Taro.showToast({
      title: '修改成功',
      icon: "none",
    });
  };
  render() {
    return (
      <View className="index">
        {/* 头像 */}
        <View className="info-edit">
          <Image
            src={this.state.avatar||avatar}
            className="info-edit-img"
          />
          {/* <Button onChooseAvatar={this.handleChooseAvatar} open-type="chooseAvatar" className="info-edit-title">更换头像</Button> */}
        </View>
        {/* 内容 */}
        <View className="info-edit-content">
          <AtInput
            name="value"
            title="微信账号"
            type="text"
            placeholder="请输入微信账号"
            value={this.state.wxAccount}
            onChange={this.handleAccountChange.bind(this)}
          />
          <AtInput
            name="value"
            title="鱼市昵称"
            type="text"
            placeholder="请输入鱼市昵称"
            value={this.state.nickName}
            onChange={this.handleNickNameChange.bind(this)}
          />
          <AtInput
            border={false}
            name="value"
            title="手机号"
            type="number"
            placeholder="请输入手机号"
            value={this.state.phone}
            onChange={this.handlePhoneChange.bind(this)}
          />
        </View>
        {/* 提交按钮 */}
        <View onClick={this.handleSubmit} className="info-edit-submit">
          <Text className="info-edit-submit-text">提交</Text>
        </View>
      </View>
    );
  }
}