import React, { useMemo, useState,useEffect } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';

import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import moment from 'moment';
import showData from './constant'
import ReactECharts from 'echarts-for-react';

function rzRender(rz, base) {
  return (
    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
      {typeof base === 'number' ? base.toFixed(2) : ''}
    </DpTableCell>
  );
}

function HDReal({ style }) {
  const dispatch = useDispatch();
  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
  const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
  // let { data } = useRequest(HDRealPromise.get, t);
  const [setting, showSetting] = useState(false);


 


  const flyTo = (record) => {
      dispatch.map.setLayerVisible({'TrsqLayer':true})
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: '墒情站', properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }
  const [type, setType] = useState('sc')
  const toggleStType = (type) => {
        setType(type)
  }

  const scCharts = [
    {
      name: '浮桥河水厂',
      count:18
    },
     {
      name: '三河口水厂',
      count:10
    },
     {
      name: '刘集水厂',
      count:5
    },
     {
      name: '杉林河水厂',
      count:7
    },
     {
      name: '群英水厂',
      count:8
    }
  ]
  const xzCharts = [
    {
      name: "福田镇",
      count:13
    },
    {
      name: "龙池桥镇",
      count:10
    },
    {
      name: "木子店镇",
      count:16
    },
    {
      name: "宋埠镇",
      count:12
    },
    {
      name: "黄土岗镇",
      count:4
    },
    {
      name: "铁门岗镇",
      count:8
    }
  ]

   const [list, setList] = useState([])
    useEffect(() => {
      const newArr = type == 'sc' ? scCharts :xzCharts;
      setList(newArr)
    }, [type])
  
const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['数量分布', '里程分布'],
      textStyle: {
        color: '#fff'
      },
      top: 10
    },
  grid: {
      top:'13%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: list.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff',
        interval: 0,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '数量',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255,0.2)'
        }
      }
    },
    series: [
      {
        name: type == 'sc' ?'水厂':'乡镇',
        type: 'bar',
        data: list.map(item => item.count),
        itemStyle: {
          color: '#36a4eb'
        },
        barWidth: '20%'
      },
      // {
      //   name: '里程分布',
      //   type: 'bar',
      //   data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
      //   itemStyle: {
      //     color: '#4b5cc4'
      //   },
      //   barWidth: '20%'
      // }
    ]
  };


  return (
    <PanelBox
      style={style}
      title="爆管统计"
      color="green"
       tabs={
        <span className="button-group">
          <span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
          <span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
        </span>
      }
    >
       <ReactECharts
      option={option}
      style={{ height: '400px', width: '100%' }}
    />
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;