import { Pagination, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { treeFilter } from 'enzyme/src/RSTTraversal';

const BugTreeList = (props) => {
  const { dispatch, commonId, bugTreeList, bugSingleList, page } = props;
  const [currentTreeItem, setCurrentTreeItem] = useState([]);
  const [currPage, setCurrPage] = useState(1);

  const onPageChange = (num) => {
    setCurrPage(num);
  };

  const handleTreeItemClick = (item) => {
    const currItem = bugTreeList.TreeRoot.filter(i => i[0] === item[0]);
    setCurrentTreeItem(currItem[0]);
  };

  useEffect(() => {
    bugTreeList.TreeRoot && setCurrentTreeItem(bugTreeList.TreeRoot[0]);
  }, [bugTreeList]);

  useEffect(() => {
    if (currentTreeItem&&JSON.stringify(currentTreeItem) !== '[]') {
      //获取bug详情信息用于展示
      dispatch({
        type: 'editReport/getBugDetail',
        payload: {
          id: currentTreeItem[0],
        },
      }).then(res => {
        //这里是根据list 的 item获取的，需要刷新bug tree，还需要更新detail modal
        dispatch({
          type: 'allBugs/saveBugTreeNode',
          payload: {
            ...res,
          },
        });
        dispatch({
          type: 'allBugs/saveBugItemDetail',
          payload: {
            ...res,
          },
        });
      });
    }
  }, [currentTreeItem]);

  const getBugTreeList = ()=>{
    dispatch({
      type: 'allBugs/getTreeList',
      payload: {
        case_take_id: `${commonId.caseId}-${commonId.examId}`,
        start: 10*(currPage-1),
        count: '10',
        page,
        roleId:commonId.roleId
      },
    });
  }

  useEffect(() => {
    getBugTreeList();
  }, [currPage,page]);

  return (
    <div>
      {bugTreeList?.TreeRoot?.length ?
        <div>
          <div className={styles.bugList}>
            {bugTreeList.TreeRoot.map((item, index) => {
              return (
                <div key={item[0]}
                     className={`${styles.bugListItem} ${currentTreeItem&&currentTreeItem[0] === item[0] ? styles.bugListItemActive : ''}`}
                     onClick={() => {
                       handleTreeItemClick(item);
                     }}>
                <span className={styles.bugListItemNum}>
                  树{index + 1}:
                </span>
                  <div className={styles.bugListItemInfo}>
                    <div className={styles.bugListItemSummary}>
                      高:{item[2]} 宽:{item[1]} 个数:{item[3]}</div>
                    <Tooltip placement="topLeft" title={item[5]}>
                      {item[5]}
                    </Tooltip>
                  </div>
                </div>
              );
            })}
          </div>
          <div className={styles.pagination}>
            <Pagination showQuickJumper defaultCurrent={1} total={bugTreeList.Count} onChange={onPageChange} />
          </div>
        </div>
        : <div>暂无缺陷提交记录</div>}
    </div>
  );
};

export default connect(({ allBugs, editReport }) => ({
  data: allBugs.step,
  bugTreeList: allBugs.bugTreeList,
  reportCommonInfo: editReport.reportCommonInfo,
  commonId: editReport.commonId,
}))(BugTreeList);
