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 BugSingleList = (props) => {
  const { dispatch, commonId, bugTreeList, bugSingleList, page } = props;
  const [currPage, setCurrPage] = useState(1);
  const [currentItem, setCurrentItem] = useState([]);

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

  const handleSingleItemClick = (item) => {
    const currItem = bugSingleList.TreeRoot.filter(i => i[0] === item[0]);
    setCurrentItem(currItem[0]);
  };

  useEffect(() => {
    bugSingleList.TreeRoot && setCurrentItem(bugSingleList.TreeRoot[0]);
  }, [bugSingleList]);

  useEffect(() => {
    // console.log(JSON.stringify(currentItem));
    if (currentItem && JSON.stringify(currentItem) !== '[]') {
      //获取bug详情信息用于展示
      dispatch({
        type: 'editReport/getBugDetail',
        payload: {
          id: currentItem[0],
        },
      }).then(res => {
        dispatch({
          type: 'allBugs/saveBugItemDetail',
          payload: {
            ...res,
          },
        });
      });
    }
  }, [currentItem]);

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

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

  return (
    <div>
      <div className={styles.bugSingleList}>
        {
          bugSingleList && bugSingleList.TreeRoot && bugSingleList.TreeRoot.map((item, index) => {
            return (
              <div key={item[0]}
                   className={`${styles.bugListItem} ${currentItem[0] === item[0] ? styles.bugListItemActive : ''}`}
                   onClick={() => {
                     handleSingleItemClick(item);
                   }}>
                <span className={styles.bugListItemNum}>
                  Bug{index + 1}:
                </span>
                <div className={styles.bugListItemInfo}>
                  <Tooltip placement="topLeft" title={item[2]}>
                    {item[2] + item[2] + item[2]}
                  </Tooltip>
                </div>
              </div>
            );
          })
        }
      </div>
      <div className={styles.pagination}>
        <Pagination showQuickJumper defaultCurrent={1} total={bugSingleList.Count} onChange={onPageChange} />
      </div>
    </div>
  );
};

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