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 { showData, bzData } from './constatData'
import {Typography,makeStyles} from '@material-ui/core';
import './index.less'
const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    backgroundColor: 'transparent',
    color: '#fff'
  },
  tabs: {
    borderBottom: '1px solid rgba(255, 255, 255, 0.12)',
    '& .MuiTab-root': {
      color: '#fff',
      '&.Mui-selected': {
        color: '#2196f3'
      }
    },
    '& .MuiTabs-indicator': {
      backgroundColor: '#2196f3'
    }
  },
  table: {
    backgroundColor: 'transparent',
    '& .MuiTableCell-root': {
      color: '#fff',
      borderColor: 'rgba(255, 255, 255, 0.12)'
    }
  },
  statsContainer: {
    marginTop: theme.spacing(2),
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    borderRadius: theme.shape.borderRadius,
    padding: theme.spacing(2)
  },
  statsRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing(1)
  },
  warningCell: {
    backgroundColor: 'rgba(156, 39, 176, 0.3)'
  },
  yearLabel: {
    backgroundColor: '#1976d2',
    padding: '2px 2px',
    borderRadius: 12,
    fontSize: '0.75rem'
  },
  title: {
    color: '#1976d2',
    marginBottom: theme.spacing(2),
    marginTop: 10,
    marginLeft:20,
    display: 'flex',
    alignItems: 'center',
    '&::before': {
      content: '""',
      width: 4,
      height: 16,
      backgroundColor: '#1976d2',
      marginRight: theme.spacing(1),
    },
  },
}));

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, type) => {
    toggleStType(type)
    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 classes = useStyles();

    const [type, setType] = useState('fx')
  
  const toggleStType = (type) => {

     setType(type)
    
  }
const householdData = [
  {
    owner: '张时',
    population: 4,
    elevation: 125.6,
    area: 86.5
  },
  {
    owner: '李自才',
    population: 3,
    elevation: 126.2,
    area: 92.3
  },
  {
    owner: '王德军',
    population: 5,
    elevation: 124.8,
    area: 110.5
  },
  {
    owner: '赵小明',
    population: 2,
    elevation: 125.9,
    area: 75.8
  },
  {
    owner: '陈龙',
    population: 6,
    elevation: 126.5,
    area: 135.2
  },
  {
    owner: '刘包',
    population: 4,
    elevation: 125.3,
    area: 95.6
  },
  {
    owner: '孙有才',
    population: 3,
    elevation: 124.5,
    area: 82.4
  },
  {
    owner: '周德佩',
    population: 5,
    elevation: 126.8,
    area: 115.7
  }
];
  const toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }
  useEffect(() => {
    return () => {
      dispatch.runtime.setShksh(undefined)
    }
  }, [])

  return (
    <PanelBox
      style={style}
      title=""
      color="green"
      tabs={
        <span className="button-group">
          <span className={clsx({ active: type == 'fx'  })} onClick={() => toggleStType('fx')}>风险网格</span>
          <span className={clsx({ active: type == 'jg'  })} onClick={() => toggleStType('jg')}>结构化预案</span>
        </span>
      }
      extra={
        <>
          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
        </>
      }
    >
      {type == 'fx' ?   <Typography variant="h7" className={classes.title}>
              山洪灾害防治区及重点防治区内需转移人员基本情况
            </Typography> : null}
      {
        type == 'fx' ?
          <>
            <TableContainer style={{ height: '50%' }}>
              <Table size="small" stickyHeader>
                <TableHead>
                  <TableRow>
                    <DpTableCell style={{ width: '25%' }} align="center">户主</DpTableCell>
                    <DpTableCell style={{ width: '25%' }} align="center">家庭人口</DpTableCell>
                    <DpTableCell align="center" style={{ width: '25%' }}>宅基高程(m)</DpTableCell>
                    <DpTableCell align="center" style={{ width: '25%' }}>房屋面积(m²)</DpTableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {householdData.map((row) => (
                    <DpTableRow key={row.id} onClick={() => flyTo(row, 'bz')}>
                      <DpTableCell align="center">
                        {row.owner}
                      </DpTableCell>
                      <DpTableCell align="center">
                        {row.population}
                      </DpTableCell>
                       <DpTableCell align="center">
                        {row.elevation}
                      </DpTableCell>
                      <DpTableCell align="center">{row.area}</DpTableCell>
                    </DpTableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
            <Typography variant="h7" className={classes.title}>
              风险统计
            </Typography>
            <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', columnGap: 40 }}>
              <div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
                <div className="value" style={{ color: '#5ecd45' }}>35</div>
                <div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区面积</div>
              </div>
              <div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
                <div className="value" style={{ color: '#5ecd45' }}>35</div>
                <div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区户数</div>
              </div>
              <div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
                <div className="value" style={{ color: '#5ecd45' }}>35</div>
                <div className="key" style={{ color: '#fff', fontSize: 16 }}>风险点(个)</div>
              </div>
              <div style={{ padding: 10, width: 130, background: "linear-gradient(to bottom, #001529, #003366)" }}>
                <div
                  className="value"
                  style={{ cursor: 'pointer', color: '#5ecd45' }}
                >
                  15
                </div>
                <div className="key" style={{ color: '#fff', fontSize: 16 }}>危险区人口(人)</div>
              </div>
            </div>
          </>
          :  <div className="basic-info">
      <div className="section-title">基本情况</div>
      <div className="info-content">
        <div className="info-row">
          <div className="info-item">
            <span className="label">威胁对象：</span>
            <span className="value">18</span>
          </div>
          <div className="info-item">
            <span className="label">威胁人口：</span>
            <span className="value">75</span>
          </div>
        </div>
        <div className="info-item">
          <span className="label">安置点：</span>
          <span className="value">2组,3组</span>
        </div>

        <div className="divider"></div>

        <div className="section-title">预警指标</div>
        <div className="warning-item">
          <span className="label">准备转移：</span>
          <span className="value">1小时-mm; 3小时-mm; 6小时-mm</span>
        </div>
        <div className="warning-item">
          <span className="label">立即转移：</span>
          <span className="value">1小时-mm; 3小时-mm; 6小时-mm</span>
        </div>

        <div className="divider"></div>

        <div className="section-title">防汛值班电话</div>
        <div className="phone-item">
          <div className="label">市汛期值班电话：</div>
        </div>
        <div className="phone-item" style={{display:'flex'}}>
          <div className="label">县汛期值班电话：</div>
          <a href="tel:0718-3225026" className="phone-number">0718-3225026</a>
        </div>
      </div>
    </div>
      }
      {/* {
        setting && <Setting onClose={() => showSetting(false)} />
      } */}
    </PanelBox>
  )
}

export default HDReal;