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 './index.less'
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, 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 wgData = [
    {

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

     setType(type)
    
  }

  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' ? <div style={{color:'#fff',margin:'5px 10px'}}>山洪灾害防治区及重点防治区内需转移人员基本情况</div> : 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>
                  {[].map((row) => (
                    <DpTableRow key={row.id} onClick={() => flyTo(row, 'bz')}>
                      <DpTableCell align="center">
                        {row.pustName}
                      </DpTableCell>
                      <DpTableCell align="center">
                        {row.pustType}
                      </DpTableCell>
                      <DpTableCell align="center">{row.irrCode_dictText}</DpTableCell>
                    </DpTableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
            <div style={{ color: '#fff', margin: '5px 10px' }}>风险统计</div>
            <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;