import React, { useMemo, useState } 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 clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';

const data = [
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181105000",
      "town_nm": "阎家河镇",
      "res_cd": "42118140028",
      "res_nm": "红心水库",
      "res_lon": 115.18962,
      "res_lat": 31.23425,
      "video_guid": "00032e3e6d984f0eb32c807e5769ec3a",
      "video_name": "红心水库坝脚球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181001000",
      "town_nm": "龙池办事处",
      "res_cd": "42118150152",
      "res_nm": "戴家冲水库",
      "res_lon": 115.0241,
      "res_lat": 31.23237,
      "video_guid": "0037a5cb2caf44e49c012e3fdfa01238",
      "video_name": "戴家冲水库_坝顶_枪机_龙池",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181101000",
      "town_nm": "宋埠镇",
      "res_cd": "42118140008",
      "res_nm": "管山水库",
      "res_lon": 114.78397,
      "res_lat": 31.19451,
      "video_guid": "0243e9726e244b728618741f248e0577",
      "video_name": "管山水库坝脚球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181100000",
      "town_nm": "中馆驿镇",
      "res_cd": "42118140005",
      "res_nm": "响鼓墩水库",
      "res_lon": 114.91971,
      "res_lat": 31.17985,
      "video_guid": "024eaf5578464d9192559ad2288ba764",
      "video_name": "响鼓墩水库",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "res_cd": "42118150147",
      "res_nm": "张家河水库",
      "res_lon": 115.17869,
      "res_lat": 31.48587,
      "video_guid": "02d77364354a4f8982ad3d949e0d32ab",
      "video_name": "张家河水库_坝脚_球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181114000",
      "town_nm": "顺河镇",
      "res_cd": "42118150048",
      "res_nm": "孙家榜水库",
      "res_lon": 114.91758,
      "res_lat": 31.26933,
      "video_guid": "03059577c270432bb7338e7f714b9a01",
      "video_name": "孙家塝水库",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181110000",
      "town_nm": "三河口镇",
      "res_cd": "42118150145",
      "res_nm": "袁家冲水库",
      "res_lon": 115.28076,
      "res_lat": 31.28639,
      "video_guid": "031ac395df964414a17f9dc996e13d57",
      "video_name": "袁家冲水库视频站",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181003000",
      "town_nm": "南湖办事处",
      "res_cd": "42118140003",
      "res_nm": "毛家冲水库",
      "res_lon": 114.98531,
      "res_lat": 31.20469,
      "video_guid": "036b290ac8e547a79f5835754e02772c",
      "video_name": "毛家冲水库溢洪道",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181102000",
      "town_nm": "歧亭镇",
      "res_cd": "42118150224",
      "res_nm": "兴隆寺水库",
      "res_lon": 114.69534,
      "res_lat": 31.01031,
      "video_guid": "0385335df9c64c1f8972cf3ed17b4854",
      "video_name": "兴隆寺水库_坝脚_球机",
      "online": "1",
      "sys_resource": 2
  },
  {
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181100000",
      "town_nm": "中馆驿镇",
      "res_cd": "42118150094",
      "res_nm": "西冲水库",
      "res_lon": 114.94118,
      "res_lat": 31.06765,
      "video_guid": "046336873b8a4eefbc321bd2e6e4359c",
      "video_name": "西冲水库",
      "online": "1",
      "sys_resource": 2
  },
]

function DrpReal({ style }) {
  const [tab,setTab] = useState('1')

  return (
    <PanelBox
      style={style}
      title="视频监测"
      color="green"
    >
      <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ maxWidth: '20%' }} align="center">序号</DpTableCell>
              <DpTableCell style={{ maxWidth: '20%' }} align="center">水库名称</DpTableCell>
              <DpTableCell style={{ maxWidth: '20%' }} align="center">行政区</DpTableCell>
              <DpTableCell style={{ maxWidth: '20%' }} align="center">状态</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((row,index) => (
              <DpTableRow key={row.stcd}>
                <DpTableCell align="center">{index+1}</DpTableCell>
                <DpTableCell align="center">{row.res_nm}</DpTableCell>
                <DpTableCell align="center">{row.town_nm}</DpTableCell>
                <DpTableCell align="center">{row.online==='1'?
                  <span style={{color:'#3af6cd',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#3af6cd'}}></div>在线</span>
                  :<span style={{color:'#eeeeee',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#eeeeee'}}></div>离线</span>
                }</DpTableCell>
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </PanelBox>
  )
}

export default DrpReal;