import React, { useEffect, useState } from 'react';
import { Input, Table, Tooltip } from 'antd';
import { getPassList, hasAuditRole } from '../api';
import ProjectDetail from '../project/component/projectDetail';
// 预公示banner
import resultBanner from "../img/resultBanner.png";
// 公示banner
import resultBanner2 from "../img/resultBanner2.png";
import bgPng from "../img/bgPng.png";
import './index.scss';
import '../project/index.scss';
const { Search } = Input;

// 课题列表
function CheckResult({current_user, history}) {
  // 输入搜索框
  const [keyword, setKeyword] = useState(undefined);
  const [data, setData] = useState([]);
  // table
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState(0);
  const [pageSize, setPageSize] = useState(20);
  const [loading, setLoading] = useState(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
  const time = new Date().getTime() > new Date('2022/06/28 1:0').getTime() && new Date().getTime() < new Date('2022/07/01 0:0').getTime();

  useEffect(()=>{
    // 未到时间
    if(new Date().getTime() < new Date('2022/06/28 1:0').getTime()){
      history.push('/glcc');
    }
    hasAuditRole({ userId: current_user.user_id }).then(res => {
      // 7.1之前 普通用户不可以进入此页面
      if (!(res && res.message == 'success' && res.data.hasRole) && new Date().getTime() < new Date('2022/07/01 12:0').getTime()) {
        history.push('/glcc');
      }
    })
  },[])

  useEffect(() => {
    setLoading(true);
    setExpandedRowKeys([]);
    const params = {
      curPage: current,
      keyword,
      pageSize,
    }
    getPassList(params).then(response => {
      if (response && response.message === "success") {
        setData(response.data.rows);
        setTotal(response.data.total);
      }
      setLoading(false);
    })
  }, [keyword, current, pageSize])

  const columns = [
    { title: '序号', dataIndex: 'index', align: 'center', className:"columnsResult", width: '6%', render: (text, item, index) => <span>{(current-1)*pageSize+index + 1}</span> },
    { title: '入选学生', dataIndex: 'studentName', className:"columnsResult taskName", width: '10%', ellipsis: true},
    { title: '学生院校', dataIndex: 'school', className:"columnsResult taskName", width: '12%', ellipsis: true,render: (text) => <Tooltip title={text} placement="topLeft"><span className='toolTipSpan'>{text}</span></Tooltip>},
    { title: '学生专业', dataIndex: 'profession', className:"columnsResult taskName", width: '12%', ellipsis: true, render: (text) => <Tooltip title={text} placement="topLeft"><span className='toolTipSpan'>{text}</span></Tooltip>},
    { title: '课题导师', dataIndex: 'tutorName', className:"columnsResult", width: '10%', ellipsis: true},
    { title: '课题名称', dataIndex: 'taskName', className:"columnsResult", width: '20%', ellipsis: true, render: (text, item) => <Tooltip title={text} placement="topLeft"><span className='toolTipSpan link' onClick={()=>{window.open(`/glcc/subjects/detail/${item.taskId}`)}}>{text}</span></Tooltip> },
    { title: '项目名称', dataIndex: 'projectName', className:"columnsResult", ellipsis: true, width: '14%', render: (text) => <Tooltip title={text} placement="topLeft"><span className='toolTipSpan'>{text}</span></Tooltip> },
    { title: '操作', dataIndex: 'action', align: 'center', className:"columnsResult actionBox"},
  ]

  const customExpandIcon = (props) => {
    if (props.expanded) {
      return <a className='toolTipSpan link' style={{marginRight: 8 }} onClick={e => {
        props.onExpand(props.record, e);
      }}><i className='iconfont icon-ketixiangqingicon mr5'></i>项目简介<i className="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- font-12 ml5 down mr10"></i></a>
    } else {
      return <a className='toolTipSpan link' style={{marginRight: 8 }} onClick={e => {
        props.onExpand(props.record, e);
      }}><i className='iconfont icon-ketixiangqingicon mr5'></i>项目简介<i className="iconfont icon-jiantou9 font-12 ml5 down mr10"></i></a>
    }
  }

  const expandRow = (record) => {
    return <ProjectDetail detail={null} projectId={record.regId} showTask={false}/>
  }

  // 展开收起行回调
  function onExpand(expanded, record){
    const keys = new Set(expandedRowKeys);
    if(expanded){
      keys.add(record.id);
    }else{
      keys.delete(record.id);
    }
    setExpandedRowKeys(Array.from(keys));
  }

  // 改变pagesize
  function onShowSizeChange(current, pageSize){
    window.scrollTo(0, 0);
    setCurrent(1);
    setPageSize(pageSize);
  }

  // 切换页数
  function changePage(page, pageSize){
    window.scrollTo(0, 0);
    setCurrent(page);
  }

  return (
    <div className="resultListBox">
      {time && <img className="resultBanner" src={resultBanner} alt=""></img>}
      {new Date().getTime() > new Date('2022/07/01 12:0').getTime() && <img className="resultBanner" src={resultBanner2} alt=""></img>}
      <div className='bgBox'>
        <div className="resultList">
          <div className='goBackBox'><a href='/glcc'>开源夏令营 / </a>入选学生名单{time && '预'}公示</div>
          <Search className='search' placeholder='请输入学生姓名或课题名称进行搜索' allowClear enterButton onSearch={(value) => { setCurrent(1); setKeyword(value) }} />
          <Table
            loading={loading}
            columns={columns}
            dataSource={data}
            expandedRowRender={expandRow}
            expandIconColumnIndex={7}
            expandIconAsCell={false}
            expandIcon={customExpandIcon}
            rowKey={'id'}
            expandedRowKeys={expandedRowKeys}
            onExpand={onExpand}
            pagination={{current: current, pageSize: pageSize, total: total, showSizeChanger: true, onShowSizeChange:onShowSizeChange, showQuickJumper: true, onChange: changePage}}
            className='resultListTable pb30'
          />
        </div>
        <img src={bgPng} alt='' className='bgPng3'/>
        <img src={bgPng} alt='' className='bgPng4'/>
      </div>
    </div>
  )
}
export default CheckResult;