import React, { PureComponent, useState, useEffect } from 'react'
import { Modal, Row, Col, Table, Pagination, Button, Form, Input, Select,message } 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 BatchRefund = props => {
  const taRaiseRecords = props.houseIds;

  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        request({ ...apis.house.batchRefundOfflineRaiseRecord, data: { ...values,taRaiseRecords },}).then((data) => {
          message.info("保存成功")
          props.onSuccess(false);
        }).catch((err) => {
          message.info(err.msg || err.message)
        })
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Modal footer={null} title="批量线下退费" visible={props.visible} onCancel={props.onCancel} width={600}>
        <span>所选XX条数据中，符合批量设置线下缴费条件的有YY条，不符合条件的有ZZ条。确认将YY条数据设置为：</span>
        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
          <Form.Item label="退费状态" labelAlign='left'>
            {getFieldDecorator('payStatus', {initialValue:'refunded'})(
                <Select style={{width: '120px'}} disabled>
                <Option value="refunded">已退费</Option>
              </Select>,
              )}
          </Form.Item>
          <Form.Item label="退费方式" labelAlign='left'>
            {getFieldDecorator('payType', {initialValue:'offLine'})(
                <Select style={{width: '120px'}} disabled>
                <Option value="offLine">线下退费</Option>
              </Select>,
              )}
          </Form.Item>
          <Form.Item label="退费结果" labelAlign='left'>
            {getFieldDecorator('payStatus', {initialValue:'refunded'})(
                <Select style={{width: '120px'}} disabled>
                <Option value="refunded">成功</Option>
              </Select>,
              )}
          </Form.Item>
          <Form.Item label="退费原因" labelAlign='left'>
            {getFieldDecorator('refundReason',{
              rules: [{ required: true, message: ' 请输入作废原因' }],
              })(
                <Input ></Input>
              )}
          </Form.Item>
          <Form.Item wrapperCol={{ span: 15, offset: 9 }}>
            <Button type="primary" htmlType="submit" >
              确定
            </Button>
          </Form.Item>
        </Form>
        <div>
          <font style={{color:'#999'}}>可批量设置线下退费的认筹单条件必须满足以下全部：</font><br/>
          <font style={{color:'#999'}}>1.认筹单缴费状态为已缴费。</font><br/>
          <font style={{color:'#999'}}>2.退费状态为未退费。</font><br/>
        </div>
        
      </Modal>
    </>
  );
}

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

export default WrappedBase