import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { Pagination, Icon, Input, Affix, } from 'antd';
import ItemList from '../components/itemList';
import Nodata from '../../../forge/Nodata';
import Loading from "../../../Loading";
import noticePng from '../image/banner.png';
import { getNoticeList } from '../api';

import './index.scss';
const Search = Input.Search;

export default (props) => {

  const [tab, setTab] = useState('0');
  const [loading, setLoading] = useState(false);

  const [title, setTitle] = useState(undefined);
  const [orderBy, setOrderBy] = useState('publishDateDesc');

  const [curPage, setCurPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [noticeList, setNoticeList] = useState([]);

  const [callList, setCallList] = useState([]);
  const [changeList, setChangeList] = useState([]);
  const [checkList, setCheckList] = useState([]);
  const [abandonList, setAbandonList] = useState([]);
  const [technologyList, setTechnologyList] = useState([]);
  const [dealList, setDealList] = useState([]);

  useEffect(() => {
    setLoading(true);
    if (tab === '0' || tab === '7') {
      const params = {
        orderBy,
        curPage: 1,
        isChecked: 1,
        pageSize: 5,
        status: 1,
        type: 1,
        title,
        flag: 1,   //后台管理查询：2；前台展示：1
      };
      getNoticeList(params).then(data => {
        setChangeList(data.rows);
      });
      getNoticeList({ ...params, type: 4 }).then(data => {
        setCallList(data.rows);
        setLoading(false);
      });
      getNoticeList({ ...params, type: 2 }).then(data => {
        setCheckList(data.rows);
      });
      getNoticeList({ ...params, type: 3 }).then(data => {
        setAbandonList(data.rows);
        setLoading(false);
      });
      getNoticeList({ ...params, type: 5 }).then(data => {
        setTechnologyList(data.rows);
      });
      getNoticeList({ ...params, type: 6 }).then(data => {
        setDealList(data.rows);
        setLoading(false);
      });
    } else {
      const params = {
        orderBy,
        curPage,
        isChecked: 1,
        pageSize: 10,
        status: 1,
        title,
        type: tab,
        flag: 1,   //后台管理查询：2；前台展示：1
      };
      getNoticeList(params).then(data => {
        setNoticeList(data.rows);
        setTotal(data.total);
        setLoading(false);
      })
    }
  }, [tab, title, orderBy, curPage]);

  function changeSort(sortType) {
    setOrderBy(sortType);
    setCurPage(1);
  }

  function noticeClick(id) {
    props.history.push(`/notice/noticeDetail/${id}`);
  }

  function sortNav() {
    return <div className="notice-sort-nav">
      <Search
        size="large"
        maxLength={20}
        style={{ width: "56%" }}
        placeholder="输入标题关键字，不能超过20字符"
        enterButton={<span><Icon type="search" className="mr5" /> 搜索</span>}
        onSearch={(value) => setTitle(value)} />
      <div className="center-right-but">
        <div className={classNames({ sortLink: true, active: orderBy === 'publishDateDesc' })} onClick={() => { changeSort('publishDateDesc') }}>时间降序<Icon type="arrow-down" /></div>
        <span className="piece">|</span>
        <div className={classNames({ sortLink: true, active: orderBy === 'publishDateAsc' })} onClick={() => { changeSort('publishDateAsc') }}>时间升序<Icon type="arrow-up" /></div>
      </div>
    </div>
  }

  function handleClick(e) {
    setTab(e.key);
    setCurPage(1);
    setTitle('');
    setOrderBy('publishDateDesc');
  }

  function click(e){
    console.log("aa");
    console.log(e);
    setTab(e);
    setCurPage(1);
    setTitle('');
    setOrderBy('publishDateDesc');
  }

  function cont(param, titleStr, key, svgStr) {
    return <React.Fragment>
      <div className="item-head-title">
        <div className="item-head-title-content">
          <i className={svgStr}></i>
          <span>{titleStr}</span>
        </div>
        {param.length === 5 && <span className="link" onClick={() => { handleClick({ key: key }) }}>查看更多 <Icon type="arrow-right" /></span>}
      </div>
      {param.length > 0 ? <ItemList
        list={param}
        itemClick={noticeClick}
      /> : <Nodata _html="暂无数据" />}
      {/* <ItemList
        list={param}
        itemClick={noticeClick}
      /> */}
    </React.Fragment>
  }

  function content() {
    if (tab === '0') {
      if(callList.length === 0 && changeList.length === 0 && checkList.length === 0 && abandonList.length === 0){
        return <React.Fragment><Nodata _html="暂无数据" /></React.Fragment>
      }else{
        return <React.Fragment>
          {cont(callList, "招标公告", '4', "iconfont icon-zhaobiaogonggao")}
          {cont(changeList, "更正公告", '1', "iconfont icon-gengzhenggonggao")}
          {cont(checkList, "中标公告", '2', "iconfont icon-zhongbiaogonggao")}
          {cont(abandonList, "废标公告", '3', "iconfont icon-feibiaogonggao")}
        </React.Fragment>
      }
    } else if (tab === '7') {
        {/* {technologyList.length <= 0 && dealList.length <= 0 ? <Nodata _html="暂无数据" /> : ""} */}
        {/* {technologyList.length > 0 && cont(technologyList, "技术资产", '5',"iconfont icon-jishuzichan")} */}
        if(technologyList.length === 0 && dealList.length === 0){
          return <React.Fragment><Nodata _html="暂无数据" /></React.Fragment>
        }else{
          return <React.Fragment>
            {cont(technologyList, "技术资产", '5', "iconfont icon-jishuzichan")}
            {cont(dealList, "成交公告", '6', "iconfont icon-chengjiaogonggao")}
          </React.Fragment>
        }
    } else if (tab === '8') {
      return <div></div>
    } else {
      let titleStr;
      let svgStr;
      switch (tab) {
        case '1':
          titleStr = "更正公告";
          svgStr = "iconfont icon-gengzhenggonggao"
          break;
        case '2':
          titleStr = "中标公告";
          svgStr = "iconfont icon-zhongbiaogonggao"
          break;
        case '3':
          titleStr = "废标公告";
          svgStr = "iconfont icon-feibiaogonggao"
          break;
        case '4':
          titleStr = "招标公告";
          svgStr = "iconfont icon-zhaobiaogonggao"
          break;
        case '5':
          titleStr = "技术资产";
          svgStr = "iconfont icon-jishuzichan"
          break;
        default:
          titleStr = "成交公告";
          svgStr = "iconfont icon-chengjiaogonggao"
      }
      return <React.Fragment>
        <div className="item-head-title">
          <div className="item-head-title-content">
            <i className={svgStr}></i>
            <span>{titleStr}</span>
          </div>
        </div>
        <ItemList
          list={noticeList}
          itemClick={noticeClick}
        />
        {/* {noticeList.length === 10 && <div className="edu-txt-center mt30 mb30">
          <Pagination
            showQuickJumper
            onChange={(page) => { setCurPage(page) }}
            current={curPage}
            total={total}
            showTotal={total => `共 ${total} 条`}
          />
        </div>} */}
        {total > 0 ? total> 10 ? <div className="edu-txt-center mt30 mb30">
          <Pagination
            showQuickJumper
            onChange={(page) => { setCurPage(page) }}
            current={curPage}
            total={total}
            showTotal={total => `共 ${total} 条`}
          />
        </div> : "" : <Nodata _html="暂无数据" />}
      </React.Fragment>
    }
  }

  return (
    <React.Fragment>
      <img alt="图片加载失败" src={noticePng} width="100%"></img>
      <div className="centerbox notice-list clearfix">
        {/* <div className="head-navigation">
          <Link to="/">首页<span className="greater">&nbsp;&gt;&nbsp;</span></Link>
          <span>公告</span>
        </div> */}
        <div className="body">
        <Affix className="affix-list-left" offsetTop={90}>
          {/* <div className="affix-list-content"> */}
          <div className="navigationMenu">
            <ul className="menu-ul">
              <li className="MenuTitle" onClick={()=>click('0')}><span><i className="iconfont icon-xiangmugonggao"></i>项目公告</span></li>
              <li className={tab === '4' ? "active" : ""} onClick={()=>click('4')}><span>招标公告</span></li>
              <li className={tab === '1' ? "active" : ""} onClick={()=>click('1')}><span>更正公告</span></li>
              <li className={tab === '2' ? "active" : ""} onClick={()=>click('2')}><span>中标公告</span></li>
              <li className={tab === '3' ? "active" : ""} onClick={()=>click('3')}><span>废标公告</span></li>
            </ul>
            <ul className="menu-ul">
              <li className="MenuTitle" onClick={()=>click('7')}><span><i className="iconfont icon-chengguo"></i>成果转化</span></li>
              <li className={tab === '5' ? "active" : ""} onClick={()=>click('5')}><span>技术资产</span></li>
              <li className={tab === '6' ? "active" : ""} onClick={()=>click('6')}><span>成交公告</span></li>
            </ul>
          </div>
          </Affix>
          <div className="notice-center-content">
            {sortNav()}
            {loading ? <Loading /> : content()}
          </div>
        </div>
      </div>
    </React.Fragment>
  )
}