import React from 'react';
import { LeftOutlined, EditOutlined, PlusCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Form, Input, Button, TimePicker, Checkbox, Upload, message } from 'antd';
// 样式
import './celllist.less';

const { RangePicker } = TimePicker;

const Adds = () => {


  const plainOptions = [
    { label: '线上缴费', value: '0' },
    { label: '线下缴费', value: '1' },
  ];

  const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  function onChange(checkedValues) {
    console.log('checked = ', checkedValues);
  }

  const onFinish = (values: any) => {
    // console.log('Success:', values);
    message.error(`页面重构，后端接口处理中...`);
  };

  const goToReturn = () => {
    // console.log(fileList)
      history.back()
  }

  // 上传


  return (

    <div className="form">
      <h3>
        <EditOutlined />
          &nbsp; 添加小区

          <div className="back">
          <Button onClick={goToReturn}>
            <LeftOutlined />
              Back
            </Button>
        </div>
      </h3>
      <Form
        name="basic"
        onFinish={onFinish}
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
        labelAlign="left"
      >
        <Form.Item label="Community Name" name="communityName">
          <Input style={{ width: 120 }} placeholder="6 Postcode" maxLength={6} />{' '}
          <span className="span">
            小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址
            </span>{' '}
          <div>
            <li className="li">小区名字</li>
          </div>
        </Form.Item>

        <Form.Item label="Working Hours" name="workingHours">
          <RangePicker />
        </Form.Item>

        <Form.Item label="Community Telephone" name="communityTelephone">
          <Input.Group compact>
            <Form.Item
              name={['communityTelephone', 'tel']}
              noStyle
            // rules={[{ required: true, message: 'Province is required' }]}
            >
              <Input style={{ marginRight: '10px', width: '160px' }} placeholder="Please enter Phone" />

            </Form.Item>
            <Button type="text">—</Button>
            <Form.Item
              name={['communityTelephone', 'email']}
              noStyle
            // rules={[{ required: true, message: 'Street is required' }]}
            >
              <Input style={{ marginLeft: '10px', width: '180px' }} placeholder="Please enter Email" />
            </Form.Item>
          </Input.Group>
        </Form.Item>

        <Form.Item label="Administrators" name="adminiStrators">
          <Input style={{ width: '160px' }} placeholder='Contacts' /> <Button type="text"><PlusCircleOutlined style={{ fontSize: '18px', color: '#08c' }} /></Button>
        </Form.Item>

        <Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
          <Checkbox.Group options={plainOptions} defaultValue={['1']} onChange={onChange} />

          <div className='tip'>
            <span>*</span>线上缴费会有服务费
            </div>
        </Form.Item>

        <hr />

        <Form.Item label="Louba Timetable" name="loubaTimetable" style={{ marginBottom: '0' }}>
          <Upload {...props}>
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>

          <div className='tip'>
            支持文件：.pdf,.jpg, .png
            </div>
        </Form.Item>

        <Form.Item label="Property Guide" name="propertyGuide" style={{ marginBottom: '0' }}>
          <Upload {...props}>
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>

          <div className='tip'>
            支持文件：.pdf,.jpg, .png
            </div>
        </Form.Item>

        <Form.Item label="Period of Service" name="period" style={{ marginBottom: '0' }}>
          <Upload {...props}>
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>
          <div className='tip'>
            支持文件：.pdf,.jpg, .png
            </div>
        </Form.Item>

        <hr />

        <Form.Item label="Help Phone" name="helpPhone">
          <Input.Group compact>
            <Form.Item
              name={['helpPhone', 'tel']}
              noStyle
            >
              <Input style={{ marginRight: '10px', width: '160px' }} placeholder="热线电话名称" />

            </Form.Item>

            <Form.Item
              name={['helpPhone', 'email']}
              noStyle
            >
              <Input style={{ marginRight: '10px', width: '180px' }} placeholder="热线电话" />
            </Form.Item>

            <Form.Item
              name={['helpPhone', 'email2']}
              noStyle
            >
              <Input style={{ marginRight: '10px', width: '180px' }} placeholder="服务起始时间" />
            </Form.Item>

            <Form.Item
              name={['helpPhone', 'email3']}
              noStyle
            >
              <Input style={{ marginRight: '10px', width: '180px' }} placeholder="服务结束时间" />
            </Form.Item>

          </Input.Group>
        </Form.Item>

        <Form.Item label=" " colon={false}>
          <Button type="primary" htmlType="submit">
            Conserve
            </Button>
        </Form.Item>
      </Form>
    </div>

  );
};

export default Adds;
