import React, { useEffect, useState } from 'react'
import router from 'umi/router'
import { fetch, apis } from '@/utils/request'
import { Button, Form, Input, InputNumber, Modal, Radio } from 'antd'
import Wangedit from '@/components/Wangedit/Wangedit'
import ImageUpload from '@/components/uploadImage/ImageUpload'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 6,
    },
  },
}

const announcementById = fetch(apis.announcement.announcementById)
const addAnnouncement = fetch(apis.announcement.addAnnouncement)
const updateannouncement = fetch(apis.announcement.updateannouncement)

export default Form.create()(props => {
  const [noticeData, setNoticeData] = useState()

  const { id } = props.location.query
  const { getFieldDecorator, setFieldsValue } = props.form

  const handleSubmit = e => {
    e.preventDefault()
    props.form.validateFields((err, values) => {
      if (!err) {
        if (!id) {
          addAnnouncement({ data: {contentImg:[], ...values } }).then(() => {
            Modal.success({
              content: '保存内容成功',
              onOk: () => {
                router.go(-1)
              }
            })
          })
        } else {
          updateannouncement({
            data: {
              ...noticeData,
              ...values,
            }
          }).then(res => {
            Modal.success({
              content: '修改内容成功',
              // onOk: () => {
              //   router.go(-1)
              // }
            })
          })
        }
      }
    })
  }

  useEffect(() => {
    if (id) {
      announcementById({ data: {id} }).then(res => {
        setNoticeData(res.tpAnnouncement)
      })
    }
  }, [id])

  useEffect(() => {
    setFieldsValue(noticeData)
  }, [noticeData])

  return (
    <div>
      <Form {...formItemLayout} onSubmit={handleSubmit}>
        <Form.Item label="公告标题">
        {
          getFieldDecorator('announcementTitle', {
            rules: [
              {
                required: true,
                message: '请填写公告标题',
              },
            ],
          })(
            <Input placeholder="20个汉字以内" />
          )
        }
        </Form.Item>
        <Form.Item label="公告轮播图" help="轮播图为横幅位展示图片，不会显示在公告详情页，建议尺寸1080*500，大小200KB以内">
        {
          getFieldDecorator('announcementCarouselImg', {
            rules: [
              {
                required: true,
                message: '请上传公告轮播图',
              },
            ],
          })(
            <ImageUpload />
          )
        }
        </Form.Item>
        <Form.Item label="公告内容">
        {
          getFieldDecorator('announcementContent', {
            rules: [
              {
                required: true,
                message: '请填写公告内容',
              },
            ],
          })(
            <Wangedit />
          )
        }
        </Form.Item>
        <Form.Item label="权重值" help="权重值越大，在活动列表中排序越靠前，权重相同时按发布时间排序">
        {
          getFieldDecorator('sort', {
            rules: [
              {
                required: true,
                message: '请填写权重值',
              },
            ],
          })(<InputNumber />)
        }
        </Form.Item>
        <Form.Item label="是否发布">
        {
          getFieldDecorator('status')(
            <Radio.Group>
              <Radio value="1">发布</Radio>
              <Radio value="0">不发布</Radio>
            </Radio.Group>
          )
        }
        </Form.Item>
        <Form.Item {...tailFormItemLayout} >
          <Button type="primary" htmlType="submit">确定</Button>
          <Button style={{ marginLeft: '24px' }} onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </div>
  )
})
