import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Image, Label, Input } from '@tarojs/components'
import './index.scss'
import { AtButton } from 'taro-ui';

type PageOwnProps = {
  className?: string
  currentAmount: any
  type: 'recharge' | 'withdraw'
  onClick?: any
}


type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {
  static options = {
    addGlobalClass: true
  }
  state = {
    account: ''
  }
  handleClick = () => {
    this.props.onClick(this.state.account)
  }
  handleChange = e => {
    this.setState({
      account: e.detail.value
    })
  }

  render() {
    const { currentAmount, type, className } = this.props
    const { account } = this.state
    return (
      <View className={'sd-account__pay ' + (className || '')}>
        {/* 头部 */}
        <View className='sd-account__pay-head '>
          <Image className='sd-account__pay-head-image ' src='http://ft-image.oss-cn-beijing.aliyuncs.com/065.png' />
          <View className='sd-account__pay-head-text ' >
            {type === 'recharge' ? '微信支付' : '提现至微信'}
          </View>
        </View>
        {/* 金额 */}
        <View className='sd-account__pay-money'>
          <View className='sd-account__pay-money-title'>
            {type === 'recharge' ? '充值金额' : '提现金额'}
          </View>
          <View className='sd-account__pay-money-input'>
            <Label className='sd-account__pay-money-input-icon'>￥</Label>
            <Input type='digit' className='sd-account__pay-money-input-value' value={account} onInput={this.handleChange} />
          </View>
        </View>
        {/* 余额 */}
        <View className='sd-account__pay-current'>
          当前余额：￥{currentAmount}
        </View>
        <AtButton customStyle='margin: 0' className='sd-account__pay-button' type='primary' onClick={this.handleClick} >
          {type === 'recharge' ? '充值' : '提现'}
        </AtButton>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>