import React, { PureComponent, useState, useEffect } from 'react'
import { Modal, Row, Col, Table, Pagination, Button, Form, Input, message, Select } from 'antd'
import EnDash from '../EnDash'
import AuthButton from '@/components/AuthButton';

import Style from './style.less'
import HotBlock from '../HotBlock'
import apis from '../../../../../../services/apis';
import request from '../../../../../../utils/request';

const Refund = props => {
  const raiseRecordId = props.raiseRecordId;
  const raiseId = props.raiseId;
  const [data, setData] = useState([])

  

  useEffect(() => {
    getList();
  }, [props,raiseRecordId])

  function getList(params) {
    request({
      ...apis.house.taRaiseById,
      urlData: { id: raiseId }
    }).then((data) => {
      setData(data)
    })
  }

  function toDecimal2 (x){
    var f = parseFloat(x);
    if (isNaN(f)) {
      return false;
    }
    var f = Math.round(x * 100) / 100;
    var s = f.toString();
    var rs = s.indexOf('.');
    if (rs < 0) {
      rs = s.length;
      s += '.';
    }
    while (s.length <= rs + 2) {
      s += '0';
    }
    return s;
  }
  function regFenToYuan(fen){
    var num = fen;
    num = fen * 0.01;
    num += '';
    var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
    num = num.replace(reg, '$1');
    num = toDecimal2(num)
    return num
  }
  
  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        request({ ...apis.house.refund, data: {targetId:raiseRecordId, targetType:"house", refundReason:values.refundReason}, }).then((data) => {
          console.log('caozuochgegngong')
            message.info("操作成功，微信退费会有延迟，请在稍后查询认筹单状态")
            props.onSuccess(false);
        }).catch((err) => {
            // message.info(err.msg)
        })        
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Modal footer={null} title="退款" visible={props.visible} onCancel={props.onCancel} width={600}>
        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
          <div><span>当前系统设置认筹金额：{regFenToYuan(data.raisePrice)}元</span></div>
          <div><span>用户实付金额：{regFenToYuan(data.raisePrice)}元</span></div>
          <div><span>即将退费金额：{regFenToYuan(data.raisePrice)}元</span></div>
          <Form.Item label="退费方式" labelAlign='left'>
              {getFieldDecorator('refundType', {
                  rules: [{ required: true, message: ' 退款原因' }],initialValue:'onLine'
                })(
                <Select style={{width: '120px'}} disabled>
                  <Option value="onLine">线上退费</Option>
                </Select>,
              )}
          </Form.Item>
          <Form.Item label="退款原因" labelAlign='left'>
            {getFieldDecorator('refundReason', {
              rules: [{ required: true, message: ' 退款原因' }],
            })(<Input label='left'/>)}
          </Form.Item>
          <Form.Item wrapperCol={{ span: 15, offset: 10 }}>
            <Button type="primary" htmlType="submit" >
              提交
            </Button>
          </Form.Item>
        </Form>
        <div>
          <font style={{color:'#999'}}>支持退费的认筹单：</font><br/>
          <font style={{color:'#999'}}>1.认筹单缴费状态为已缴费且缴费结果为成功且退费状态为未退费的。</font><br/><br/>
          <font style={{color:'#999'}}>注意：发起线上退费后需要微信和银行处理，退费是否成功结果请到退费记录中查看</font><br/>
        </div>
      </Modal>
    </>
  );
}

const WrappedBase = Form.create({ name: 'Refund' })(Refund);

export default WrappedBase