import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select } from 'antd';
import ReactECharts from 'echarts-for-react';
import moment from 'moment'

const { Option } = Select;

const General = ({ dispatch, actions, stations }) => {

   const { bigScreen } = actions
   const [electro, setElectro] = useState({ now: 0, before: 0 })  //用电概况
   const [interval, setInterval] = useState('本日')  //用电概况区间


   useEffect(async () => {
      let now = 0
      let before = 0
      let time = interval == '本日' ?
         "day" : interval == '本月' ?
            "month" : interval == '本年' ?
               "year" : ""

      let pastTime = {
         begin: interval == '本日' ?
            moment().day(moment().day() - 1).startOf(time).format('x') : interval == '本月' ?
               moment().month(moment().month() - 1).startOf(time).format('x') : interval == '本年' ?
                  moment().year(moment().year() - 1).startOf(time).format('x') : "",
         end: interval == '本日' ?
            moment().day(moment().day() - 1).endOf(time).format('x') : interval == '本月' ?
               moment().month(moment().month() - 1).endOf(time).format('x') : interval == '本年' ?
                  moment().year(moment().year() - 1).endOf(time).format('x') : "",
      }
      if (stations?.pump) {
         //现在
         await dispatch(bigScreen.axyData({
            type: 'get', url: `stations/data/theme`, params: {
               query: {
                  stations: stations?.pump.join(),
                  begin: moment().startOf(time).format('x'),
                  end: moment().endOf(time).format('x'),
                  aggtype: interval == '本日' ? "h" : "d",
                  method: 'diff'
               }
            }
         })).then(d => {
            if (d.success) {
               d.payload.data[0]?.stations?.map(c => {
                  c.data?.map(f => {
                     if (!f.changData) {
                        now += (f?.values?.eMotor_EQ || 0)
                     }
                  })
               })
            }
         })
         if (interval != '本日') {
            await dispatch(bigScreen.axyData({
               type: 'get', url: `stations/data/theme`, params: {
                  query: {
                     stations: stations?.pump.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) {
                           now += (f?.values?.eMotor_EQ || 0)
                        }
                     })
                  })
               }
            })
         }



         //以前
         await dispatch(bigScreen.axyData({
            type: 'get', url: `stations/data/theme`, params: {
               query: {
                  stations: stations?.pump?.join(),
                  ...pastTime,
                  aggtype: interval == '本日' ? "h" : "d",
                  method: 'diff'
               }
            }
         })).then(d => {
            if (d.success) {
               d.payload.data[0]?.stations?.map(c => {
                  c.data?.map(f => {
                     if (!f.changData) {
                        before += (f?.values?.eMotor_EQ || 0)
                     }
                  })
               })
            }
         })
      }


      if (stations?.cabine) {
         // 现在
         await dispatch(bigScreen.axyData({
            type: 'get', url: `stations/data/theme`, params: {
               query: {
                  stations: stations?.cabine?.join(),
                  begin: moment().startOf(time).format('x'),
                  end: moment().endOf(time).format('x'),
                  aggtype: interval == '本日' ? "h" : "d",
                  method: 'diff'
               }
            }
         })).then(d => {
            if (d.success) {
               d.payload.data[0]?.stations?.map(c => {
                  c.data?.map(f => {
                     if (!f.changData) {
                        now += (f?.values?.eQF_EQ || 0)
                     }
                  })
               })
            }
         })
         if (interval != '本日') {
            await dispatch(bigScreen.axyData({
               type: 'get', url: `stations/data/theme`, params: {
                  query: {
                     stations: stations?.cabine?.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) {
                           now += (f?.values?.eQF_EQ || 0)
                        }
                     })
                  })
               }
            })
         }
         // 以前
         await dispatch(bigScreen.axyData({
            type: 'get', url: `stations/data/theme`, params: {
               query: {
                  stations: stations?.cabine?.join(),
                  ...pastTime,
                  aggtype: interval == '本日' ? "h" : "d",
                  method: 'diff'
               }
            }
         })).then(d => {
            if (d.success) {
               d.payload.data[0]?.stations?.map(c => {
                  c.data?.map(f => {
                     if (!f.changData) {
                        before += (f?.values?.eQF_EQ || 0)
                     }
                  })
               })
            }
         })
      }
      setElectro({ now: now, before: before })

   }, [stations, interval])

   return <div style={{
      backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
      backgroundSize: '100% 36px',
      backgroundPosition: '0 0',
      backgroundRepeat: 'no-repeat', zIndex: 2,
      width: '26%', height: '30%', minWidth: 360, position: "absolute", left: 10, top: 0
   }}>
      <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
         <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>用电概况</div>
         <div style={{ display: "flex", justifyContent: 'space-between', width: 200 }}>
            {['本日', "本月", '本年'].map(v => <div style={{
               width: 60, height: 20, color: interval == v ? "#24DCF7" : '#00A9FF', border: '1px solid',
               background: interval == v ? "#5bc1ff33" : "#236cfe4d", textAlign: "center", cursor: 'pointer'
            }} onClick={() => {
               setInterval(v)
            }}>{v}</div>)}
         </div>
      </div>
      <div style={{
         width: '100%', height: 'calc(100% - 36px)', backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)",
         display: "flex", justifyContent: 'center', alignItems: "center"
      }}>
         <div>
            <div style={{ width: 150, height: 56, display: "flex" }}>
               <img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" />
               <div style={{ marginLeft: 10 }}>
                  <div>{interval == '本日' ?
                     "当日用电" : interval == '本月' ?
                        "当月用电" : interval == '本年' ?
                           "当年用电" : ""}</div>
                  <div>{electro?.now.toFixed(2)} kwh</div>
               </div>
            </div>
            <div style={{ width: 150, height: 56, display: "flex" }}>
               <img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" />
               <div style={{ marginLeft: 10 }}>
                  <div>{interval == '本日' ?
                     "昨日用电" : interval == '本月' ?
                        "上月用电" : interval == '本年' ?
                           "上年用电" : ""}</div>
                  <div>{electro?.before?.toFixed(2)} kwh</div>
               </div>
            </div>
         </div>
         <div style={{ display: 'flex' }}>
            <img style={{ width: 10, height: 100 }} src="/assets/images/realTime/left.png" />
            <div style={{
               backgroundImage: 'url(/assets/images/realTime/specific.png)',
               backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
               width: 170, height: 50, height: 100, display: "flex", flexDirection: "column", alignItems: "center"
            }}>
               <div style={{ color: "#D4EDFD", fontSize: 18, fontFamily: "PingFangSC-Regular" }}>用电同比</div>
               <div style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: "#FFF" }}>
                  {electro?.now && electro?.before ? (((electro?.now - electro?.before) / electro?.before) * 100).toFixed(2) : "--"} %

               </div>
            </div>
            <img style={{ width: 10, height: 100 }} src="/assets/images/realTime/right.png" />
         </div>
      </div>
   </div>

}

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

export default connect(mapStateToProps)(General);