import React from 'react';
import { Card, Button, Modal, Input, message, Spin } from 'antd';
import { $Axios, $AxiosGet } from '../../common/publish';
import '../Account-overview/Account-overview.scss'
import axios from "axios";
import sz1 from '../../images/sz1.jpg';
import sz2 from '../../images/sz2.jpg';
import sz4 from '../../images/sz4.jpg';
export default class AccountOverview extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            headTxt: '财务管理 > 账户概览',
            data: '',
            yestdayTrade: '',
            preMonthTrade: '',
            btnsType: 1,
            isModalVisible: false,
            Password: '',
            colors: '',
            contactPhone: '',
            num: 60,
            t: '',
            lodings: false
        }

    }

    componentDidMount() {
        this.initData()
    }

    initData() {
        let that_ = this;
        that_.setState({
            lodings: false
        })
        let url = '/payment/merchant.query.groovy'
        let params = {
            action: 'queryGeneral',//查询商户概览信息
            merchantNo : JSON.parse(localStorage.getItem('userData')).merchantNo,//入网的appname、社群name、商户号等(香香或者嘉旺提供)
            merchantType : JSON.parse(localStorage.getItem('userData')).merchantType, //入网来源，2：app或社群 3：商户或店铺(香香或者嘉旺提供)
        }
        $Axios('get', url, params, (res) => {
            let status = res.data.head.status;
            if (status == 200) {
                let data = res.data.body;
                let yestdayTrade = res.data.body.yestdayTrade; //昨日收支
                let preMonthTrade = res.data.body.preMonthTrade;//上月收支
                that_.setState({
                    data: data,
                    yestdayTrade: yestdayTrade,
                    preMonthTrade: preMonthTrade,
                    contactPhone: data.contactPhone,
                    lodings : true
                })
            }
        })
    }


    onBtnClick_1() {
        this.setState({
            btnsType: 1
        })
    }

    onBtnClick_2(e) {
        this.setState({
            btnsType: 2
        })
    }

    initData_tk() {
        let that_ = this;
        let url = '/payment/merchant.pwd.update.groovy'
        let params = {
            action: 'queryGeneral',//查询商户概览信息
            merchantNo : JSON.parse(localStorage.getItem('userData')).merchantNo,//入网的appname、社群name、商户号等(香香或者嘉旺提供)
            merchantType : JSON.parse(localStorage.getItem('userData')).merchantType, //入网来源，2：app或社群 3：商户或店铺(香香或者嘉旺提供)
        }
        $Axios('get', url, params, (res) => {
            let status = res.data.head.status;
            if (status == 200) {
                let data = res.data.body;
                let yestdayTrade = res.data.body.yestdayTrade; //昨日收支
                let preMonthTrade = res.data.body.preMonthTrade;//上月收支
                let parentAppName = res.data.body.parentAppName
                that_.setState({
                    data: data,
                    yestdayTrade: yestdayTrade,
                    preMonthTrade: preMonthTrade,
                    parentAppName : parentAppName
                })
            }
        })
    }

    onBtnClick_0() {
        this.setState({
            isModalVisible: true
        })
    }

    handleOk_c() {
        this.setState({
            isModalVisible: false
        })
    }

    handleOk() {
        this.submits();
    }

    submits() {
        if (document.getElementById("pwd").value !== '') {
            if (document.getElementById("cfPassword").value !== '') {
                if (document.getElementById("num1").value !== '') {
                    if (document.getElementById("pwd").value == document.getElementById("cfPassword").value) {
                        let that_ = this;
                        let url = '/payment/merchant.pwd.update.groovy'
                        let params = {
                            id: this.state.data.id,//商户id
                            pfAppName : this.state.parentAppName,// 新增参数
                            pwd: document.getElementById("pwd").value,//密码
                            mobile: this.state.data.contactPhone,//手机号
                            code: document.getElementById("num1").value,//验证码
                        }
                        $Axios('get', url, params, (res) => {
                            let status = res.data.head.status;
                            if (status == 200) {
                                message.info('提交成功！');
                                that_.setState({
                                    isModalVisible: false
                                });
                            } else {
                                message.info('提交失败！');
                            }
                        })
                    } else {
                        message.info('支付密码内容不一致！');
                    }
                } else {
                    message.info('请输入验证码！');
                }
            } else {
                message.info('请输入确认支付密码！');
            }
        } else {
            message.info('请输入支付密码！');
        }
    }

    handleOk_yzm() {
        let url = '/d3api2/user/sendMobileVerify.groovy'
        let that_ = this;
        let Params = {
            mobile: this.state.data.contactPhone,//手机号
            // mobile : 17600982892,//手机号
            pfAppName: JSON.parse(localStorage.getItem('userData')).pfAppName,//包名
            pfAppName : this.state.parentAppName,// 新增参数
            eventType: 51
        }
        $AxiosGet('get', url, Params, (res) => {
            let status = res.data.head.status;
            if (status == 200) {
                message.info('验证码发送成功,请注意查收！');
                let t = setInterval(function () {
                    let nums = that_.djsNum();
                    that_.setState({
                        num: nums
                    });
                    if (nums == 0) {
                        clearInterval(that_.state.t);
                        that_.setState({
                            t: '',
                            num: 60
                        });
                    }
                }, 1000);
                that_.setState({
                    t: t
                });

            }
        });
    }

    djsNum() {
        let that_ = this;
        let num = this.state.num
        num--
        return num
    }

    inputChange1(e) {

    }

    colorChange(e) {
        let s = this.colorTxt(e.target.value);
        this.setState({
            Password: e.target.value,
            colors: s
        });
    }

    colorTxt(value) {
        // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
        // 3： 表示第四个级别 4：表示第五个级别
        let modes = 0;
        if (value.length < 6) {//最初级别
            return modes;
        }
        if (/\d/.test(value)) {//如果用户输入的密码 包含了数字
            modes++;
        }
        if (/[a-z]/.test(value)) {//如果用户输入的密码 包含了小写的a到z
            modes++;
        }
        if (/[A-Z]/.test(value)) {//如果用户输入的密码 包含了大写的A到Z
            modes++;
        }
        if (/\W/.test(value)) {//如果是非数字 字母 下划线
            modes++;
        }
        switch (modes) {
            case 1:
                return 1;
                break;
            case 2:
                return 2;
                break;
            case 3:
                return 3;
                break;
            case 4:
                return 4;
                break;
        }
    }

    render() {
        const { headTxt, preMonthTrade, yestdayTrade, data, btnsType, isModalVisible, colors, num, t, lodings } = this.state;
        return (
            <div className='wrap_table'>
                <div className='header_center'>
                    {headTxt}
                </div>
                <div className='query_table'
                    style={{
                        padding: '30px'
                    }}
                >
                    <Card title="企业账户" extra={<a href="#" onClick={this.onBtnClick_0.bind(this)}>设置/修改支付密码</a>} style={{ width: 400, display: 'inline-block' }}>

                        {
                            lodings == false && <div style={{ width: '100%', height: '120px', float: 'left', textAlign: 'center', lineHeight: '120px' }}>
                                <Spin tip="加载中请稍后..."></Spin>
                            </div>
                        }
                        {
                            lodings == true && <div>
                                <div style={{ width: '30%', height: '120px', float: 'left', marginRight: '5%' }}>
                                    <img src={sz1} alt="" />
                                </div>
                                <div style={{ width: '65%', height: '120px', float: 'left' }}>
                                    <div style={{ lineHeight: '120px' }}>账户余额 : {data.withdrawBalance}</div>
                                </div>
                            </div>
                        }
                    </Card>
                    <Card title="入网信息" extra={<a href="#"></a>} style={{ width: 400, display: 'inline-block', marginLeft: '20px' }}>
                        {
                            lodings == false && <div style={{ width: '100%', height: '120px', float: 'left', textAlign: 'center', lineHeight: '120px' }}>
                                <Spin tip="加载中请稍后..."></Spin>
                            </div>
                        }
                        {
                            lodings == true && <div>
                                <div style={{ width: '30%', height: '120px', float: 'left', marginRight: '5%' }}>
                                    <img style={{ width: '100%', height: '100%' }} src={sz4} alt="" />
                                </div>
                                <div style={{ width: '65%', height: '120px', float: 'left' }}>
                                    <div style={{ lineHeight: '40px' }}>商户编号 : {data.merchantId == '' ? '--' : data.merchantId}</div>
                                    <div style={{ lineHeight: '40px' }}>商户名称 : {JSON.parse(localStorage.getItem('userData')).org_name}</div>
                                    <div style={{ lineHeight: '40px' }}>商户邮箱 : {data.contactEmail == '' ? '--' : data.contactEmail}</div>
                                </div>
                            </div>
                        }
                    </Card>
                    <Card title="收支汇总" extra={<a href="#"></a>} style={{ width: 400, display: 'inline-block', marginLeft: '20px' }}>
                        {
                            lodings == false && <div style={{ width: '100%', height: '120px', float: 'left', textAlign: 'center', lineHeight: '120px' }}>
                                <Spin tip="加载中请稍后..."></Spin>
                            </div>
                        }
                        {
                            lodings == true && <div>
                                <div style={{ width: '30%', height: '120', float: 'left', marginRight: '5%' }}>
                                    <img style={{ width: '100%', height: '100%' }} src={sz2} alt="" />
                                </div>
                                <div style={{ width: '65%', height: '120', float: 'left' }}>
                                    <div style={{ width: '100%', height: '40px', float: 'left' }}>
                                        <Button className='btns' type={btnsType == 1 ? 'primary' : 'default'} onClick={this.onBtnClick_1.bind(this)}>昨日收支</Button>
                                        <Button className='btns' type={btnsType == 2 ? 'primary' : 'default'} onClick={this.onBtnClick_2.bind(this)}>上月收支</Button>
                                    </div>
                                    <div>已收入总额 : {btnsType == 1 ? yestdayTrade.income : preMonthTrade.income}</div>
                                    <div>待收入总额 : {btnsType == 1 ? yestdayTrade.incomeing : preMonthTrade.incomeing}</div>
                                    <div>支出总额 : {btnsType == 1 ? yestdayTrade.expense : preMonthTrade.expense}</div>
                                    <div>手续费 : {btnsType == 1 ? yestdayTrade.fee : preMonthTrade.fee}</div>
                                </div>
                            </div>
                        }
                    </Card>
                </div>
                <Modal title="设置/修改密码"
                    wrapClassName={'webs'}
                    footer={[
                        <Button key="submit" type="primary" onClick={this.handleOk.bind(this)}>
                            确定
                        </Button>,
                    ]}
                    visible={isModalVisible}
                    closable={true}
                    mask={true}
                    onCancel={this.handleOk_c.bind(this)}
                // onOk={this.handleOk} 
                >
                    <div>
                        <div className='c-ls'>
                            <div className='titles_tk'>手机号 ：</div>
                            <div className='titles_num'><Input id='orderNo' disabled={true} defaultValue={data.contactPhone == '' ? '未获取到手机号' : data.contactPhone} /></div>
                            {t == '' && <Button key="submit" type="primary" onClick={this.handleOk_yzm.bind(this)}>
                                获取验证码
                            </Button>}
                            {t !== '' && <Button key="submitNum" type="primary" style={{ width: '102px' }} disabled={true}>{num}</Button>}
                        </div>
                        <div className='c-ls'>
                            <div className='titles_tk'>验证码 ：</div>
                            <div className='titles_yzm'><Input className='inputs' id='num1' autocomplete="off" maxLength={6} onChange={(e) => this.inputChange1(e)} /></div>
                        </div>
                        <div className='c-ls'>
                            <div className='titles_tk'>支付密码 ：</div>
                            <div className='titles_num'>
                                <Input.Password id='pwd' defaultValue='' onChange={(e) => this.colorChange(e)} placeholder="请输入支付密码" />
                            </div>
                            <div className='titles_num' style={{ marginLeft: '130px', color: '#ccc' }}>8-20位,必须由数字和字母混合组成</div>
                        </div>
                        <div className='c-ls'>
                            <div className='titles_tk'></div>
                            <div className='titles_pas' style={{ backgroundColor: colors == 1 ? '#76EE00' : '', }}>差</div>
                            <div className='titles_pas' style={{ backgroundColor: colors == 2 ? '#FFD700' : '', }}>弱</div>
                            <div className='titles_pas' style={{ backgroundColor: colors == 3 ? '#FF0000' : '', }}>中</div>
                            <div className='titles_pas' style={{ backgroundColor: colors == 4 ? '#CD0000' : '', }}>强</div>
                        </div>
                        <div className='c-ls'>
                            <div className='titles_tk'>确认支付密码 ：</div>
                            <div className='titles_num'><Input.Password id='cfPassword' autocomplete="off" placeholder="再次输入支付密码" /></div>
                        </div>


                    </div>
                </Modal>
            </div>
        )
    }
}