import React , { forwardRef, useEffect } from 'react';
import {Form , Modal , Input } from 'antd';
import "./sub.scss";
const { TextArea } = Input;
function UpdateDescModal({form , visible , onCancel , onOk,desc,website,lesson_url}){
  const { getFieldDecorator, validateFields , setFieldsValue } = form;

  useEffect(()=>{
    if(desc || website){
      setFieldsValue({
        website,desc,lesson_url
      })
    }
  },[desc,website])

  function onSure(){
    validateFields((err,values)=>{
      if(!err){
        onCancel();
        onOk(values.desc,values.website,values.lesson_url)
      }
    })
  }
  return(
    <Modal
      title={"修改信息"}
      closable={false}
      visible={visible}
      centered
      onCancel={onCancel}
      onOk={onSure}
      okText="确定"
      cancelText="取消"
      width="400px"
      className={"descmodal"}
    >
      <Form>
        <Form.Item label="项目简介">
          {getFieldDecorator("desc",{
            rules:[]
          })(
            <TextArea placeholder="请输入项目简介" rows={4} maxLength={200}/>
          )}
        </Form.Item>
        <Form.Item label="website">
          {getFieldDecorator("website",{
            rules:[]
          })(
            <Input placeholder="website链接"/>
          )}
        </Form.Item>
        <Form.Item label="实践课程">
          {getFieldDecorator("lesson_url",{
            rules:[]
          })(
            <Input placeholder="实践课程链接" />
          )}
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default Form.create()(forwardRef(UpdateDescModal));