import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Button } from "@tarojs/components";
import { AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction, } from "taro-ui";
import { addAccount, editAccount } from '../../../utils/servers/servers';
import BankModal from '../../common/bankModal'

import './index.less';
import "taro-ui/dist/style/components/modal.scss";

class AccountModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      isshowDrawer: false,
    }
  }

  componentDidMount() {
    const { data = {} } = this.props
    this.setState({
      data
    })
  }

  // 新增||修改 账户
  onSubmit(type, status) {
    const { data } = this.state
    const { onClose, isSub = false, onOk } = this.props
    if (!data.name) {
      Taro.showToast({ title: '请填写账户姓名！', icon: 'none' });
      return
    }
    if (!data.bank) {
      Taro.showToast({ title: '请填写银行名称！', icon: 'none' });
      return
    }
    if (!data.openBank) {
      Taro.showToast({ title: '请填写开户银行！', icon: 'none' });
      return
    }
    if (!data.accounts) {
      Taro.showToast({ title: '请填写银行账户！', icon: 'none' });
      return
    }
    var num = /^\d*$/
    if (data.accounts.length < 16 || data.accounts.length > 19 || !num.test(data.accounts)) {
      Taro.showToast({ title: '请填写正确的银行账户！', icon: 'none' });
      return
    }
    Taro.showLoading({ title: '保存中...' });
    type == "edit"
      ? editAccount({
        id: data.id,
        bank: data.bank,
        openBank: data.openBank,
        accounts: data.accounts,
        name: data.name,
        status,
      }).then(v => {
        Taro.hideLoading()
        if (v.error.length === 0) {
          Taro.showToast({ title: '保存成功', icon: 'none' });
          onClose();
        } else {
          Taro.showToast({ title: v.error[0].message, icon: 'none' })
        }
      }).catch(() => {
        Taro.hideLoading()
        Taro.showToast({
          title: '系统错误,请稍后再试',
          icon: 'none'
        })
      })
      : addAccount({
        bank: data.bank,
        openBank: data.openBank,
        accounts: data.accounts,
        name: data.name,
        status,
      }).then(v => {
        Taro.hideLoading()
        if (v.error.length === 0) {
          isSub
            ? onOk(v.data)
            : (
              Taro.showToast({ title: '保存成功', icon: 'none' }),
              onClose()
            )
        } else {
          Taro.showToast({ title: v.error[0].message, icon: 'none' })
        }
      }).catch(() => {
        Taro.hideLoading()
        Taro.showToast({
          title: '系统错误,请稍后再试',
          icon: 'none'
        })
      })

  }

  openshowDrawer() {
    Taro.showLoading({
      title: '加载中...',
      mask: false,
    })
    this.setState({
      isshowDrawer: true,
    })
    setTimeout(function () {
      Taro.hideLoading()
    }, 500);

  }

  closeshowDrawer() {
    this.setState({
      isshowDrawer: false,
    })
  }

  getHot(i) {
    const { data = {}, } = this.state
    data.bank = i.name
    this.setState({
      isshowDrawer: false,
    })
  }

  render() {
    const { data = {}, } = this.state
    const { visible = "", onClose } = this.props;
    return (
      <View>
        <AtModal
          isOpened={visible != ""}
          closeOnClickOverlay={false}
        >
          <AtModalHeader>{visible == "add" ? "新增收款账户" : visible == "edit" && "编辑收款账户"}</AtModalHeader>
          <AtModalContent>
            <View className="modal">
              <View>
                <AtInput
                  required
                  name='name'
                  title='账户姓名:'
                  type='text'
                  placeholder='请输入账户姓名'
                  value={data.name}
                  onChange={e => { data.name = e }}
                />
              </View>
              <View onClick={() => {
                this.openshowDrawer()
              }}>
                <AtInput
                  required
                  editable={false}
                  name='address'
                  title='银行名称:'
                  type='text'
                  placeholder='请选择银行名称'
                  value={data.bank}
                  onChange={e => { data.bank = e }}
                />
              </View>
              <View>
                <AtInput
                  required
                  name='bank'
                  title='开户银行:'
                  type='text'
                  placeholder='请输入开户银行'
                  value={data.openBank}
                  onChange={e => { data.openBank = e }}
                />
              </View>
              <View>
                <AtInput
                  required
                  name='code'
                  title='银行账户:'
                  type='number'
                  placeholder='请输入银行账户'
                  value={data.accounts}
                  onChange={e => { data.accounts = e }}
                />
              </View>
            </View>
          </AtModalContent>
          <AtModalAction>
            <Button onClick={onClose}>取消</Button>
            <Button onClick={this.onSubmit.bind(this, visible, 1)}>保存并设置为默认账户</Button>
            <Button onClick={this.onSubmit.bind(this, visible, 0)}>保存账户</Button>
          </AtModalAction>
        </AtModal>
        <BankModal
          closeshowDrawer={this.closeshowDrawer.bind(this)}
          isshowDrawer={this.state.isshowDrawer}
          getHot={this.getHot.bind(this)}
        />
      </View>
    );
  }
}

export default AccountModal;
