import React, { useState, useEffect, useRef } from 'react';
import { Input, Form, Button, DatePicker, Spin } from 'antd';
import { connect, history } from 'umi';

import { RA } from '@/utils/method';
import TitleBack from '@/components/TitleBack/TitleBack';
// import FileUpload from '@/components/FileUpload/FileUpload';
import { validateMessages } from '@/utils/params';
import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow';
import TextArea from 'antd/lib/input/TextArea';
import './ann.less';
import { Notice } from '@/utils/tip';
import moment from 'moment';

import ShowOptions from '@/components/ShowOptions/index';

const module = 'CommunityAnnouncement';

const Add = (props: any) => {
  const { dispatch, loading, DataSave, ImgSrc } = props;
  const formRef = useRef(null);
  const [form] = Form.useForm();

  const [ImageSrc, setImageSrc] = useState([] as any); // 图片显示地址

  // 监听传递过来的值
  useEffect(() => {
    if (DataSave == null) {
      history.push('/CommunityManagement/CommunityAnnouncement');
    } else {
      let day = moment(DataSave.noticStartTime.time);
      let day2 = DataSave.noticEndTime ? moment(DataSave.noticEndTime.time) : null;

      // 赋值
      form.setFieldsValue({
        noticTitle: DataSave.noticTitlel,
        noticText: DataSave.noticText,
        noticStartTime: day,
        noticEndTime: day2,
      });
      if (DataSave.noticImageName) {
        // 发起请求图片
        let msg = {
          type: 'tosCommunityNoticePreview',
          fileName: DataSave.noticImageName,
        };
        RA(47, msg, module, dispatch);
      }
    }
  }, [DataSave]);

  // 监听图片状态  ImgSrc
  useEffect(() => {
    if (ImgSrc != null) {
      let a = ImgSrc.map((item: any, index: number) => {
        let key = Object.keys(item)[0];
        return {
          uid: index,
          name: key,
          status: 'done',
          url: item[key],
        };
      });

      // 图片列表
      setImageSrc(a);
    }
  }, [ImgSrc]);

  return (
    <>
      <Spin spinning={loading}>
        <div style={{ width: '100%', padding: 20, backgroundColor: '#ffffff' }}>
          <TitleBack title={'Detail Announcement'}></TitleBack>

          <Form
            ref={formRef}
            form={form}
            // {...layout}
            validateMessages={validateMessages}
          >
            <Form.Item name={'community'} className="diyItem" label="Community" rules={Notice[0]}>
              <ShowOptions
                list={DataSave ? DataSave.communityNum.split(',') : []}
                defaultValue={'Put It Away'}
              ></ShowOptions>
            </Form.Item>
            <Form.Item name="noticTitle" className="diyItem" label="Notice Title" rules={Notice[1]}>
              <Input style={{ width: 200 }} placeholder="Please input the notice title" disabled />
            </Form.Item>
            <Form.Item
              name="noticText"
              className="diyItem"
              label="Notice Content"
              rules={Notice[2]}
            >
              <TextArea
                style={{ height: 100, maxWidth: 600 }}
                maxLength={1000}
                showCount={true}
                disabled
                placeholder="Please input the announcement content"
              />
            </Form.Item>

            <Form.Item name={'file'} className="diyItem" label=" " colon={false}>
              <PictureOptionsRow
                action="/tos/image/upload"
                data={{
                  imageType: 'tosNotice',
                }}
                limitNums={5}
                over={true}
                defaultValue={ImageSrc}
              />
            </Form.Item>
            <Form.Item
              name="noticStartTime"
              className="diyItem"
              label="Effective Dates"
              rules={Notice[3]}
            >
              <DatePicker style={{ width: 200 }} placeholder="Effective Dates" disabled />
            </Form.Item>
            <Form.Item name="noticEndTime" className="diyItem" label="Expiration Date" rules={[]}>
              <DatePicker style={{ width: 200 }} placeholder="Expiration Dates" disabled />
            </Form.Item>
            <hr />
            <Form.Item style={{ marginBottom: 5 }} className="diyItem" label=" " colon={false}>
              <Button type="primary" htmlType="submit" loading={loading} disabled>
                Submit
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Spin>
    </>
  );
};

function map(state: any) {
  const { Result, DataSave, ImgSrc } = state[module];
  const loading = state.loading.models.CommunityAnnouncement
    ? state.loading.models.CommunityAnnouncement
    : false;
  return { Result, loading, DataSave, ImgSrc };
}
export default connect(map)(Add);
