import React, { useEffect, useState } from 'react'
import { Button, Form, Input, message } from 'antd'
import ImageUpload from '@/components/XForm/ImageUpload'
import AuthButton from '@/components/AuthButton'
import { fetch, apis } from '@/utils/request'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 3 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 19 },
  },
}

const getData = fetch(apis.activity.poster)
const saveData = fetch(apis.activity.addPoster)
const updateData = fetch(apis.activity.updatePoster)

const PosterForm = (props) => {
  const { form, targetId, targetType, rights } = props
  const { getFieldDecorator, resetFields, setFieldsValue, validateFields } = form

  const [formData, setFormData] = useState()
  const [loading, setLoading] = useState(false)

  const handleImageChange = (img) => {
    props.onImageChange(img)
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    validateFields((err, values) => {
      if (err) {
        console.error(err)
        return
      }

      const request = formData?.posterId ? updateData : saveData
      const urlData = formData?.posterId ? { id: formData.posterId } : undefined
      const data = {
        targetId,
        targetType,
        ...(formData || {}),
        ...values,
      }

      setLoading(true)
      request({ urlData, data }).then((res) => {
        setLoading(false)
        setFormData(res)
        message.success('操作成功')
      }).catch((err) => {
        setLoading(false)
        console.error(err)
      })
    })
  }

  useEffect(() => {
    if (targetId && targetType) {
      setLoading(true)
      getData({ params: { targetId, targetType } }).then((res) => {
        setFormData(res ? res[0] : undefined)
        setLoading(false)
      }).catch((err) => {
        console.error(err)
        setLoading(false)
      })
    }
  }, [targetId, targetType])

  useEffect(() => {
    const { posterImg, posterTitle, posterDescription } = formData || {}

    resetFields()
    setFieldsValue({ posterImg, posterTitle, posterDescription })
    handleImageChange(posterImg)
  }, [formData])

  return (
    <Form {...formItemLayout} onSubmit={handleSubmit}>
      <Form.Item label="海报图" help="图片建议尺寸：1080*1925px，比例9:16,格式：jpg">
      {getFieldDecorator('posterImg', {
          rules: [{ required: true, message: '请楼盘海报图' }],
      })(<ImageUpload onChange={handleImageChange} />)}
      </Form.Item>
      {/* <Form.Item label="海报标题">
      {getFieldDecorator('posterTitle')(<Input />)}
      </Form.Item>
      <Form.Item label="海报描述">
      {getFieldDecorator('posterDescription')(<Input.TextArea row={4} />)}
      </Form.Item>*/}
      <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
        <AuthButton name={rights}>
          <Button loading={loading} style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
        </AuthButton>
        {/* <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>  */}
      </Form.Item>
    </Form>
  )
}

export default Form.create({})(PosterForm)
