import React, { useEffect, useState, useMemo } from 'react'
import { useNavigate } from 'react-router';
import {
  RightCircleFilled, LeftCircleFilled, BarsOutlined
} from '@ant-design/icons';
import autofit from 'autofit.js'
import Zmjk from "./zmjk"
import './index.less'
import ReactEcharts from 'echarts-for-react';
import options from './options'
import clsx from 'clsx';
import { Empty } from 'antd';
import { httpget2, httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl';
import { useDispatch, useSelector } from 'react-redux';
import HFivePlayer from '../../components/video1Plary';
import moment from 'moment';
import { loadMenu, loadRole } from '../../models/auth/_'
const MenuTitleCard = ({ key, title }) => {
  return (
    <div className='menuItem_style' key={key} title={title}>
      {title}
    </div>
  )
}
export default function Home() {
  const menu = useSelector((state) => state.auth.menu);
  const [title, setTitle] = useState([])
  const [showTabLeft, setShowTabLeft] = useState(false)
  const [showTabRight, setShowTabRight] = useState(false)
  // const title = menu.map(item => ({ title: item.menuName, key: item.path || item.redirect }))
  const jcdType = {
    0: "闸后流量",
    2: '闸前水位',
    3: '闸后水位'
  }
  const types1 = {
    0: "闸后流量(m³/s)",
    1: '闸前水位(m)',
    2: '闸后水位(m)',
    3: '雨量(mm)',
  }
  const runData = [
    {
      name: '闸后流量(m³/s)',
      value: '',
      time: ''
    },
    {
      name: '闸前水位(m)',
      value: '',
      time: ''
    },
    {
      name: '闸后流量(m)',
      value: '',
      time: ''
    },
    {
      name: '雨量(mm)',
      value: '',
      time: ''
    }
  ]
  const [RealData, setRealData] = useState(runData)
  // 实时数据
  const getRealData = async () => {
    try {
      const res = await httppost2(apiurl.jcsj.jcsj.realData)
      if (res.code == 200) {
        const uptData = res.data.map(item => ({
          ...item,
          name: types1[item.type],
          value: item.val,
          time: item.tm
        }))
        setRealData(uptData)
        getHistoryData(uptData[0])
      }
    } catch (error) {
      console.log(error);
    }
  }

  const [historyList, setHistoryList] = useState([])

  const pxOptions = useMemo(() => {
    if (historyList) {
      return options(historyList)
    } else {
      return options([])
    }
  }, [historyList])

  const getHistoryData = async (val) => {
    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
    const end = moment().format('YYYY-MM-DD 23:59:59')
    let params = {
      pageSo: {
        pageSize: 999,
        pageNumber: 1
      },
      type: val.type,
      dateTimeRangeSo: {
        start,
        end
      }
    }
    try {
      const res = await httppost2(apiurl.jcsj.jcsj.historyList, params)
      if (res.code == 200) {
        setHistoryList(res.data)
      }
    } catch (error) {
      console.log(error);
    }
  }
  //安全监测数据 
  const [safeData, setSafeData] = useState([])
  const getSafeData = async () => {
    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
    const end = moment().format('YYYY-MM-DD 23:59:59')
    let params = {
      pageSo: {
        pageSize: 999,
        pageNumber: 1
      },
      dateTimeRangeSo: {
        start,
        end
      }
    }
    try {
      const res = await httppost2(apiurl.aqjc.syjc.page, params)
      if (res.code == 200) {
        setSafeData(res.data?.records)
      }
    } catch (error) {
      console.log(error);
    }
  }
  //操作日志 
  const [operateData, setOperateData] = useState([])
  const getLogData = async () => {
    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
    const end = moment().format('YYYY-MM-DD 23:59:59')
    let params = {
      pageSo: {
        pageSize: 999,
        pageNumber: 1
      },
      dateTimeRangeSo: {
        start,
        end
      }
    }
    try {
      const res = await httppost2(apiurl.gcyx.czrz.page, params)
      if (res.code == 200) {
        setOperateData(res.data?.records)
      }
    } catch (error) {
      console.log(error);
    }
  }

  //报警信息
  const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
  const getPoliceData = async (val) => {
    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
    const end = moment().format('YYYY-MM-DD 23:59:59')
    let params = {
      pageSo: {
        pageSize: 999,
        pageNumber: 1
      },
      dateTimeRangeSo: {
        start,
        end
      }
    }
    try {
      const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page, params)
      if (res.code == 200) {
        setPoliceData(res.data.records)
      }
    } catch (error) {
      console.log(error);
    }
  }


  const navigate = useNavigate();
  const jumpMenu = (item) => {
    navigate(item.key)
  }
  const [videoList, setVideoList] = useState([])
  const [videoArr, setvideoArr] = useState({})
  const [index, setIndex] = useState(0)

  // 获取视频列表
  const getVideoList = async () => {
    try {
      const res = await httppost2(apiurl.home.videoList, { valveCode: "HP0024208020000063" })
      setVideoList(res.data)
      getVideoSrc(res.data[0].indexCode)
    } catch (error) {
      console.log(error);
    }
  }
  // 获取视频流
  const getVideoSrc = async (current) => {
    const res = await httpget2(`${apiurl.home.videosrc}${current}`)
    if (res.code == 200 && res.data?.length !== 0) {
      // setvideoArr({src:'ws://223.76.234.232:559/openUrl/7WKpEbu'})
      setvideoArr({ src: res.data })
    } else {
      setvideoArr({})
    }
  }


  const delClick = () => {
    let idx = index - 1
    setIndex(idx)
    getVideoSrc(videoList[idx].indexCode)
  }
  const addClick = () => {
    let idx = index + 1
    setIndex(idx)
    getVideoSrc(videoList[idx].indexCode)
  }


  // 获取菜单
  const getMenu = async () => {
    try {
      const data = await loadMenu();
      setTitle(data.map(item => ({ title: item.menuName, key: item.path || item.redirect })))
    } catch (error) {
      console.log(error);
    }
  }
  const [activeOne, setActiveOne] = useState(0)
  useEffect(() => {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: '#daping-body',
      resize: true
    })
    getVideoList()
    getRealData()
    getLogData()
    getPoliceData()
    getMenu()
    getSafeData()
  }, [])

  return (
    <div className='daping-body' id='daping-body'>
      <div className='topMenu'>
        <div className='title'></div>
        <div className='title_name'></div>
        {title.map((item, i) => (
          <div key={item.key} className={'styles' + i} onClick={() => jumpMenu(item)} style={{ cursor: 'pointer' }}>
            <MenuTitleCard title={item.title} />
          </div>
        ))}
      </div>
      <div className='content-box'>
        <Zmjk water={ RealData.find(item => item?.type == 2)} />
      </div>
      {showTabLeft &&
        <div
          style={{ left: 0 }}
          className='shouqi-icon'
          onClick={() => setShowTabLeft(false)}
        ><BarsOutlined style={{ color: "#fff" }} />
        </div>}
      {!showTabLeft &&
        <div className='content-left'>
          {/* 工程简介 */}
          <div className='project-introduce'>
            <div className='project-title'>工程简介</div>
            <div className='project-content'>
              <img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/them.jpg`}></img>
              盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
              业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
            </div>
          </div>
          {/* 运行监测数据 */}
          <div className='runWatch'>
            <div
              style={{ right: '-23px', top: '50%' }}
              className='shouqi-icon'
              onClick={() => setShowTabLeft(true)}
            ><BarsOutlined style={{ color: "#fff" }} />
            </div>
            <div className='project-title'>运行监测数据</div>
            <div className='project-content'>
              {RealData.map((item, i) => (
                <div className={clsx({ 'run_list': true, active: activeOne == i })} key={item.name} onClick={() => { setActiveOne(i); getHistoryData(item) }}>
                  <span style={{ width: 94 }}>{item.name}</span>
                  <span>{item.value}</span>
                  <span>{item.time}</span>
                </div>
              ))}
              <div className='run_chart'>
                {historyList.length > 0 ?
                  <ReactEcharts
                    option={pxOptions || {}}
                    style={{ width: "100%", height: '100%' }}
                    notMerge={true}
                  />
                  : <Empty style={{ marginTop: 20 }} />
                }
              </div>
            </div>
          </div>
          {/* 安全监测数据 */}
          <div className='safeWatch'>
            <div className='project-introduce'>
              <div className='project-title'>安全监测数据</div>
              <div className='project-content'>
                <table style={{ width: '100%' }}>
                  <thead>
                    <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
                      <th>测点编号</th>
                      <th style={{ width: 90 }}>水位高程(m)</th>
                      <th>水压(KPa)</th>
                      <th style={{ width: 137 }}>监测时间</th>
                    </tr>
                  </thead>
                  <tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
                    {safeData.length > 0 ? safeData.map((item, i) => (
                      <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                        <td>{item.stationCode}</td>
                        <td>{item.waterEle}</td>
                        <td>{item.press}</td>
                        <td style={{ width: 137 }}>{item.tm}</td>
                      </tr>
                    )) : <Empty />
                    }
                  </tbody>

                </table>
              </div>
            </div>
          </div>
        </div>}
      {showTabRight &&
        <div
          style={{ right: 0, }}
          className='shouqi-icon'
          onClick={() => setShowTabRight(false)}
        >
          <BarsOutlined style={{ color: "#fff" }} /></div>}
      {
        !showTabRight &&
        <div className='content-right'>
          {/* 操作日志 */}
          <div className='operate-log'>
            <div className='project-title'>操作日志</div>
            <div className='project-content'>
              <table style={{ width: '100%' }}>
                <thead>
                  <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
                    <th>闸孔编号</th>
                    <th>操作内容</th>
                    <th>操作人员</th>
                    <th style={{ width: 137 }}>操作时间</th>
                  </tr>
                </thead>
                <tbody style={{ height: 170, overflow: operateData.length > 6 ? 'scroll' : 'hidden' }}>
                  {operateData.length > 0 ? operateData.map((item, i) => (
                    <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                      <td>{item.gatePoreCode}</td>
                      <td>{item.opContent}</td>
                      <td>{item.createUserName}</td>
                      <td style={{ width: 137 }}>{item.createTime}</td>
                    </tr>
                  )) : <Empty />
                  }
                </tbody>

              </table>
            </div>
          </div>
          {/* 报警信息 */}
          <div className='operate-log'>
            <div
              style={{ left: '-23px', top: '50%' }}
              className='shouqi-icon'
              onClick={() => setShowTabRight(true)}
            >
              <BarsOutlined style={{ color: "#fff" }} /></div>
            <div className='project-title'>报警信息</div>
            <div className='project-content'>
              <table style={{ width: '100%' }}>
                <thead>
                  <tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
                    <th>监测点</th>
                    <th>监测值</th>
                    <th style={{ width: 58 }}>阈值下限</th>
                    <th style={{ width: 60 }}>阈值上限</th>
                    <th style={{ width: 129 }}>报警时间</th>
                  </tr>
                </thead>
                <tbody style={{ height: 170, overflow: policeData.length > 6 ? 'scroll' : 'hidden' }} >
                  {policeData.length > 0 ? policeData.map((item, i) => (
                    <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                      <td style={{ width: 58 }}>{jcdType[item.type]}</td>
                      <td>{item.val}</td>
                      <td style={{ width: 58 }}>{item.lowerLimit}</td>
                      <td style={{ width: 58 }}>{item.upperLimit}</td>
                      <td style={{ width: 129 }}>{item.warnTime}</td>
                    </tr>
                  )) : <Empty />
                  }
                </tbody>

              </table>
            </div>
          </div>
          {/* 视频监控 */}
          <div className='operate-log'>
            <div className='project-title'>
              视频监控
            </div>
            <div className='project-content video-style'>
              {index !== 0 && <LeftCircleFilled className="leftIcon" onClick={() => delClick()} />}
              <HFivePlayer wsUrl={videoArr} playerID={'111'} />
              {index !== videoList.length - 1 && <RightCircleFilled className="rightIcon" onClick={() => addClick()} />}
            </div>
          </div>
        </div>
      }
    </div>
  )
}