import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import { AtInput } from "taro-ui";
import "./index.less";
import aliPayIcon from "../../../images/aliPayIcon.png";
export default class Index extends Component {
  state = {
    name: "", // 账户姓名
    account: "", // 支付宝账户
  };

  handleChangeName(value) {
    this.setState({ name: value });
  }
  handleChangeAccount(value) {
    this.setState({ account: value });
  }
  render() {
    return (
      <View className="index">
        {/* 支付宝信息 */}
        <View className="alipay-info">
          <AtInput
            name="value"
            title="账户姓名"
            type="text"
            placeholder="请输入账户姓名"
            value={this.state.name}
            onChange={this.handleChangeName.bind(this)}
          />
          <AtInput
          border={false}  
            name="value"
            title="支付宝账户"
            type="text"
            placeholder="请输入支付宝账户"
            value={this.state.account}
            onChange={this.handleChangeAccount.bind(this)}
          />
        </View>
        {/* 注意 */}
        <View className="attention">
          <View className="attention-top">
            <Image src={aliPayIcon} className="attention-icon" />
            注意：
          </View>
          <View className="attention-bottom">
            所维护的支付宝账户所有人需要与提现认证提交的自然人为同一人，避免影响提现
          </View>
        </View>
        {/* 提交 */}
        <View className="submit">提交</View>
      </View>
    );
  }
}
