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

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 getNewsDetail = fetch(apis.propNews.getNewsDetail)
const addNews = fetch(apis.propNews.addNews)
const updateNews = fetch(apis.propNews.updateNews)

export default Form.create()(props => {
  const [loading, setLoading] = useState(false)
  const [newsData, setNewsData] = useState({})

  const { id } = props.location.query
  
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        setLoading(true)
        if (id) {
          updateNews({data: values, urlData: {id}}).then(res => {
            notification.success({ message: "修改内容成功" })
            setLoading(false)
          }).catch(err => {
            setLoading(false)
          })
        } else {
          addNews({data: values}).then(res => {
            notification.success({ message: "保存内容成功" })
            setLoading(false)
            router.go(-1)
          }).catch(err => {
            setLoading(false)
          })
        }
      }
    });
  }

  useEffect(() => {
    if (id) {
      getNewsDetail({urlData: {id}}).then(res => {
        setNewsData(res)
        props.form.setFieldsValue(res)
      })
    }
  }, [id])
  
  return (
    <div>
      <Form {...formItemLayout} onSubmit={handleSubmit}>
        <Form.Item label="标题">
          {
            props.form.getFieldDecorator('newsName', {
              rules: [
                { required: true, message: '请填写标题' },
              ],
            })(<Input placeholder="标题" />)
          }
        </Form.Item>
        <Form.Item label="封面">
          {
            props.form.getFieldDecorator('newsImg', {
              rules: [
                { required: true, message: '请上传封面' },
              ],
            })(<ImageUpload />)
          }
        </Form.Item>
        <Form.Item label="内容">
          {
            props.form.getFieldDecorator('newsDetail', {
              rules: [
                { required: true, message: '请填写内容' },
              ],
            })(<Wangedit />)
          }
        </Form.Item>
        <Form.Item label="权重">
          {
            props.form.getFieldDecorator('weight')(<InputNumber min={1} />)
          }
        </Form.Item>
        <Form.Item label="状态">
          {
            props.form.getFieldDecorator('status')(
              <Radio.Group>
                <Radio value={0}>未发布</Radio>
                <Radio value={1}>已发布</Radio>
              </Radio.Group>
            )
          }
        </Form.Item>
        <Form.Item {...tailFormItemLayout} >
          <Button loading={loading} type="primary" htmlType="submit">提交</Button>
          <Button style={{ marginLeft: '24px' }} onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </div>
  )
})
