import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, Radio, Space, InputNumber,DatePicker } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import moment from 'moment';
const CreateForm = (props) => {
  const { Option, OptGroup } = Select;
  const { RangePicker } = DatePicker;
  const planTimes = [];
  if (props.values) {
    planTimes.push(props.values.planStartTime);
    planTimes.push(props.values.planEndTime);
  }
  props.values.planDate = planTimes;

  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={1200}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        layout="Horizontal"
        labelCol={{ span: 2 }}
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="planName" label="方案名称" rules={[{ required: true, max: 20 }]}>
          <Input placeholder="方案名称" />
        </Form.Item>

        <Form.Item name="planDate" label="选择时间" rules={[{ required: true }]}>
          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>

        <Form.Item name="serviceFee" label="服务费比例" >
          <InputNumber step={0.01} min={0} max={1} defaultValue={0.06} precision={2} />
        </Form.Item>
        <Form.Item name="accountDay" label="账期时间" >
          <InputNumber step={1} min={1} max={7} defaultValue={1} precision={2} />
        </Form.Item> 
         <Form.Item name="franchiseeId" label={'选择加盟商'} rules={[{ required: true }]}>
          <Select disabled={props.values.id ? true : false}>  {props.Company.map((item, index) => {
              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.text}
                </Select.Option>
              );
            })} 
             </Select>
        </Form.Item> 

        <Form.Item label="分账账户">
          <Form.List name="businessList">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, fieldKey, ...restField }) => (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                    <Form.Item
                      {...restField}
                      label="分账账户类别"
                      name={[name, 'accountType']}
                      fieldKey={[fieldKey, 'accountType']}
                      rules={[{ required: true, message: '请选择分账账户类别' }]}
                    >
                      <Radio.Group>
                        <Radio value={0}>商户</Radio>
                        <Radio value={1}>个人</Radio>
                      </Radio.Group>
                    </Form.Item>

                    <Form.Item
                      {...restField}
                      label="分账账户名称"
                      name={[name, 'businessName']}
                      fieldKey={[fieldKey, 'businessName']}
                      rules={[{ required: true, message: '请输入分账账户名称' }]}
                    >
                      <Input placeholder="分账账户名称" />
                    </Form.Item>

                    <Form.Item
                      {...restField}
                      label="分账账户号"
                      name={[name, 'businessId']}
                      fieldKey={[fieldKey, 'businessId']}
                      rules={[{ required: true, message: '请输入分账账户号' }]}
                    >
                      <Input placeholder="分账账户号" style={{ width: 250 }} />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'orderType']}
                      fieldKey={[fieldKey, 'orderType']}
                      label="订单类型"
                      rules={[{ required: true }]}
                    >
                      <Select style={{ width: 120 }}>
                        <OptGroup>
                          <Select.Option value={0}>主订单</Select.Option>
                          <Select.Option value={1}>子订单</Select.Option>
                        </OptGroup>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'splitType']}
                      fieldKey={[fieldKey, 'splitType']}
                      label="分账类型"
                      rules={[{ required: true }]}
                    >
                      <Select style={{ width: 120 }}>
                        <OptGroup>
                          <Select.Option value={0}>比例分账</Select.Option>
                          <Select.Option value={1}>固定金额</Select.Option>
                        </OptGroup>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      noStyle
                      shouldUpdate={(prevValues, currentValues) =>
                        prevValues?.businessList[key]?.splitType != undefined ||
                        prevValues?.businessList[key]?.splitType !==
                        currentValues?.businessList[key]?.splitType
                      }
                    >
                      {({ getFieldValue }) =>
                        getFieldValue(`businessList`)[key]?.splitType != '1' ? (
                          <Form.Item
                            {...restField}
                            label="分账比例"
                            name={[name, 'proportion']}
                            fieldKey={[fieldKey, 'proportion']}
                            rules={[{ required: false, message: '请输入分账比例' }]}
                          >
                            <InputNumber
                              step={0.1}
                              min={0}
                              max={1}
                              precision={2}
                              style={{ width: 150 }}
                            />
                          </Form.Item>
                        ) : (
                          <Form.Item
                            {...restField}
                            label="固定金额"
                            name={[name, 'fixedMoney']}
                            fieldKey={[fieldKey, 'fixedMoney']}
                            rules={[{ required: false, message: '请输入固定金额' }]}
                          >
                            <Input placeholder="固定金额" style={{ width: 150 }} />
                          </Form.Item>
                        )
                      }
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      label="分账描述"
                      name={[name, 'remark']}
                      fieldKey={[fieldKey, 'remark']}
                      rules={[{ required: true, message: '请输入分账描述' }]}
                    >
                      <Input placeholder="分账描述" />
                    </Form.Item>

                    <MinusCircleOutlined onClick={() => remove(name)} />
                  </Space>
                ))}
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    添加
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form.Item>
        <Form.Item name="remark" label="备注" rules={[{ required: false, max: 64 }]}>
          <Input placeholder="备注" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
