import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import { AtInput } from "taro-ui";
import "./index.less";

export default class Index extends Component {
  state = {
    wxAccount: "",
    nickName: "",
    phone: "",
  };
  handleAccountChange (value) {
    this.setState({
      wxAccount: value,
    });
    return value;
  }
  handleNickNameChange (value) {
    this.setState({
      nickName: value,
    });
    return value;
  }
  handlePhoneChange (value) {
    this.setState({
      phone: value,
    });
    return value;
  }
  render() {
    return (
      <View className="index">
        {/* 头像 */}
        <View className="info-edit">
          <Image
            src="https://video-img.fyshark.com/1731495433480WechatIMG674.jpg"
            className="info-edit-img"
          />
          <Text className="info-edit-title">更换头像</Text>
        </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="text"
            placeholder="请输入手机号"
            value={this.state.phone}
            onChange={this.handlePhoneChange.bind(this)}
          />
        </View>
        {/* 提交按钮 */}
        <View className="info-edit-submit">
          <Text className="info-edit-submit-text">提交</Text>
        </View>
      </View>
    );
  }
}
