import React, { useEffect, useState } from 'react';
import { Badge, Menu } from 'antd';
import { Link } from 'react-router-dom';
import axios from 'axios';
import AppPullRefresh from './AppPullRefresh';
import { noticeSourceType } from '../common/static';
import './header.scss';
import '../SecuritySetting/notice/manager/Index.scss';
import '../SecuritySetting/Index.scss';
import '../SecuritySetting/notice/myNotice/Index.scss';


function NoticeContent({ visible, showNotification, resetUserInfo, current_user: { login } }) {
  const [initialize, setInitialize] = useState(true);
  const [noticeType, setNoticeType] = useState("notification");
  const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量

  const [noticeUnreadCount, setNoticeUnreadCount] = useState(0);//未读系统通知数量
  const [noticePage, setNoticePage] = useState(0);
  const [noticeUnreadList, setNoticeUnreadList] = useState([]);//未读系统通知列表

  const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量
  const [atPage, setAtPage] = useState(0);
  const [atUnreadList, setAtUnreadList] = useState([]);//未读@我列表

  useEffect(() => {
    resetUserInfo();
  }, [noticeUnreadCount,atUnreadCount]);

  useEffect(()=>{
    setNoticePage(0);
    setAtPage(0);
  },[visible])

  useEffect(() => {
    const params = {
      type: noticeType,
      limit: 10,
      page: noticeType === "notification" ? noticePage : noticeType === "atme" ? atPage : "",
      status: 1,
    }
    getMessageList(params);
  }, [noticePage, atPage]);

  useEffect(() => {
    const params = {
      type: noticeType,
      limit: 10,
      page: 0,
      status: 1,
    };
    if (initialize) {
      params.type = "atme"
    }
    visible && getMessageList(params);
  }, [visible]);


  function getMessageList(params) {
    axios.get(`/users/${login}/messages.json`, {
      params: params,
    }).then((response) => {
      if (response && response.data) {
        setNoticeUnreadCount(response.data.unread_notification);
        setAtUnreadCount(response.data.unread_atme);
        if (params.type === "notification") {
          let list = response.data.messages;
          if (params.page !== 0) {
            list = [...noticeUnreadList, ...list];
          }
          setNoticeUnreadList(list);
          if (initialize) {
            // 如果是第一次加载，根据数据量判断是否切换tab栏
            setInitialize(false);
            if (response.data.unread_notification === 0 && response.data.unread_atme !== 0) {
              setNoticeType("atme");
            }
          }
        } else if (params.type === "atme") {
          let list = response.data.messages;
          if (params.page !== 0) {
            list = [...atUnreadList, ...list];
          }
          setAtUnreadList(list);
        }
      }
    })
  }

  function readAll() {
    axios.post(`/users/${login}/messages/read.json`, {
      type: noticeType,
      ids: [-1]
    }).then((response) => {
      let data = response.data;
      if (!data) return;
      if (data.status === 0) {
        changeReadMarkAll(noticeType);
      } else {
        showNotification(data.message);
      }
    });
  }


  function changeReadMarkAll(noticeType) {
    if (noticeType === "notification") {
      let list = noticeUnreadList.slice();
      list.forEach(item => {
        item.status = 2;
      })
      setNoticeUnreadList(list);
      setNoticeUnreadCount(0);
    } else if (noticeType === "atme") {
      let list = atUnreadList.slice();
      list.forEach(item => {
        item.status = 2;
      })
      setAtUnreadList(list);
      setAtUnreadCount(0);
    }
  }

  // const [letter_unread_list, setLetter_unread_list] = useState([
  //   {
  //     id: 122,
  //     read: 0,                         //是否已读，0未读，1已读
  //     send_name: "蒋宇航",              //消息发送人
  //     send_login: "jiangYuHang",       //消息发送人的login，前端根据这个跳转到消息内页
  //     content: "私信内容",              //最近一条未读消息的内容
  //     create_time: "2019-03-04 18:08", //发送时间
  //   },
  // ]);

  function readItem(item) {
    axios.post(`/users/${login}/messages/read.json`, {
      type: noticeType,
      ids: [item.id]
    }).then((response) => {
      let data = response.data;
      if (!data) return;
      if (data.status === 0) {
        changeReadMark(item);
        item.notification_url && window.open(item.notification_url);
      } else {
        showNotification(data.message);
      }
    });
  }


  function changeReadMark(item) {
    if (item.type === "notification") {
      let list = noticeUnreadList.slice();
      let index = noticeUnreadList.indexOf(item);
      list[index].status = 2;
      setNoticeUnreadList(list);
      if (noticeUnreadCount > 0) {
        setNoticeUnreadCount(noticeUnreadCount - 1);
      }
    } else if (item.type === "atme") {
      let list = atUnreadList.slice();
      let index = atUnreadList.indexOf(item);
      list[index].status = 2;
      setAtUnreadList(list);
      if (atUnreadCount > 0) {
        setAtUnreadCount(atUnreadCount - 1);
      }
    }
  }

  return (
    <div className="messageHoverDiv notice01">
      <div className="sshHead hoverNotice-head">
        <Menu mode="horizontal" selectedKeys={noticeType} onClick={(e) => setNoticeType(e.key)}>
          <Menu.Item key="notification"><Badge count={noticeUnreadCount}>系统通知</Badge></Menu.Item>
          {/* <Menu.Item key="1" id="item-private"><Badge count={letterUnreadCount}>私信</Badge></Menu.Item> */}
          <Menu.Item key="atme"><Badge count={atUnreadCount}>@我</Badge></Menu.Item>
        </Menu>
      </div>

      {/* 系统通知 */}
      {noticeType === "notification" && <AppPullRefresh
        className='hoverNotice-body' // 外部添加className加以区分
        onPullRefresh={() => { setNoticePage(noticePage + 1); }} //触发加载ajax的function
        // type={2} // 传送加载组件的状态
        count={noticeUnreadList && noticeUnreadList.length} // 数据当前的总数量
        pageSize={10} // 
      >
        {
          noticeUnreadList && noticeUnreadList.length>0 && noticeUnreadList.map(item => {
            return (
              <div key={item.id + Math.random()} className="noticeCont-back" onClick={() => { readItem(item) }}>
                <div className={`noticeCont ${item.notification_url?'pointer':''}`}>
                  <span style={{ visibility: item.status === 1 ? 'visible' : 'hidden' }}>
                    <Badge color="#FA2020" />
                  </span>
                  <i className={"iconfont " + noticeSourceType[item.source]}></i>
                  <div className="noticeCont-text">
                    <span className="content-span notice-cont-span" dangerouslySetInnerHTML={{ __html: item.content }}></span>
                    <span className="timeSpan">{item.time_ago}</span>
                  </div>
                </div>
              </div>
            )
          })
        }
      </AppPullRefresh>
      }

      {/* @我 */}
      {noticeType === "atme" && <AppPullRefresh
        className='hoverNotice-body' // 外部添加className加以区分
        onPullRefresh={() => { setAtPage(atPage + 1); }} //触发加载ajax的function
        // type={1} // 传送加载组件的状态
        count={atUnreadList.length} // 数据当前的总数量
        pageSize={10} // 
      >
        {atUnreadList.map(item => {
          return (
            <div key={item.id + Math.random()} className="noticeCont-back" onClick={() => { readItem(item) }}>
              <div className="noticeCont">
                <span style={{ visibility: item.status === 1 ? 'visible' : 'hidden' }}>
                  <Badge color="#FA2020" />
                </span>
                <div className="noticeCont-text">
                  <span className="content-span atme-cont-span" dangerouslySetInnerHTML={{ __html: "<b>" + (item.sender ? item.sender.name : '') + "</b>&nbsp;&nbsp;&nbsp;" + item.content + "  中@我" }}></span>
                  <span className="timeSpan">{item.time_ago}</span>
                </div>
              </div>
            </div>
          )
        })
        }
      </AppPullRefresh>
      }

      {/* 私信 */}
      {/* {noticeType === "1" ? letter_unread_list.length > 0 ? letter_unread_list.map(item => {
          return (
            <div className="noticeCont-back">
              <div className="noticeCont" style={{ height: item.content.length >= 30 && item.content.length <= 34 ? '65px' : "" }}>
                <Badge color="#FA2020" />
                <div className="noticeCont-text">
                  <span>{item.send_name}：</span>
                  <span className="boldSpan" dangerouslySetInnerHTML={{ __html: item.content.length >= 50 ? item.content.substr(0, 50) + "..." : item.content }}></span>
                  <span className="timeSpan">{item.create_time ? timeAgo(item.create_time) : "刚刚"}</span>
                </div>
              </div>
            </div>
          )
        }) : "暂无数据" : ""} */}
      <div className="hoverNotice-buttom">
        <Link to={{pathname:"/settings/notice",query:{noticeType:noticeType}}}>全部消息</Link>
        {noticeUnreadCount > 0 && noticeType === "notification" && <a onClick={readAll}>所有系统消息一键已读</a>}
        {atUnreadCount > 0 && noticeType === "atme" && <a onClick={readAll}>所有@我一键已读</a>}
      </div>
    </div>

  )
}
export default NoticeContent;
