import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, message, Form, Button, DatePicker, Spin } from 'antd';
const { TabPane } = Tabs;

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 SelectCommunity from '@/components/SelectCommunity';
// import Line from '@/components/Line/Line';
// import TimeComfirm from '@/components/TimeComfirm/TimeComfirm';

import './ann.less';
import { Notice } from '@/utils/tip';
import { getCookie } from '@/utils/method';
import moment from 'moment';

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

  // 默认附件值
  const defaultImg = [{
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  }]

  const [DefaultImage, setDefaultImage] = useState([] as any);

  // 监听传递过来的值
  useEffect(() => {
    if (DataSave != null) {
      console.log(moment(DataSave.noticStartTime))
      // 赋值
      form.setFieldsValue({
        noticTitle:DataSave.noticTitlel,
        noticText:DataSave.noticText,
        // noticStartTime:moment(DataSave.noticStartTime),
        // noticEndTime:DataSave.noticEndTime?moment(DataSave.noticEndTime, 'YYYY-MM-DD HH:mm:ss'):'',
      })

      // 图片
      setDefaultImage(defaultImg);
    }
  }, [DataSave]);

  
  // 监听是不是提交成功
  useEffect(() => {
    if (Result != null) {
      dispatch({
        type: `${module}/ResultRemove`,
      });
      message.success('Released Successfully');
      history.push('/CommunityManagement/CommunityAnnouncement');
    }
  }, [Result]);

  // 提交
  const onFinish = (values: any) => {
    console.log(values);
    var tmp = values;
    if(DataSave != null){
      tmp.id = DataSave.id;       // 如果是修改传递的 修改ID 
    }
    tmp.creatorId = getCookie('id');     // 管理员 ID  
    tmp.communityNum = values.community.value;
    tmp.noticScope = '' + values.community.index;
    delete tmp.community;
    // 文件名
    tmp.noticImageName = values.file ? values.file[0] : null;
    tmp.noticStartTime = values.noticStartTime.format('YYYY-MM-DD HH:mm:ss');
    tmp.noticEndTime = values.noticEndTime
      ? values.noticEndTime.format('YYYY-MM-DD HH:mm:ss')
      : null;
    console.log(tmp);
    RA(28, tmp, module, dispatch);
  };

  // 设置之前时间不能选择
  function disabledDate(current: any) {
    return current && current <= moment().subtract(1, 'days').endOf('day');
  }

  return (
    <>
      <Spin spinning={loading}>
        <div style={{ width: '100%', padding: 20, backgroundColor: '#ffffff' }}>
          <TitleBack title={DataSave == null ? 'Add Announcement' : "Edit Announcement"}></TitleBack>

          <Form
            ref={formRef}
            form={form}
            // {...layout}
            name="nest-messages"
            onFinish={onFinish}
            validateMessages={validateMessages}
          >
            <Form.Item name={'community'} className="diyItem" label="Community" rules={Notice[0]}>
              <SelectCommunity checklist = {DataSave == null ? null : DataSave.communityNum.split(",")} />
            </Form.Item>
            <Form.Item
              name='noticTitle'
              className="diyItem"
              label="Notice Title"
              rules={Notice[1]}
            >
              <Input style={{ width: 200 }} placeholder="Please input the notice title" />
            </Form.Item>
            <Form.Item
              name='noticText'
              className="diyItem"
              label="Notice Content"
              rules={Notice[2]}
            >
              <TextArea
                style={{ width: 400, height: 100 }}
                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={1}
                defaultValue = { DefaultImage }
              />
            </Form.Item>
            <Form.Item
              name="noticStartTime"
              className="diyItem"
              label="Effective Dates"
              rules={Notice[3]}
            >
              <DatePicker showTime placeholder="Effective Dates" disabledDate={disabledDate} />
            </Form.Item>
            <Form.Item name="noticEndTime" className="diyItem" label="Expiration Date" rules={[]}>
              <DatePicker showTime placeholder="Expiration Dates" disabledDate={disabledDate} />
            </Form.Item>
            <hr />
            <Form.Item style={{ marginBottom: 5 }} className="diyItem" label=" " colon={false}>
              <Button type="primary" htmlType="submit" loading={loading}>
                Submit
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Spin>
    </>
  );
};

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