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 [filteredWyList, setFilteredWyList] = useState([])  // 添加过滤后的位移列表状态
  const [showAllWyData, setShowAllWyData] = 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>
      render: (v, row) => <div>{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>
      render: (v, row) => <div>{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>
      render: (v, row) => <div>{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>
      render: (v, row) => <div>{v}</div>
    },
  ]

  const columnsWy = [
    { title: '监测点', key: 'cdnm', dataIndex: 'cdnm', align: "center", width: 150, 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>
      render: (v, row) => <div><div>{v?.slice(5, 10)}</div><div>{v?.slice(11, 16) || '-'}</div></div>
    },
    {
      title: <div><div>x方向</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 !== null ? v : '-'}</div>
      render: (v, row) => <div>{v !== null ? v : '-'}</div>
    },
    {
      title: <div><div>y方向</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 !== null ? v : '-'}</div>
      render: (v, row) => <div>{v !== null ? v : '-'}</div>
    },
    {
      title: <div><div>h方向</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 !== null ? v : '-'}</div>
      render: (v, row) => <div>{v !== null ? 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
    }
    const list = data?.map((item) => ({ ...item, stationCode: item.cd }))
    setWyList(list || [])

    // 过滤符合条件的数据：监测点为ZY开头且有监测时间和x、y、h方向的值
    const filtered = list?.filter(item =>
      item.de ||
      item.dn ||
      item.du
    ) || []
    setFilteredWyList(filtered)
  }

  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={() => {
                  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.cdnm}
                  onClick={() => {
                    setOpenWy(true)
                    setModalData(item)
                  }}
                >
                  <span>{item.cdnm}</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={showAllWyData ? wyList : filteredWyList}
                    // pagination={{ 
                    //   pageSize: 100,
                    //   showSizeChanger: true,
                    //   pageSizeOptions: [ '100', '200'],
                    // }}
                    scroll={{ y: "650px" }}
                    onRow={
                      (data) => ({
                        onClick: () => {
                          setOpenWy(true)
                          setModalData(data)
                        }
                      })
                    }
                  />
                  <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
                    <a onClick={() => setShowAllWyData(!showAllWyData)}>
                      {showAllWyData ? '收起更多信息' : '更多信息'}
                    </a>
                  </div>
                </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>
  )
}