import React, { useState, useEffect } from "react";
import { WhiteBack } from "../css/layout";
import Title from "./Title";
import { Modal, Button, Input , notification, message } from "antd";
import Nodata from "../Nodata";
import axios from 'axios';

const TextArea = Input.TextArea;
export default (({ content , operation ,plateId }) => {
  const [word, setWord] = useState(undefined);
  const [editWord, setEditWord] = useState(undefined);
  const [show, setShow] = useState(false);
  const [visible, setVisible] = useState(false);
  const [AnnModalType, setAnnModalType] = useState(1); //默认为1：查看，否则为编辑

  let child = document.getElementById("annWords") && document.getElementById("annWords").offsetHeight;
  useEffect(() => {
    if (content) {
      setWord(content.notice);
    }
  }, [content]);

  useEffect(() => {
    changeShow();
  }, [word, child , content]);

  // 保存公告
  function saveAnn() {
    setWord(editWord);
    setVisible(false);
    // 调用保存接口
    if(editWord){
      const url =  `/forum_sections/${plateId}/edit_notice.json`;
      axios.post(url,{
        content:editWord
      }).then(result=>{
        if(result && result.data){
          notification.open({message:"提示",description:result.data.message});
          changeShow();
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }

  function changeShow(){
    let p = document.getElementById("annContent")&& document.getElementById("annContent").offsetHeight;
    let c = document.getElementById("annWords") &&document.getElementById("annWords").offsetHeight;
    if (c > p) {
      setShow(true);
    }else{
      setShow(false);
    }
  }
  // 取消编辑公告
  function cancelAnn() {
    setEditWord(word);
    setVisible(false);
  }

  // 查看(1)或者编辑(2)
  function changeAnnModalType(type) {
    setAnnModalType(type);
    setVisible(true);
    setEditWord(word);
  }

  function changeText(e) {
    setEditWord(e.target.value);
  }
  return (
    <WhiteBack>
      <Modal
        visible={visible}
        title="公告"
        closable={true}
        onCancel={()=>setVisible(false)}
        footer={
          AnnModalType === 1 ? false : <div>
            <Button onClick={cancelAnn}>取消</Button>
            <Button onClick={saveAnn} type={"primary"}>
              发布
            </Button>
          </div>
        }
      >
        {AnnModalType === 1 ? (
          <p style={{ maxHeight: "100px", overflowY: "auto" }}>{word}</p>
        ) : (
          <TextArea
            placeholder="填写公告，1～600字"
            value={editWord}
            rows={5}
            onChange={changeText}
          />
        )}
      </Modal>
      <Title>
        <span>公告</span>
        {
          operation ?
          <a onClick={() => changeAnnModalType(2)}>
            <i className="iconfont icon-bianji3 grey-9"></i>
          </a>:""
        }
      </Title>
      <div style={{ padding: "10px 30px" }} className="pr">
        {word ? (
          <React.Fragment>
            <div id="annContent" className="annContent">
              <p id="annWords" className="annWords">
                {word}
              </p>
            </div>
            <span className="grey-8">版主：{content.name}</span>
          </React.Fragment>
        ) : (
          <Nodata _html={"暂无公告"} />
        )}
        {
          word && show === true ?
          <a className="annBtn" onClick={() => changeAnnModalType(1)}>
            …<span className="green ml4">查看</span>
          </a> : "" 
        }
      </div>
    </WhiteBack>
  );
});
