import './style.less'
import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function Leftbottom() {
  // const {
  //   safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
  // } = props;
  const chartRef = useRef(null);
  const safetyData = [
  {name: '县道', value: 72},
  {name: '乡道', value: 17},
  {name: '村道', value: 4},
  ]
  const chartTitle = '道路总公里';
  const title = '基础设施安全监测版块';
  // const number = 2738;
  // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
  const rightLegend = ['县道', '乡道', '村道']
  const legendColor = undefined;
  const width = undefined
  const height = undefined
  var titleNum = 15
  let safetyOption = {
    tooltip: {
      show: true,
      trigger: 'item',
      position: 'right',
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: {
        color: '#fff',
      },
      formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
    },
    title: {
      text:titleNum,//主标题文本
      left:'center',
      top:'35%',
        subtext:chartTitle,//副标题文本
        textStyle:{
          fontFamily : "YouSheBiaoTiHei",
          fontSize: 20,
          color:'#FFFFFF',
          // align:'center'
          },
          subtextStyle:{
            fontFamily : "PingFangSC-Medium PingFang SC",
            fontSize: 12,
            fontWeight:500,
            color:'#E9F7FF',
        }
    },
    legend: [

      {
        orient: 'vertical',
        textStyle: {
          color: '#DDEFFF',
          fontFamily: 'SourceHanSansCN-Regular',
          fontSize: 12,
        },
        right: 0,
        top: 'center',
        align: 'left',
        itemWidth: 10,
        itemHeight: 10,
        data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
        formatter: (name) => {
          for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
            if (name === safetyOption.series[0].data[i].name) {
              return `${name} \t  ${safetyOption.series[0].data[i].value}`;
            }
          }
        },
      },
    ],
    series: [
      {
        name: '道路统计',
        type: 'pie',
        radius: ['50%', '65%'],
        // emphasis: { // 设置高亮时显示标签
        //   label: {
        //     show: true
        //   },
        //   // scale: true, // 设置高亮时放大图形
        //   // scaleSize: 20
        // },
        label: {
          show: false,
        },
        // selectedMode: 'single',
        data: safetyData,
        itemStyle: {
          normal: {
            color: (color) => {
              const colorList = legendColor || [
                '#98D8CA',
                '#9494FF',
                '#2A43FF',
                '#FFD39F',
                '#9D5F8B',
                '#ADDE81',
                '#F8EBA2',
                '#5F8EFD',
                '#2BB4D3',
                '#1488C8',
              ];
              return colorList[color.dataIndex];
            },
          },
        },
      },
    ],
  };
  
  let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 
  useEffect(() => {
    let myChart = echarts.init(chartRef.current);
    const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
      for(var idx in safetyOption.series[0].data)
        // 遍历饼图数据，取消所有图形的高亮效果
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: idx
        });
      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: currentIndex,
      // });
    }
    const selectPie=() =>{ // 高亮效果切换到下一个图形
      var dataLen = safetyOption.series[0].data.length;
      currentIndex = (currentIndex + 1) % dataLen;
      highlightPie();
    }
    let changePieInterval = setInterval(selectPie, 1000);
      
    myChart.onChartReady = (instance) => {
      chartRef.current.safetyChart = instance;
    }
    myChart.setOption(safetyOption);
    return ()=>{
      clearInterval(changePieInterval)
    }
}, []);

  return (
    <div className='build-left-bottom'>
      <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
    </div>
  );
}
export default Leftbottom