import { Table, Tag, Row, Col, Image, Button, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { timeToString } from '../../utils';
import {
  RollbackOutlined,
  DislikeOutlined,
  LikeOutlined, LeftOutlined, RightOutlined,
} from '@ant-design/icons';
import { recurrent, severity, bug_categories } from '../Step2/const';
import * as echarts from 'echarts';

//tips:这里只能放在 pages/edit/assets中作为路径显示,否则要改动模板代码
const imgArr = ['noArrived.png', 'yellowFlag.png', 'redFlag.png', 'recPage.png'];

const BugGuideTree = (props) => {
  const { dispatch, pathInfo, recommendPath, bugRecommendList, categories,reportCommonInfo } = props;
  const allPath = pathInfo.all;  //所有已发现bug
  const userPath = pathInfo.self;  //我的bug
  const { page, info } = recommendPath;

  let jsonPath = {};
  let timer = null;

  const [showTable, setShowTable] = useState(true);
  const [currDetail, setCurrDetail] = useState({});
  const [treeHeight, setTreeHeight] = useState(600);
  const [treeHeightNum, setTreeHeightNum] = useState(0);
  const [operator, setOperator] = useState(-1);

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: 150,
      // ellipsis: {
      //   showTitle: false,
      // },
      render: title => (
        <div className={styles.tableColumnTitle}>
          <Tooltip placement="topLeft" title={title}>
            {title}
          </Tooltip>
        </div>
        // <Tooltip placement="topLeft" title={title}>
        //   {title}
        // </Tooltip>
      ),
    },
    {
      title: '分类',
      dataIndex: 'bug_category',
      key: 'bug_category',
      render: bug_category => {
        return (
          <Tag color='geekblue'>
            {bug_category}
          </Tag>
        );
      },

    },
    {
      title: '截图',
      dataIndex: 'img_url',
      key: 'img_url',
      width: 150,
      render: (img_url) => {
        return (
          img_url ?
            <img className={styles.myTableItemImg} src={img_url} alt="bug_img" />
            : <span>暂未上传</span>
        );
      },
    },
  ];

  const handleClickTableRow = (item) => {
    dispatch({
      type: 'editReport/getBugDetail',
      payload: {
        id: item.id,
      },
    }).then(res => {
      res && setCurrDetail(res.detail);
    });
  };

  const handleClickBack = () => {
    setCurrDetail({});
  };

  const handleOperateIcon = (type) => {
    if(operator===-1){
      //这里的操作是点赞点踩操作
      setOperator(type);
      if(type){
        //type===1表示点赞
        dispatch({
          type: 'editReport/goodForReport',
          payload: {
            id: currDetail.id,//被点赞的报告的id
            report_id:reportCommonInfo.id,
            user_id:2,
            action:'like'
          },
        })
      }else{
        dispatch({
          type: 'editReport/badForReport',
          payload: {
            id: currDetail.id,//被点赞的报告的id
            report_id:reportCommonInfo.id,
            user_id:2,
            action:'dislike'
          },
        });
      }
    }else{
      //这里的操作是取消点赞点踩操作
      setOperator(-1);
      if(type){
        //type===1表示点赞
        dispatch({
          type: 'editReport/cancelGoodForReport',
          payload: {
            id: currDetail.id,//被点赞的报告的id
            report_id:reportCommonInfo.id,
          },
        })
      }else{
        dispatch({
          type: 'editReport/cancelBadForReport',
          payload: {
            id: currDetail.id,//被点赞的报告的id
            report_id:reportCommonInfo.id,
          },
        });
      }
    }


  };

  const initChartData = () => {
    const data = categories;
    const str = JSON.stringify(data);
    const str2 = str.replace(/item/g, 'name');
    const json = {};
    json['name'] = 'web';
    json['children'] = JSON.parse(str2);
    jsonPath = json;
    getHeight(jsonPath.children);
    setTreeHeightNum(Math.max(treeHeightNum, 600));
    setTreeHeight(Math.max(treeHeightNum, 600));
  };

  const getHeight = (items) => {
    if (items !== undefined) {
      items.forEach(item => {
        if (item.children) {
          getHeight(item.children);
        } else {
          setTreeHeightNum(treeHeightNum + 25);
        }
      });
    }
  };

  const setRecPageFirst = () => {
    timer = setTimeout(() => {
      const dom = document.getElementById('myChart');
      if (dom) {
        const myChart = echarts.init(dom);
        let flag = 0;
        let style;
        if (flag === 1) {
          style = 'image://' + require('../../assets/' + imgArr[0]);
          flag = 0;
        } else {
          style = 'image://' + require('../../assets/' + imgArr[3]);
          flag = 1;
        }
        initItemRecursionRecPage(jsonPath.children, page, style);
        myChart.setOption({ series: [{ data: [jsonPath] }] });
      }
    }, 2000);
  };

  const setRecPage = (page) => {

    timer = setTimeout(() => {

    }, 2000);
  };

  const initItemRecursion = (items) => {
    if (items !== undefined) {
      items.forEach(item => {
        item['value'] = 0;
        item['symbol'] = 'image://' + require('../../assets/' + imgArr[0]);
        item['category'] = 0;
        // 已经发现Bug的页面
        for (let p in allPath) {
          if (item.name === p) {
            item.value += allPath[p];
            item.category = 1;
            item.symbol = 'image://' + require('../../assets/' + imgArr[1]);
            break;
          }
        }
        //个人发现bug的页面
        for (let p in userPath) {
          if (item.name === p) {
            //this.nodes[i].value = userPath.p;
            item.category = 2;
            item.symbol = 'image://' + require('../../assets/' + imgArr[2]);
            break;
          }
        }
        if (item.children) {
          initItemRecursion(item.children);
        }
      });
    }
    initEcharts(info);
  };

  const initItemRecursionRecPage = (items, page, style) => {
    if (items !== undefined) {
      items.forEach(item => {
        for (let j = 0; j < (page && page.length) || 0; j++) {
          if (item.name === page[j]) {
            item['symbol'] = style;
          }
        }
        if (item.children) {
          initItemRecursionRecPage(item.children, page, style);
        }
      });
    }
  };

  const initEcharts = () => {
    let item_color = 'rgba(226,245,240,1)';
    let border_color = 'rgba(0,0,0,0.9)';
    let legendCategories = [
      {
        'name': '暂无Bug',
        'icon': 'image://' + require('../../assets/' + imgArr[0]),
        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
      },
      {
        'name': '已有Bug',
        'icon': 'image://' + require('../../assets/' + imgArr[1]),
        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
      },
      {
        'name': '我的Bug',
        'icon': 'image://' + require('../../assets/' + imgArr[2]),
        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
      },
      {
        'name': '推荐页面',
        'icon': 'image://' + require('../../assets/' + imgArr[3]),
        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
      },
    ];

    let option2 = {
      legend: {     //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
        data: legendCategories,
        selecedMode: false,  //图例禁止点击
        top: '5%',
        left: '3%',
        itemWidth: 10,
        itemHeight: 10,
        orient: 'vertical',
      },
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        formatter: function(params) {
          if (params.data.category === 2) {
            return params.name + '<br>' + '我发现/所有: ' + userPath[params.name] + '/' + params.value;
          } else if (params.data.category === 1) {
            return params.name + '<br>' + '我发现/所有: 0/' + params.value;
          } else {
            return '还未有人在该页面发现Bug,努力寻找第一个Bug吧!';
          }
        },
      },
      grid: {
        z: 1,    //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏
        show: false,
        left: '-30%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        splitLine: {
          show: false,    //隐藏分割线
        },

      },

      xAxis: [   //这里有很多的show，必须都设置成不显示
        {
          type: 'category',
          data: [],
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          splitArea: {
            interval: 'auto',
            show: false,
          },
        },
      ],

      yAxis: [ //这里有很多的show，必须都设置成不显示
        {
          type: 'value',
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          type: 'tree',
          name: 'tree1',
          data: [pathInfo],
          categories: legendCategories,
          top: '5%',
          left: '9%',
          bottom: '1%',
          right: '15%',

          symbolSize: 12,

          label: {
            normal: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9,
            },
          },

          leaves: {
            label: {
              normal: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left',
              },
            },
          },

          expandAndCollapse: true,
          initialTreeDepth: 4,
          animationDuration: 550,
          animationDurationUpdate: 750,
        },
        {
          name: legendCategories[0].name,
          type: 'bar',
          barWidth: '60%',  //不显示，可以随便设置
          data: [0],
          itemStyle: {
            normal: {
              color: '#41C468',  //这里的图例要注意，颜色设置和仪表盘的颜色对应起来
            },
          },
        },
        {
          name: legendCategories[1].name,
          type: 'bar',
          barWidth: '60%',
          data: [0],
          itemStyle: {
            normal: {
              color: '#70C1B3',
            },
          },
        },
        {
          name: legendCategories[2].name,
          type: 'bar',
          barWidth: '60%',
          data: [0],
          itemStyle: {
            normal: {
              color: '#00A1E9',
            },
          },
        },
        {
          name: legendCategories[3].name,
          type: 'bar',
          barWidth: '60%',
          data: [0],
          itemStyle: {
            normal: {
              color: '#00A1E9',
            },
          },
        },
      ],
    };

    const chart = echarts.init(document.getElementById('myChart'));
    chart.setOption(option2);
    setRecPageFirst();
  };

  //包装数据
  const packageData= () => {
    //统计node数量
    this.path.forEach(onePath => {
      onePath.forEach(node => {
        if (this.nodes.indexOf(node) == -1) {
          this.nodes.push(node);
        }
      })
    })
    //包装树状结构
    let json1 = {};
    this.path.forEach(onePath => {
      if (!json1.hasOwnProperty('name')) {
        json1['name'] = onePath[0];
        json1['children'] = [];
      }
      var jsonTemp = this.pathRecursion(json1, onePath, 1);
      if (JSON.stringify(jsonTemp) != '{}') {
        json1['children'].push(jsonTemp);
      }
    })
    this.treeData = [json1];
    this.initItemRecursion(this.treeData);
  }

  useEffect(() => {
    initChartData();
    initItemRecursion(jsonPath.children);
  }, [pathInfo.all, pathInfo.self, jsonPath.children, info, page]);


  useEffect(() => {
    if (JSON.stringify(currDetail) !== '{}') {
      setShowTable(false);
    } else {
      setShowTable(true);
    }
  }, [currDetail]);

  return (
    <Row gutter={10}>
      <Col span={14}>
        <div id="myChart" style={{ height: treeHeight }}></div>
      </Col>
      {
        showTable ? <Col span={10}>
            <div className={styles.myTable}>
              <Table columns={columns}
                     rowKey={record => record.id}
                     dataSource={bugRecommendList}
                     pagination={{ pageSize: 8 }}
                     onRow={record => {
                       return {
                         onClick: event => {
                           handleClickTableRow(record);
                         }, // 点击行
                       };
                     }} />
            </div>
          </Col> :
          <Col span={10}>
            <div className={styles.myTableItemDetail}>
              <div className={styles.detailItem}>
                <span className={styles.detailLabel}>Bug 标识：</span>{currDetail.id}
                <span className={styles.backIcon}>
                  <Button onClick={() => {
                    handleClickBack();
                  }}s><RollbackOutlined /></Button>
                </span>
              </div>
              <div className={`${styles.detailItem} ${styles.detailItemDesc}`}>
                <Tooltip placement="topLeft" title={currDetail.title}>
                  <span className={styles.detailLabel}>Bug 题目：</span>
                  {currDetail.title}
                </Tooltip>
              </div>
              <div className={`${styles.detailItem} ${styles.detailItemDesc}`}>
                <Tooltip placement="topLeft" title={currDetail.description}>
                  <span className={styles.detailLabel}>Bug描述：</span>
                  {currDetail && currDetail.description}
                </Tooltip>
              </div>
              <div className={styles.detailItem}><span
                className={styles.detailLabel}>创建时间：</span>{timeToString(currDetail.create_time_millis)}</div>
              <div className={styles.detailItem}><span className={styles.detailLabel}>页面路径：</span>{currDetail.bug_page}
              </div>
              <div className={styles.detailItem}><span
                className={styles.detailLabel}>漏洞分类：</span>{currDetail.bug_category}</div>
              <div className={styles.detailItem}><span
                className={styles.detailLabel}>严重等级：</span>{severity[currDetail.severity]}</div>
              <div className={styles.detailItem}><span
                className={styles.detailLabel}>复现程度：</span>{recurrent[currDetail.recurrent - 1]}</div>
              <div className={`${styles.detailItem} ${styles.detailItemOperator}`}><span
                className={styles.detailLabel}>具体操作：</span>
                {
                  currDetail && currDetail.img_url ?
                        <Image
                          width={120}
                          src={currDetail.img_url}
                          className={styles.detailItemImg}
                        />
                    : null
                }
                {operator !== 0 ?
                  <LikeOutlined className={`${styles.operatorIcon} ${operator===1 ? styles.operatorIconActive : ''}` }
                                onClick={() => handleOperateIcon(1)} /> : null}
                {operator !== 1 ?
                  <DislikeOutlined className={`${styles.operatorIcon} ${operator===0 ? styles.operatorIconActive : ''}`}
                                   onClick={() => handleOperateIcon(0)} /> : null}
              </div>
            </div>
          </Col>
      }
    </Row>
  );
};

export default connect(({ editReport }) => ({
  pathInfo: editReport.pathInfo,
  categories: editReport.categories,
  recommendPath: editReport.recommendPath,
  bugRecommendList: editReport.bugRecommendList,
  reportCommonInfo: editReport.reportCommonInfo,
}))(BugGuideTree);
