import React, { useState, useEffect, useRef } from 'react';
import { Select, Radio, Card, Row, Col, Input ,Button} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';

const { Option } = Select;

import BugTreeList from './components/BugTreeList';
import BugSingleList from './components/BugSingleList';
import BugDetailModal from './components/BugDetailModal';
import BugTreeGraph from './components/BugTreeGraph';

import {
  ApartmentOutlined,
  MoreOutlined,
} from '@ant-design/icons';
import styles from './style.less';

const AllBugs = (props) => {
  const { dispatch, commonId, reportCommonInfo, reportReview, categories } = props;
  const [status, setStatus] = useState('tree');
  const [page2List, setPage2List] = useState([]);
  const [page3List, setPage3List] = useState([])
  const [page1, setPage1] = useState('');
  const [page2, setPage2] = useState('');
  const [page3, setPage3] = useState('');
  const [page, setPage] = useState('null');

  const onChange = e => {
    dispatch({
      type:'allBugs/saveBugItemDetail',
      payload:{}
    })
    setStatus(e.target.value);
    setPage('null');
  };

  const handlePage1Change = (val) => {
    if (val !== page1) {
      setPage3('');
      setPage2('');
      setPage1(val);
      let item = categories.find(x => x.item === val);
      setPage2List(item.children);
    }
  };

  const handlePage2Change = (val) => {
    if (val !== page2) {
      setPage3('');
      setPage2(val);
      let item = page2List.find(x => x.item === val);
      setPage3List(item.children);
    }
  };

  const handlePage3Change = val => {
    setPage3(val);
  };

  useEffect(() => {
    if (page1) {
      const newPage = `${page1}${page2 ? '-' + page2 : ''}${page3 ? '-' + page3 : ''}`;
      setPage(newPage);
    }else{

    }
  }, [page1, page2, page3]);

  const getReportReview = () => {
    dispatch({
      type: 'allBugs/getReportReview',
      payload: {
        report_id: reportCommonInfo.id,
        case_take_id: `${commonId.caseId}-${commonId.examId}`,
      },
    });
  };

  const clearPageSelect = ()=>{
    setPage1("");
    setPage2("");
    setPage3("");
    setPage("null");
  }

  useEffect(() => {
    if (!categories.length) {
      dispatch({
        type: 'editReport/getCategories',
        payload: { examId: commonId.examId },
      });
    }
    //从edit页面进来的时候就已经在redux中缓存过了，没有的话就需要重新自己获取
    if (reportCommonInfo && reportCommonInfo.id) {
      dispatch({
        type: 'editReport/getReportInfo',
        payload: {
          case_take_id: `${commonId.caseId}-${commonId.examId}`,
          worker_id: commonId.userId,
        },
      }).then(getReportReview);
    } else {
      getReportReview();
    }
  }, [dispatch]);

  return (
    <Card bordered={false} className={styles.allBugs}>
      <>
        <Row style={{ marginBottom: 40 }}>
          <Col span={5}>
            <Radio.Group
              onChange={onChange}
              value={status}
              style={{ marginRight: 40 }}
            >
              <Radio.Button value="tree"><ApartmentOutlined /> 树状</Radio.Button>
              <Radio.Button value="single"><MoreOutlined /> 单一</Radio.Button>
            </Radio.Group>
          </Col>
          <Col span={11}>
            {/*三级菜单*/}
            <div className={styles.pageSelectors}>
              <span>三级菜单：</span>
              <Select
                value={page1}
                placeholder="请选择一级界面"
                onSelect={(val) => {
                  handlePage1Change(val);
                }}>
                {categories.map((item) => {
                  return <Select.Option value={item.item} key={item.item}>{item.item}
                  </Select.Option>;
                })}
              </Select>
              <Select
                value={page2}
                placeholder="请选择二级界面"
                onSelect={(val) => {
                  handlePage2Change(val);
                }}>
                {page2List.map((item) => {
                  return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                })}
              </Select>
              <Select
                value={page3}
                placeholder="请选择三级界面"
                onSelect={(val) => {
                  handlePage3Change(val);
                }}>
                {page3List.map((item) => {
                  return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                })}
              </Select>
              <Button type="primary" onClick={clearPageSelect}>清空选择</Button>
            </div>
          </Col>

          <Col span={8}>
            <span className={styles.bugInfoCount}>已点赞：{reportReview.thumsup}</span>
            <span className={styles.bugInfoCount}>已点踩：{reportReview.diss}</span>
            <span className={styles.bugInfoCount}>bug总数：{reportReview.bug}</span>
          </Col>
        </Row>
        <Row>
          <Col span={status === 'tree' ? 8 : 11}>
            {status === 'tree' ? <BugTreeList page={page} /> : <BugSingleList page={page} />}
          </Col>
          <Col span={status === 'tree' ? 8 : 2}>
            {status === 'tree' ? <BugTreeGraph  /> : null}
          </Col>
          <Col span={status === 'tree' ? 8 : 11}>
            <div className={styles.bugDetail}>
              <BugDetailModal getReportReview={getReportReview} status={status}/>
            </div>
          </Col>
        </Row>
      </>
    </Card>
  );
};

export default connect(({ allBugs, editReport }) => ({
  commonId: editReport.commonId,
  reportCommonInfo: editReport.reportCommonInfo,
  categories: editReport.categories,
  reportReview: allBugs.reportReview,
}))(AllBugs);
