import React, { useState, useEffect,useMemo,useRef } from 'react'
import { Table, Tabs,Modal,message,Tooltip } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import Draggable from 'react-draggable';
import { httpget, httpget2, httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl';
import ShenYa from '../../Home/MapCtrl/Pops/ShenYa/index';
import ShenLiu from '../../Home/MapCtrl/Pops/ShenLiu/index.js';
import WeiYi from '../../Home/MapCtrl/Pops/WeiYi/index.js';
import DuanMian from '../../Home/MapCtrl/Pops/DuanMian/index.js';
import TuLi from '../../Home/TuLi/Tuli6.js';
import './index.less'


export default function Page({isHome}) {
  const dispatch = useDispatch();
  const [shouqi,setShouQi] = useState(false)
  const [syList,setSyList] = useState([])
  const [slList,setSlList] = useState([])
  const [wyList,setWyList] = useState([])
  const [dmList,setDmList] = useState([])
  const [openSy, setOpenSy] = useState(false)
  const [openSl, setOpenSl] = useState(false)
  const [openWy, setOpenWy] = useState(false)
  const [openDm, setOpenDm] = useState(false)
  const myWidth = window.innerWidth
  const myHeight = window.innerHeight

  const [modalData, setModalData] = useState({})


  const columnsSy = [
    { title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true },
    { title: '所属断面', key: 'profileName', dataIndex: 'profileName',width: 110,align: "center", ellipsis: true },
    { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 110, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> },
    { title: '管水位(m)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true,  render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div>  },
  ]

  const columnsSl = [
    { title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true },
    { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> },
    { title: '渗流量(L/s)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div>   },
  ]

  const columnsWy = [
    { title: '监测点', key: 'cd', dataIndex: 'cd',align: "center",width: 80, ellipsis: true },
    { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 80, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}><div>{v?.slice(5,10)}</div><div>{v?.slice(11,16)}</div></div> },
    { title: <div><div>e方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v}</div> },
    { title: <div><div>n方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v}</div> },
    { title: <div><div>u方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v}</div> },
  ]


  useEffect(()=>{
    getSyData()
    getSlData()
    getWyData()
    getDmData()
  },[])

  const getSyData = async()=>{
    const {code, data} = await httpget2(apiurl.home.sy)

    if(code!==200){
      return
    }
    setSyList(data||[])
  }

  const getSlData = async()=>{
    const {code, data} = await httpget2(apiurl.home.sl)
    if(code!==200){
      return
    }

    setSlList(data||[])
  }

  const getWyData = async()=>{
    const {code, data} = await httpget2(apiurl.home.wy)
    if(code!==200){
      return
    }
    setWyList(data||[])
  }

  const getDmData = async()=>{
    const {code, data} = await httppost2(apiurl.home.dmList)
    if(code!==200){
      return
    }
    console.log('断面',data)
    setDmList(data)
  }

   
  return (
    <div className='gcaqjc_bzt'>
      <TransformWrapper
        limitToBounds={false}
        initialScale={0.7}
        initialPositionX={((myWidth-660)/2)-(isHome?450:750)}
        initialPositionY={((myHeight-60)/2)-(isHome?500:430)}
        maxScale={100}
        minScale={0.5}
      >
        <TransformComponent>
          <div style={{width:'calc( 100vw - 320px)',height:'calc( 100vh - 85px)',position:'relative'}}>
            <img width={1500} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/bzt6.svg`} alt="" id="img" draggable="false" />
            {
              syList.map((item)=>
                <div className={'gcaqjc_bzt_sy_'+item.stationCode} onClick={()=>{
                  debugger
                  setOpenSy(true)
                  setModalData(item)
                }}>
                  <span>{item.stationCode}</span>
                  <img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status===1?'sy2.png':'sy.png'}`} alt="" id="img" draggable="false" />
                </div>
              )
            }
            {
              slList.map((item)=>
                <div className={'gcaqjc_bzt_sl_'+item.stationCode} onClick={()=>{
                  setOpenSl(true)
                  setModalData(item)
                }}>
                  <span>{item.stationCode}</span>
                  <img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status===1?'sl2.png':'sl.png'}`} alt="" id="img" draggable="false" />
                </div>
              )
            }
            {
              wyList.map((item)=>
                <div 
                  className={'gcaqjc_bzt_wy_'+item.stationCode} 
                  onClick={()=>{
                    setOpenWy(true)
                    setModalData(item)
                  }}
                >
                  <span>{item.stationCode}</span>
                  <img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${(item.xstatus===1||item.ystatus===1||item.hstatus===1)?'wy2.png':'wy.png'}`} alt="" id="img" draggable="false" />
                </div>
              )
            }
          </div>
        </TransformComponent>
      </TransformWrapper>
      {
        !isHome?
        <div className='gcaqjc_bzt_rightBox' style={{right:shouqi?'-404px':'4px'}}>
        <Tabs defaultActiveKey="1" style={{padding:'0 5px 5px 5px'}} centered>
          <Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>渗压监测</div>} key="1">
            <div className='gcaqjc_bzt_rightBox_table'>
              <Table rowKey="stationCode"
                  sticky
                  columns={columnsSy}
                  pagination={false}
                  dataSource={syList}
                  scroll={{ y: "650px"}}
                  onRow={
                      (data)=>({
                          onClick:()=>{
                            setOpenSy(true)
                            setModalData(data)
                          }
                      })
                  }
              />
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>渗流监测</div>} key="2">
            <div className='gcaqjc_bzt_rightBox_table'>
              <Table rowKey="stationCode"
                  sticky
                  columns={columnsSl}
                  pagination={false}
                  dataSource={slList}
                  scroll={{ y: "650px"}}
                  onRow={
                      (data)=>({
                          onClick:()=>{
                            setOpenSl(true)
                            setModalData(data)
                          }
                      })
                  }
              />
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>位移监测</div>} key="3">
            <div className='gcaqjc_bzt_rightBox_table'>
              <Table rowKey="stationCode"
                  sticky
                  columns={columnsWy}
                  // pagination={false}
                  dataSource={wyList}
                    pagination={{ 
                    pageSize: 100,
                    showSizeChanger: true,
                    pageSizeOptions: [ '100', '200'],
                  }}
                  scroll={{ y: "650px"}}
                  onRow={
                      (data)=>({
                          onClick:()=>{
                            setOpenWy(true)
                            setModalData(data)
                          }
                      })
                  }
              />
            </div>
          </Tabs.TabPane>
        </Tabs>
        <div className='gcaqjc_bzt_rightBox_Btn'>
          <img src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/shouqi.png`} alt="" onClick={()=>setShouQi(!shouqi)}/>
        </div>
        </div>:null
      }

      <div style={{position:'absolute',left:'30px',top:'calc( 100vh - 300px )'}}>
          <TuLi/>
      </div>

      <Modal width={1000} wrapClassName='home_modal'  bodyStyle={{padding:0}}  title={null} closable={false} footer={null} open={openSy} onCancel={()=>setOpenSy(false)} destroyOnClose={true}>
        <ShenYa id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenSy(false)}/>
      </Modal>
      <Modal width={1000} wrapClassName='home_modal'  bodyStyle={{padding:0}}  title={null} closable={false} footer={null} open={openSl} onCancel={()=>setOpenSl(false)} destroyOnClose={true}>
        <ShenLiu id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenSl(false)}/>
      </Modal>
      <Modal width={1000} wrapClassName='home_modal'  bodyStyle={{padding:0}}  title={null} closable={false} footer={null} open={openWy} onCancel={()=>setOpenWy(false)} destroyOnClose={true}>
        <WeiYi id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenWy(false)}/>
      </Modal>
      <Modal width={1000} wrapClassName='home_modal'  bodyStyle={{padding:0}}  title={null} closable={false} footer={null} open={openDm} onCancel={()=>setOpenDm(false)} destroyOnClose={true}>
        <DuanMian id={modalData.profileCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenDm(false)}/>
      </Modal>
    </div>
  )
}