import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React from 'react';
import { useDispatch } from 'react-redux';
import config from '../../../../config';
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
import { strNumber } from '../../../../utils/tools';
import { InfoPopNames } from '../../InfoPops';

const useStyles = makeStyles({
  root: {
    padding: '1.5rem 0.75rem 0.75rem 0.75rem',
    color: 'rgb(224, 246, 247)',
    fontSize: '0.9rem',
    lineHeight: '1.8rem',
  },

  titleDate: {
    fontSize: '1.2rem',
    margin: '0.2rem',
    color: '#00deff',
  },

  number: {
    color: '#ffd220',
    fontSize: '1.2rem',
    margin: '0.2rem',
  },

  sttype: {
    color: '#92f0ff',
  },
  stname: {
    fontWeight: 'bold',
    fontSize: '1rem',
    margin: '0.25rem',
    cursor: 'pointer'
  },

  grid: {
    display: 'flex',
    justifyContent: 'space-around',
    marginBottom: '1rem',
    textAlign: 'center',

    '& .value': {
      fontSize: '1.8rem',
      color: '#6fe9fd',
      lineHeight: '2rem'
    },


    '& .key': {
      fontSize: '0.8rem',
      color: '#aaa',
    },
  },

  action: {
    textAlign: 'right',
    color: '#fff',
  }
})

export default function OverallContent({ data }) {
  const classes = useStyles();
  const dispatch = useDispatch();

  const {
    drpInfo,
    skInfo,
    tm1, tm2,
  } = data || {};

  const { h24, h1, h3, h6 } = drpInfo || {};

  const _showRecord = (record, poptype) => {
    if (record) {
      const { lgtd, lttd } = record;
      if (lgtd && lttd) {
        dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
        dispatch.runtime.setCameraTarget({
          center: [lgtd, lttd],
          zoom: 15,
          pitch: config.poiPitch,
        });
      }
    }
  }

  const showRecord = (obj) => {
    if (!obj) {
      return;
    }

    const { type } = obj;
    if (type === 'sk') {
      skRealGet(obj.stcd).then((record) => {
        _showRecord(record, InfoPopNames.RealSkPop)
      })
    } else {
      drpRealGet(obj).then((record) => {
        _showRecord(record, InfoPopNames.RealDrpPop)
      });
    }
  }

  const doBx = () => {
    bxstr().then((data) => {
      dispatch.runtime.setInfoDlg({
        layerId: 'OverallSmtp',
        properties: { txt: data }
      })
    });
  }

  return (
    <div className={classes.root}>
      <div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:10,alignItems:'center'}}>
        <div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
          <div className="value" style={{ color: '#5ecd45' }}>1.12<span style={{fontSize:14}}>亿m³</span><span style={{ color: '#ce010e',fontSize:14,marginLeft:10 }}>同比↑15%</span></div>
          <div className="key" style={{ color: '#fff', fontSize: 16 }}>当日总引水量</div>
        </div>
        <div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
          <div className="value" style={{ color: '#5ecd45' }}>92<span style={{fontSize:14}}>%</span><span style={{ color: '#ce010e',fontSize:14,marginLeft:10 }}>异常设备3台</span></div>
          <div className="key" style={{ color: '#fff', fontSize: 16 }}>量测设备在线率</div>
        </div>
        {/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
          <div className="value" style={{ cursor: 'pointer', color: '#5ecd45' }}>9876<span style={{fontSize:14}}>m³</span></div>
          <div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</div>
        </div>
        <div style={{ padding:"15px 30px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
          <div className="value" style={{ color: '#5ecd45' }}>85.6<span style={{fontSize:14}}>%</span></div>
          <div className="key" style={{ color: '#fff', fontSize: 16 }}>渠系利用率</div>
        </div> */}
      </div>
    </div>
  )
}