import { Col, Image, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import styles from './index.less';

import { recurrent, severity, bug_categories } from '@/pages/edit/components/Step2/const';
import * as echarts from 'echarts';

const imgArr = ['grade.png', 'noGrade.png'];

const BugTreeGraph = (props) => {
  const { dispatch, bugItemDetail, treeGraph,bugTreeNode } = props;

  const [path,setPath] = useState([]);
  const [invalid,setInvalid] = useState([]);
  const [treeData,setTreeData] = useState([]);

  //初始化echarts
  const initEcharts = () => {
    const item_color = 'rgba(226,245,240,1)';
    const border_color = 'rgba(0,0,0,0.9)';
    const categories = [
      {
        'name': '未评分',
        'icon': 'image://' + require('../../assets/' + imgArr[1]),
        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
      },
      {
        'name': '已评分',
        'icon': 'image://' + require('../../assets/' + imgArr[0]),
        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
      },
    ];
    let echartOption = {
      legend: {     //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
        data: categories,
        selectedMode: false,  //图例禁止点击
        top: '3%',
        left: '3%',
        itemWidth: 15,
        itemHeight: 15,
        orient: 'vertical',
      },
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        formatter: function(params) {
          return params.name + '分数:' + params.value;
        },
      },
      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,
          },
        },
      ],

      toolbox: {
        show: false,
      },
      series: [
        {
          type: 'tree',

          name: 'tree1',

          data: treeData,

          top: '5%',
          left: '5%',
          bottom: '5%',
          right: '5%',
          orient: 'vertical',
          symbolSize: 20,
          label: {
            normal: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
            },
          },

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

          expandAndCollapse: false,
          initialTreeDepth: 10,
          animationDuration: 550,
          animationDurationUpdate: 750,
        },
        {
          name: categories[0].name,
          type: 'bar',
          barWidth: '60%',  //不显示，可以随便设置
          data: [0],
          itemStyle: {
            normal: {
              color: '#41C468',  //这里的图例要注意，颜色设置和仪表盘的颜色对应起来
            },
          },
        },
        {
          name: categories[1].name,
          type: 'bar',
          barWidth: '60%',
          data: [0],
          itemStyle: {
            normal: {
              color: '#70C1B3',
            },
          },
        },
      ],
    };
    const chart = echarts.init(document.getElementById('treeGraphChart'));
    chart.setOption(echartOption);
    chart.on("click",onChartClick);
  };

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

  //封装后端数据
  const pathRecursion = (json1, onePath, i)=>{
    let flag = false;
    if (i === onePath.length) {
      return {};
    }

    let children = json1.children;
    if (children !== undefined && children.length !== 0) {
      for (let j = 0; j < children.length; j++) {
        if (children[j].name === onePath[i]) {
          // var json2  = {};
          // json2['name'] = onePath[i];
          flag = true;
          let jsonTemp = pathRecursion(children[j], onePath, i + 1);
          if (JSON.stringify(jsonTemp) !== '{}') {
            children[j].children.push(jsonTemp);
          }
        }
      }
      if (flag) {
        return {};
      } else {
        let json2 = {};
        json2['name'] = onePath[i];
        json2['children'] = [];
        let jsonTemp = pathRecursion(json2, onePath, i + 1);
        if (JSON.stringify(jsonTemp) !== '{}') {
          json2['children'].push(jsonTemp);
        }
        return json2;
      }
    }

    let json2 = {};
    json2['name'] = onePath[i];
    json2['children'] = [];
    let jsonTemp = pathRecursion(json2, onePath, i + 1);
    if (JSON.stringify(jsonTemp) !== '{}') {
      json2['children'].push(jsonTemp);
    }
    return json2;
  }

  //初次迭代遍历
  const initItemRecursion = (items) => {
    console.log('初次遍历')
    //按理说是初次遍历结束了才会initcharts
    if (items !== undefined) {
      items.forEach(item => {
        let temp = item.name;
        item['value'] = 0;
        item['id'] = temp;
        item['symbol'] = 'emptyCircle';
        item['category'] = 0;
        item['name'] = transformName(temp);
        // this.scores.forEach(bugScore => {
        //   if (bugScore[0] == item.id) {
        //     item['symbol'] = 'circle';
        //     item['value'] = Number(bugScore[1]);
        //   }
        // })
        if (item.children) {
          initItemRecursion(item.children);
        }
      });
    }
  }

  //辅助类函数
  const transformName = (str)=> {
    let ret = '';
    if (str.length > 3) {
      ret = str.substr(str.length - 3, str.length);
    } else {
      ret = str;
    }
    return ret;
  }

  //点击树状图
  const onChartClick = (param)=>{
    console.log('点击事件')
    let id = param.data.id;
    console.log(id)
    dispatch({
      type: 'editReport/getBugDetail',
      payload: {
        id:param.data.id
      },
    }).then(res => {
      // 点击tree node，tree不刷新，只刷新detail modal
      dispatch({
        type: 'allBugs/saveBugItemDetail',
        payload: {
          ...res,
        },
      });
    });
  }

  useEffect(()=>{
    if(treeData.length){
      initItemRecursion(treeData);
      initEcharts();
    }
  },[treeData])

  useEffect(()=>{
    if(JSON.stringify(bugTreeNode)!=='{}'){
      dispatch({
        type:'allBugs/getTreeGraph',
        payload:{
          id:bugTreeNode.detail.id
        }
      }).then(res=>{
        if(res){
          setPath(res['path']);
          setInvalid(res['invalid'])
        }
        // this.scores = data['score'];
        // if (this.treeRootsExist) {
        //   this.treeTitle = '树' + index + '图';
        // } else {
        //   this.treeTitle = 'Bug' + index + '图';
        //   this.getBugDetail(this.treeRoots[index - 1][0]);
        // }
        // packageData();
        // initEcharts();
      })
    }
  },[bugTreeNode])

  useEffect(()=>{
    if(path.length){
      packageData();
    }
  },[path])
  return (
    <div className={styles.treeGraph}>
      <div id="treeGraphChart" className={styles.treeGraphChart}></div>
    </div>
  );
};

export default connect(({ allBugs, editReport }) => ({
  treeGraph: allBugs.treeGraph,
  bugTreeNode: allBugs.bugTreeNode,
  bugItemDetail: allBugs.bugItemDetail,
}))(BugTreeGraph);
