import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { LeftOutlined, EditOutlined, UploadOutlined } from '@ant-design/icons';
import { Form, Input, Button, TimePicker, Checkbox, Upload, message } from 'antd';
// 样式
import './celllist.less';
import { RA } from '@/utils/method';

import moment from 'moment';

// 接口申明
interface objc {}

const Adds = (props: any) => {
  const { Data, dispatch } = props;

  useEffect(() => {
    // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
    if (Data) {
      // 返回列表
      console.log('编辑');
      console.log(Data);
    } else {
      console.log('新建');
    }
  }, [1]);

  //物业费选择
  const plainOptions = [
    { label: '线上缴费', value: '0', disabled: true },
    { label: '线下缴费', value: '1' },
  ];

  const { RangePicker } = TimePicker;

  // 表单物业费提交值
  const [PropertyFee, setPropertyFee] = useState(['1']);
  // 楼巴上传列表
  const [loubaUpload, setLouba] = useState([] as any);
  // 物业办事指南列表
  const [guideUpload, setGuide] = useState([] as any);
  // 保质期服务列表
  const [periodUpload, setPeriod] = useState([] as any);

  // 上传设置
  const uploads = {
    name: 'file',
    accept: '.doc,.docx,.jpg,.png,.pdf',
    action: '/tos/image/upload',
    data: { imageType: 'tosContract' },
  };

  // 楼巴上传
  const upload1 = {
    onChange(info: any) {
      let po = new Array();
      po.push(info.fileList[info.fileList.length - 1]);
      // 给楼巴上传列表值
      setLouba(po);
      // 结果
      uploadMsg(info);
    },
  };
  // 指南上传
  const upload2 = {
    onChange(info: any) {
      let po = new Array();
      po.push(info.fileList[info.fileList.length - 1]);
      // 给楼巴上传列表值
      setGuide(po);
      // 结果
      uploadMsg(info);
    },
  };
  // 保质期上传
  const upload3 = {
    onChange(info: any) {
      let po = new Array();
      po.push(info.fileList[info.fileList.length - 1]);
      // 给楼巴上传列表值
      setPeriod(po);
      // 结果
      uploadMsg(info);
    },
  };

  // 上传提示
  function uploadMsg(info: any) {
    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: any) {
    // 修改选择值
    setPropertyFee(checkedValues);
  }

  // undefind 验证
  function undeFi(e: any) {
    if (typeof e == 'undefined') {
      return '';
    } else {
      return e;
    }
  }

  // 表单提交
  const onFinish = (values: any) => {
    let obj: any = new Object();
    obj.propertyFee = PropertyFee;
    // 小区信息;
    let { residentialEmail, residentialAddress, residentialName } = values.des;
    obj.residentialZipCode = residentialEmail;
    obj.residentialAddress = residentialAddress;
    obj.residentialName = residentialName;

    // 小区时间与管理员
    obj.residentialManagerUserName = undeFi(values.residentialManagerUserName);
    obj.residentialStartWorking = values.workingHours[0].format('HH:mm');
    obj.residentialEndWorking = values.workingHours[1].format('HH:mm');
    obj.residentialPhone = values.info.tel;
    obj.residentialEmail = values.info.email;

    // 上传内容

    obj.balouscheduleUrl = undeFi(loubaUpload.map((item: any) => item.name)[0]);
    obj.serviceGuideUrl = undeFi(guideUpload.map((item: any) => item.name)[0]);
    obj.lifeServiceUrl = undeFi(periodUpload.map((item: any) => item.name)[0]);

    // 小区热线
    // 表单结构存在数据不存在情况， 所以要多判断一次
    if (values.help) {
      obj.residentialHotlineName = undeFi(values.help.residentialHotlineName);
      obj.residentialHotline = undeFi(values.help.residentialHotline);
      obj.residentialHotlineServieStartTime = undeFi(values.help.time[0]).format('HH:mm');
      obj.residentialHotlineServieEndTime = undeFi(values.help.time[1]).format('HH:mm');
    } else {
      obj.residentialHotlineName = '';
      obj.residentialHotline = '';
      obj.residentialHotlineServieStartTime = '';
      obj.residentialHotlineServieEndTime = '';
    }
    console.log('Success:', obj);

    // 上传

    RA(29, obj, 'CellList', dispatch);
  };

  // 返回
  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}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
        labelAlign="left"
      >
        <Form.Item label="Community Name" name="des">
          <Input.Group compact>
            <Form.Item
              name={['des', 'residentialEmail']}
              noStyle
              // rules={[{ required: true, message: 'Province is required' }]}
            >
              <Input
                style={{ marginRight: '10px', width: 120 }}
                placeholder="6 Postcode"
                maxLength={6}
              />
            </Form.Item>

            <Form.Item
              name={['des', 'residentialAddress']}
              noStyle
              // rules={[{ required: true, message: 'Street is required' }]}
            >
              <Input style={{ width: '360px' }} placeholder="Please enter community adds" />
            </Form.Item>

            <div className="li">
              <Form.Item
                name={['des', 'residentialName']}
                noStyle
                // rules={[{ required: true, message: 'Street is required' }]}
              >
                <Input
                  style={{ marginRight: '10px', width: '260px' }}
                  placeholder="Please enter community name"
                />
              </Form.Item>
            </div>
          </Input.Group>
        </Form.Item>

        <Form.Item label="Working Hours" name="workingHours">
          <RangePicker format="HH:mm" />
        </Form.Item>

        <Form.Item label="Community Telephone" name="info">
          <Input.Group compact>
            <Form.Item
              name={['info', '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={['info', '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="residentialManagerUserName">
          <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="balouscheduleFile" style={{ marginBottom: '0' }}>
          <Upload {...uploads} {...upload1} fileList={loubaUpload}>
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>

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

        <Form.Item label="Property Guide" name="serviceGuideFile" style={{ marginBottom: '0' }}>
          <Upload {...uploads} {...upload2} fileList={guideUpload}>
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>

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

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

        <hr />
        {/* 上传部分 */}
        <Form.Item label="Help" name="help">
          <Input.Group compact>
            <Form.Item name={['help', 'residentialHotlineName']} noStyle>
              <Input style={{ marginRight: '10px', width: '160px' }} placeholder="热线电话名称" />
            </Form.Item>

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

            <Form.Item name={['help', 'time']} noStyle>
              <RangePicker format="HH:mm" />
            </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;
function map(state: any) {
  const Data = state.CellList.DataSave;
  const loading = state.loading.models.CellList;
  return { Data, loading };
}
export default connect(map)(Adds);
