import React, { useCallback, useState, useEffect, forwardRef } from "react";
import { Banner, WhiteBack, AlignCenter, Greenback } from "./css/layout";
import { Form, Input, Select, Radio, Button, notification, Spin } from "antd";
import MDEditor from "../modules/tpm/challengesnew/tpm-md-editor";
import Uplaod from "../forge/Upload/Index";
import UplaodCover from "../forge/Upload/Cover";
import Attachments from '../forge/Upload/attachment';
import "./css/All.scss";
import axios from "axios";

const Option = Select.Option;

// forum_id: values.forum_id, //大主题版块的id, int类型 （必填）
// attachment_id: ImgInfo.attachment_id, //上传的封面id
// children_forum_id: values.children_forum_id, //小主题版块的id，int类型
// attachments, //上传的附件id数组
// memo: {
//   //帖子的相关内容
//   subject: values.subject, // 帖子的标题  （必填）
//   content, //帖子的内容 （必填）
//   tag_id: values.tag_id, //帖子的标签，1为交流，2为求助（必填）
//   is_original: values.is_original, //是否原创，默认为true，（必填）
//   reprint_link: values.reprint_link, //转载链接，仅当is_original为false时，出现
// }
function New(props, ref) {
  const {
    form: { getFieldDecorator, validateFields, setFieldsValue },
  } = props;
  const [parentPlate, setParentPlate] = useState(undefined); //父版块
  const [childPlate, setChildPlate] = useState(undefined); //子版块
  const [content, setContent] = useState(""); //内容
  const [ImgInfo, setImgInfo] = useState(undefined); //封面图信息
  const [attachments, setAttachments] = useState(undefined); //上传附件的id数组
  const [spinning, setSpining] = useState(false);

  const [ fileList ,setFileList ] = useState(undefined);

  const [ originalType , setOriginalType ] = useState(2);

  let forumId = props.match.params.forumId;

  useEffect(() => {
    setFieldsValue({
      tag_id: 1,
      is_original: 2,
    });
    getPlate();
  }, []);

  function getDetail(plate){
    if(forumId){
      const url = `/memos/${forumId}/edit.json`;
      axios.get(url).then(result=>{
        if(result){
          setContent(result.data.content);

          let forum_id = result.data.forum_section && result.data.forum_section.forum_id;
          let child = plate && plate.filter((item) => item.id === forum_id);
          let memo_original = result.data.is_original ? 1 : 2
          setChildPlate(child && child.length>0 && child[0].children_tags);
          setOriginalType(memo_original)
          setFieldsValue({
            ...result.data,
            forum_id,
            tag_id: result.data.tag_id,
            children_forum_id: result.data.children_forum_section && result.data.children_forum_section.children_forum_id ? result.data.forum_section_id : undefined,
            is_original: memo_original
          });
          let attachments_url = result.data.attachments_url && result.data.attachments_url.map((item,key)=>{
            return({
              title:item.title,
              ...item
            })
          });
          let array = result.data.attachments_url && result.data.attachments_url.map((item,key)=>{
            return item.id
          })
          setAttachments(array);
          setFileList(attachments_url);
          setImgInfo(result.data.memo_image_info);
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }
  
  // 获取所有版块
  function getPlate() {
    setSpining(true);

    const url = `/forum_sections.json`;
    axios.get(url)
    .then((result) => {
      if (result && result.data) {
        setParentPlate(result.data.forum_sections);
        setFieldsValue({
          forum_id: 0,
        });
        if(forumId){
          getDetail(result.data.forum_sections);
        }
        setSpining(false);

      }
    })
    .catch((error) => {
      console.log(error);
    });
  }
  // 切换主题版块
  function changeParent(e) {
    let child = parentPlate.filter((item) => item.id === e);
    if (child && child.length === 1) {
      setChildPlate(child[0].children_tags);
      setFieldsValue({
        children_forum_id:
          child[0].children_tags && child[0].children_tags.length > 0
            ? child[0].children_tags[0].id
            : "",
      });
    } else {
      setChildPlate(undefined);
      setFieldsValue({
        children_forum_id: "",
      });
    }
  }

  const helper = useCallback(
    (label, name, rules, widget, isRequired) => (
      <React.Fragment>
        <span className={isRequired ? "lables must" : "lables"}>{label}</span>
        <Form.Item>
          {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
        </Form.Item>
      </React.Fragment>
    ),
    []
  );

  // 修改内容
  function onContentChange(e) {
    setContent(e);
  }

  // 上传的图片
  function UploadFunc(e) {
    attachments && attachments.length>0 && attachments.map((item,key)=>{
      return e.push(item && item.id)
    });
    setAttachments(e);
  }

  // 获取封面图片
  function getImageUrl(imgId) {
    setImgInfo(imgId);
  }

  // 返回
  function returnNew() {
    props.history.goBack();
  }
  // 提交
  function sureNew() {
    validateFields((error, values) => {
      if (!error) {
        setSpining(true);
        let params = {
          forum_id: values.forum_id,
          attachment_id: ImgInfo && ImgInfo.id,
          children_forum_id: values.children_forum_id, 
          attachments, 
          memo: {
            subject: values.subject,
            content, 
            tag_id: values.tag_id, 
            is_original: values.is_original, 
            reprint_link: values.reprint_link, 
          }
        }
        if(forumId){
          //  编辑保存
          const url = `/memos/${forumId}.json`;
          axios.put(url, params).then((result) => {
            if (result && result.data) {
              notification.open({
                message: "提示",
                description: result.data.message,
              });
              if(result.data.status === 1){
                props.history.push(`/forums/${forumId}/detail`);
              }
              setSpining(false);
            }
          })
          .catch((error) => {
            setSpining(true);
            console.log(error);
          });
        }else{
          // 新建提交
          const url = `/memos.json`;
          console.log("params", params)

          axios.post(url, params).then((result) => {
            if (result && result.data) {
              notification.open({
                message: "提示",
                description: result.data.message,
              });
              
              if(result.data.status === 1){
                props.history.push(`/forums/${result.data.memo_id}/detail`);
              }
              setSpining(false);             
            }
          })
          .catch((error) => {
            setSpining(false); 
            console.log(error);
          });
        }
      }
    });
  }

  function showNotification(description){
    notification.open({
      message:"提示",
      description
    })
  }

  function changeOriginal(e){
    setOriginalType(e.target.value);
  }
  // 编辑删除附件时获取删除后剩余的数组
  function deleteFunc(id){
    let team = attachments && attachments.length>0 && attachments.filter(item=>item!==id);
    setAttachments(team);
  }
  return (
    <div className="educontent pt20 pb30">
      <WhiteBack>
        <Banner>{ forumId ? "编辑" : "新建"}</Banner>
        <Spin spinning={spinning}>
          <Form className="formStyle">
            {helper(
              "标题",
              "subject",
              [{ required: true, message: "请输入标题" }],
              <Input placeholder="请输入标题" maxLength={50} />,
              true
            )}
            {helper(
              "内容",
              "content",
              [{ required: true, message: "请输入内容" }],
              <MDEditor
                placeholder={"请输入描述信息"}
                watch={true}
                height={250}
                mdID={"oj-description"}
                initValue={content}
                onChange={onContentChange}
              ></MDEditor>,
              true
            )}
            <div className="mb20">
              <Uplaod
                className="UploadStyle"
                isComplete={true}
                load={UploadFunc}
                content={
                  <div>
                    <span className="green">上传附件</span>
                    <span className="grey-9">（单个文件50M以内）</span>
                  </div>
                }
                size={100}
              ></Uplaod>
              {forumId && fileList && fileList.length > 0 ? (
                <Attachments
                  attachments={fileList}
                  showNotification={showNotification}
                  canDelete={true}
                  deleteFunc={deleteFunc}
                />
              ) : (
                ""
              )}
            </div>
            <p>
              <span className="lables must">主题板块</span>
            </p>
            <div className="inlineEnd">
              {helper(
                "",
                "forum_id",
                [{ required: true, message: "请选择主题板块" }],
                <Select onChange={changeParent}>
                  <Option value={0}>请选择主题板块</Option>
                  {parentPlate &&
                    parentPlate.length > 0 &&
                    parentPlate.map((item, key) => {
                      return <Option value={item.id}>{item.name}</Option>;
                    })}
                </Select>
              )}
              {helper(
                "",
                "children_forum_id",
                [],
                <Select>
                  {childPlate &&
                    childPlate.length > 0 &&
                    childPlate.map((item, key) => {
                      return <Option value={item.id}>{item.title}</Option>;
                    })}
                </Select>
              )}
            </div>
            <AlignCenter className="clearfix mt20 mb10">
              <span className="lables fl">上传封面：</span>
              <span className="grey-9">
                (只支持JPG、PNG、JPEG大小不超过2M建议尺寸4:3)
              </span>
            </AlignCenter>
            <UplaodCover
              imageUrl={ImgInfo && ImgInfo.url}
              getImageUrl={getImageUrl}
            />
            {helper(
              "帖子标签",
              "tag_id",
              [{ required: true, message: "请选择帖子标签" }],
              <Select style={{ width: "260px" }}>
                <Option value={1}>交流</Option>
                <Option value={2}>求助</Option>
              </Select>,
              true
            )}
            {helper(
              "是否原创",
              "is_original",
              [],
              <Radio.Group onChange={changeOriginal}>
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>,
              true
            )}
            { originalType !==1? helper(
              "转载自",
              "reprint_link",
              [],
              <Input style={{ width: "260px" }} placeholder="转载链接"/>
            ) :""}
          </Form>
        </Spin>
      </WhiteBack>
      <div className="mt20">
        <Button onClick={returnNew}>返回</Button>
        <Greenback onClick={sureNew} className="ml20">
          { forumId ? "保存" : "提交"}
        </Greenback>
      </div>
    </div>
  );
}
export default Form.create()(forwardRef(New));
