import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select } from 'antd';
import moment from 'moment'
import ReactECharts from 'echarts-for-react';
import General from '../components/realTime/general';
import LineBoxStatus from '../components/electrity/lineBoxStatus';
import SoftStart from '../components/realTime/softStart';
import Below from '../components/realTime/below';
import RunTime from '../components/realTime/runTime';
import AccumulateTime from '../components/realTime/accumulateTime';

const RealTime = ({ dispatch, actions, user, siteList, }) => {

   const { bigScreen } = actions
   const [pageLeft, setPageLeft] = useState(0)  //左边翻页
   const [pageRight, setPageRight] = useState(0)  //左边翻页
   const [pumpList, setPumpList] = useState([])    //水泵列表
   const [cabinetList, setCabinetList] = useState([])    //水泵列表
   const [strucId, setStrucId] = useState() //站点ID
   const [pumpId, setPumpId] = useState() //水泵id
   const [cabinetId, setCabinetId] = useState() //进线柜id
   const [usePumpId, setUsePumpId] = useState() //水泵id
   const [voltagePumpId, setVoltagePumpId] = useState([]) //水泵电压id
   const [pumpOne, setPumpOne] = useState({ data: [] })  //单个水泵数据
   const [voltagepump, setVoltagePump] = useState([])  //单个水泵数据

   const [cabinetOne, setCabinetOne] = useState({ data: [] })  //单个进线柜数据
   const [cabinetData, setCabinetData] = useState([])   //进线柜数据
   const [centreData, setCentreData] = useState({})   //中间数据
   const [depthWater, setDepthWater] = useState([]) //液位趋势
   const [electricityTrend, setElectricityTrend] = useState([])   //电流趋势
   const [useTrend, setUseTrend] = useState([])   //用电趋势
   const [stations, setStations] = useState({})  //测点id
   const [softStartData, setSoftStartData] = useState([])  //软启动总用电数据
   const [electro, setElectro] = useState({ week: 0, year: 0, day: 0 })  //用电概况
   const [level, setLevel] = useState(0)  //实时液位




   useEffect(() => {
      setStrucId(siteList[0]?.value)
   }, [siteList])

   useEffect(async () => {
      if (strucId) {
         let station = {}
         let week = 0  //本周
         let year = 0  //年
         let day = 0  //今日
         await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${strucId}/factors` })).then(async r => {
            if (r.success) {
               //水泵信息
               let waterId = r.payload.data?.find(v => v.name == '泵站水泵')?.id
               if (waterId) {
                  await dispatch(bigScreen.axyData({
                     type: 'get', url: `structures/${strucId}/stations`,
                     params: { query: { factorId: waterId } }
                  })).then(async p => {
                     if (p.success) {
                        let dataId = p.payload.data[0]?.groups[0]?.stations?.map(k => k.id) || []
                        station.pump = dataId
                        // let voltageId =[]

                        // setPumpList(p.payload.data[0]?.groups[0]?.stations)
                        // setPumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
                        // setVoltagePumpId(voltageId)
                        // setUsePumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
                        if (dataId.length) {
                           // 当前时间
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/theme/data`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    startTime: moment().startOf('day').format('YYYY/MM/DD HH:mm:ss'),
                                    endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                    limit: 1
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 setSoftStartData(d.payload.data?.stations)
                              }
                           })

                           //今天
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('day').format('x'),
                                    end: moment().endOf('day').format('x'),
                                    aggtype: "h",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations?.map(c => {
                                    c.data?.map(f => {
                                       if (!f.changData) {
                                          day += (f?.values?.eMotor_EQ || 0)
                                          week += (f?.values?.eMotor_EQ || 0)
                                          year += (f?.values?.eMotor_EQ || 0)
                                       }
                                    })
                                 })
                              }
                           })
                           //本周
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().weekday(1).startOf('day').format('x'),
                                    end: moment().weekday(7).endOf('day').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations?.map(c => {
                                    c.data?.map(f => {
                                       if (!f.changData) {
                                          week += (f?.values?.eMotor_EQ || 0)
                                       }
                                    })
                                 })
                              }
                           })
                           //今年
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('year').format('x'),
                                    end: moment().endOf('year').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations?.map(c => {
                                    c.data?.map(f => {
                                       if (!f.changData) {
                                          year += (f?.values?.eMotor_EQ || 0)
                                       }
                                    })
                                 })
                              }
                           })
                        }
                     }
                  })
               }
               // 进线柜
               let wireCabinetId = r.payload.data?.find(v => v.name == '泵站进线柜')?.id
               if (wireCabinetId) {
                  await dispatch(bigScreen.axyData({
                     type: 'get', url: `structures/${strucId}/stations`,
                     params: { query: { factorId: wireCabinetId } }
                  })).then(async p => {
                     if (p.success) {
                        let dataId = []
                        p.payload.data?.map(v => {
                           v.groups?.map(s => {
                              s.stations?.map(f => {
                                 dataId.push(f.id)
                              })
                           })
                        })
                        station.cabine = dataId
                        // setCabinetList(dataId)
                        // setCabinetId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
                        if (dataId.length) {
                           //    // 当前时间
                              await dispatch(bigScreen.axyData({
                                 type: 'get', url: `stations/theme/data`, params: {
                                    query: {
                                       stations: dataId.join(),
                                       startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                       endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                       limit: 1
                                    }
                                 }
                              })).then(d => {
                                 if (d.success) {

                                 }
                              })

                           // // 今天
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('day').format('x'),
                                    end: moment().endOf('day').format('x'),
                                    aggtype: "h",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations?.map(c => {
                                    c.data?.map(f => {
                                       if (!f.changData) {
                                          day += (f?.values?.eQF_EQ || 0)
                                          week += (f?.values?.eQF_EQ || 0)
                                          year += (f?.values?.eQF_EQ || 0)
                                       }
                                    })
                                 })
                              }
                           })
                           // // 本周
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().weekday(1).startOf('day').format('x'),
                                    end: moment().weekday(7).endOf('day').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations?.map(c => {
                                    c.data?.map(f => {
                                       if (!f.changData) {
                                          week += (f?.values?.eQF_EQ || 0)
                                       }
                                    })
                                 })
                              }
                           })
                           // // 今年
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('year').format('x'),
                                    end: moment().endOf('year').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations?.map(c => {
                                    c.data?.map(f => {
                                       if (!f.changData) {
                                          year += (f?.values?.eQF_EQ || 0)
                                       }
                                    })
                                 })
                              }
                           })

                        }
                     }
                  })
               }


               //泵站信息
               let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
               if (informationId) {
                  await dispatch(bigScreen.axyData({
                     type: 'get', url: `structures/${strucId}/stations`,
                     params: { query: { factorId: informationId } }
                  })).then(async p => {
                     if (p.success) {

                        // 液位趋势
                        await dispatch(bigScreen.axyData({
                           type: 'get', url: `stations/theme/data`, params: {
                              query: {
                                 stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
                                 startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                 endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                 limit: 1
                              }
                           }
                        })).then(d => {
                           if (d.success) {
                              setLevel(d.payload.data?.stations[0]?.data[0]?.sLiquid_level || 0)
                           }
                        })
                     }

                  })
               }
            }
         })
         setStations(station)
         setElectro({ day: day, week: week, year: year })
      }


   }, [strucId])








   // useEffect(async () => {
   //    if (pumpId) {
   //       await dispatch(bigScreen.axyData({
   //          type: 'get', url: `stations/theme/data`, params: {
   //             query: {
   //                stations: pumpId,
   //                startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
   //                endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
   //                limit: 1
   //             }
   //          }
   //       })).then(d => {
   //          if (d.success) {
   //             setPumpOne(d.payload.data?.stations[0] || { data: [] })
   //          }
   //       })

   //    }
   // }, [pumpId])

   // useEffect(async () => {
   //    if (cabinetId) {
   //       await dispatch(bigScreen.axyData({
   //          type: 'get', url: `stations/theme/data`, params: {
   //             query: {
   //                stations: cabinetId,
   //                startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
   //                endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
   //                limit: 1
   //             }
   //          }
   //       })).then(d => {
   //          if (d.success) {
   //             setCabinetOne(d.payload.data?.stations[0] || { data: [] })
   //          }
   //       })

   //    }
   // }, [cabinetId])

   // useEffect(async () => {
   //    if (voltagePumpId?.length > 0) {
   //       await dispatch(bigScreen.axyData({
   //          type: 'get', url: `stations/theme/data`, params: {
   //             query: {
   //                stations: voltagePumpId?.join(),
   //                startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
   //                endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
   //                limit: 1440
   //             }
   //          }
   //       })).then(d => {
   //          if (d.success) {
   //             setVoltagePump(d.payload.data?.stations || [])
   //          }
   //       })

   //    }
   // }, [voltagePumpId])



   return <div style={{ width: '100%', height: 'calc(100% - 200px', color: '#FFF', position: 'absolute', top: 160, left: 0 }}>
      <div style={{ width: '100%', height: "100%", position: 'relative', }}>
         <General setInterval={setInterval} stations={stations} />
         <SoftStart softStartData={softStartData} />
         <RunTime softStartData={softStartData} />
         <AccumulateTime softStartData={softStartData} />
         <Below stations={stations} level={level} />
         <div style={{
            width: 166, position: "absolute", left: '29%', top: '4%',
         }}>
            <div style={{
               backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
            }}> 本周用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.week?.toFixed(2)}</span>
            </div>
            <img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-week.png`} />
         </div>
         <div style={{
            width: 166, position: "absolute", left: '59%', top: "13%",
         }}>
            <div style={{
               backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
            }}>今年用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.year?.toFixed(2)}</span>
            </div>
            <img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-year.png`} />
         </div>
         <div style={{
            width: 166, position: "absolute", left: '31%', top: '28%',
         }}>
            <div style={{
               backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
            }}> 今日用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.day?.toFixed(2)}</span>
            </div>
            <img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-day.png`} />
         </div>
         <img style={{ width: '20%', height: '40%', position: "absolute", left: "40%", top: '3%' }} src={`/assets/images/realTime/center.png`} />
         <div className='site' style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            width: '40%', top: "calc(60% - 70px)", position: 'absolute', left: "30%"
         }}>
            <img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' />
            <div style={{
               width: 180, height: 41, backgroundImage: 'url(/assets/images/monitor/title.png)',
               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               textAlign: 'center', lineHeight: '41px', fontSize: 20, color: '#FFF', fontStyle: "italic"
            }}>{siteList?.filter(v => v.value == strucId)[0]?.label}</div>
            <Select
               showSearch
               placeholder="请选择站点"
               value={strucId}
               style={{ width: 155 }}
               optionFilterProp="children"
               onSelect={v => {
                  setStrucId(v)
               }}
               options={siteList}
            />
         </div>
      </div>

   </div >
}

function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      clientHeight: global.clientHeight,
      actions: global.actions,
   };
}

export default connect(mapStateToProps)(RealTime);