import React, { useEffect, useState , forwardRef } from 'react';
import { Button, Form , Input } from 'antd';
import Title from '../../Component/Title';
import MDEditor from "../../../modules/tpm/challengesnew/tpm-md-editor";
import UploadImage from '../Component/UploadImage';
import {getImageUrl } from 'educoder';
import axios from 'axios';

export default Form.create()(forwardRef((props)=>{
  const { form , organizeDetail } = props;
  const OIdentifier = props.match.params.OIdentifier;
  const { getFieldDecorator , validateFields , setFieldsValue , getFieldsValue} = form;
  const [ content , setContent ] = useState("");
  const [ imageUrl , setImageUrl ] = useState("");
  const [ imageId , setImageId ] = useState(undefined);

  // useEffect(()=>{
  //   let url = imageId ? getImageUrl(`/api/attachments/${imageId}`) :"";
  //   setImageUrl(url);
  // },[imageId])

  useEffect(()=>{
    if(organizeDetail){
      setContent(organizeDetail.memo);
      setFieldsValue({
        ...organizeDetail
      })
      setImageId(organizeDetail.news_banner_id);
    }
  },[organizeDetail])


  function onChangeDesc(v){
    setContent(v);
  }

  function save(){
    validateFields((error,values)=>{
      if(!error){
        const url = `/organizations/${OIdentifier}/update_other.json`;
        axios.post(url,{
          ...values,
          memo:content,
          // news_banner_id:imageId
        }).then(result=>{
          if(result){
            props.showNotification("组织首页更新成功！");
          }
        }).catch(error=>{})
      }
    })
  }
  return(
    <div>
      <Title>
        <span>组织首页管理</span>
      </Title>
      
      <Form style={{padding:"20px 30px 30px 30px"}}>
        {/* <p>新闻动态图片</p>
        <UploadImage url={imageUrl} getImageId={(id)=>{setImageId(id);}}/>
        <p><a className="color-blue" onClick={()=>setImageId("")}>删除</a></p> */}
        <Form.Item label="新闻动态原文链接">
          {getFieldDecorator("news_url",{
            rules:[]
          })(
            <Input placeholder="请输入新闻动态原文链接" maxLength={50}/>
          )}
        </Form.Item>
        <Form.Item label="新闻动态标题">
          {getFieldDecorator("news_title",{
            rules:[]
          })(
            <Input placeholder="请输入新闻动态标题" maxLength={45}/>
          )}
        </Form.Item>
        <Form.Item label="新闻动态内容">
          {getFieldDecorator("news_content",{
            rules:[]
          })(
            <Input placeholder="请输入新闻动态内容" maxLength={200}/>
          )}
        </Form.Item>
        <p class="mt30">组织介绍</p>
        <MDEditor
          placeholder={"请输入组织介绍"}
          height={300}
          mdID={"teamdescription"}
          initValue={content}
          onChange={onChangeDesc}
        ></MDEditor>
        <Button type="primary" onClick={save}>确定</Button>
      </Form>
    </div>
    )
  })
)