import { useEffect, useState } from 'react'
import { UploadImage } from '@/components/Upload'
import { Input, Modal, Form, Button } from 'antd'


const FormItem = Form.Item
export default (props) => {
  const { value, visible, onChange, onCancel, sortVale } = props

  const [image, setImage] = useState()
  const [sort, setSort] = useState()

  const Submit = (e) => {
    setSort(e.target.value)
  }
  const handleOk = () => {
    onChange(image, sort)
  }



  useEffect(() => {
    setImage(value)
    setSort(sortVale)
  }, [value, visible, sortVale])


  return (
    <Modal title="请上传图片" visible={visible} onOk={handleOk} onCancel={onCancel} destroyOnClose={true}>
      <Form onFinish={Submit} >
        <FormItem label="内容" rules={[{ required: true, message: '请输入内容' }]} >
          <UploadImage value={image} onChange={setImage} />
        </FormItem>
        <FormItem label="权重" rules={[{ required: true, message: '请设置权重' }]}>
          <Input min={0} placeholder="请输入权重" type='number' value={sort} onChange={Submit} style={{ width: '350px' }} />
        </FormItem>
      </Form>
    </Modal>
  )
}