import React from 'react';
import moment from 'moment';
import { Typography } from '@material-ui/core';
import { useDispatch } from 'react-redux';
import { InfoPopNames } from '../../InfoPops';
import { MailOutline } from '@material-ui/icons';
import { skInfo } from '../../../../models/_/search';
import config from '../../../../config';

function Item({ data, viewInfo, sendMessage }) {
  return (
    <div className="item">
      <div className={`header alertsk`}>
      </div>
      <div className="content">
        <div className="main">
          <div className="title cursor-pointer" onClick={() => viewInfo(data)}>{data.stnm}</div>
          <div className="span"></div>
          <div className="extra">+{(data.rz - data.fsltdz).toFixed(2)}</div>
        </div>
        <div className="desc">
          <Typography variant="body2">
            水库汛限水位<span className="bold">{data.fsltdz}</span>m。
          </Typography>
          <Typography variant="body2">
            实时监测水位<span className="bold">{data.rz}</span>m，超出汛限水位<span className="bold red">{(data.rz - data.fsltdz).toFixed(2)}</span>m
          </Typography>
        </div>
        <div className="tail">
          <span>{moment(data.rzTm).format('YYYY-MM-DD HH:mm')}</span>
          <MailOutline className="action" onClick={() => sendMessage(data)} />
        </div>
      </div>
    </div>
  );
}

function ARzSk({ data }) {
  data = [{
    "stcd": "716129061",
    "type": "sk",
    "hasRz": true,
    "stnm": "仰天窝水库",
    "adcd": "421181201000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.106667,
    "lttd": 31.126389,
    "elev": 0,
    "damel": 325.08,
    "dsflz": 324.18,
    "fsltdz": 323.5,
    "ddz": 319.5,
    "zcxsw": 323.5,
    "drpTm": "2025-04-11T05:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 0,
    "drpState": 2,
    "rz": 328.16,
    "w": 0.132,
    "a_fsltdz": 4.660000000000025,
    "rzTm": "2025-04-11T05:00:00.000Z",
    "rzWarning": 1,
    "rzState": 2,
    "pic": [
        {
            "stcd": "716129061",
            "tm": "2023-03-12T06:05:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
        },
        {
            "stcd": "716129061",
            "tm": "2023-03-12T07:25:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
        }
    ],
    "aRz": 4.66,
    "strarz": "4.66"
}];
  const dispatch = useDispatch();

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

  const sendMessage = (record) => {
    skInfo(record).then(data => {
      if (data) {
        console.log(record, data);
        const txt = `${record.stnm}在${moment(record.rzTm).format('D日H时')}测得水位为${record.rz}米，超汛限水位(${record.fsltdz})${(record.rz - record.fsltdz).toFixed(2)}米，请做好核实防范工作。`;
        dispatch.runtime.setInfoDlg({ layerId: 'SkSmtp', properties: { stnm: data.stnm, stcd: data.stcd, personels: data.personels, txt } })
      }
    })
  }

  return (
    <div className="dppanel-shyj">
      {
        data.map(o => (
          <Item key={o.stcd} viewInfo={flyTo} sendMessage={sendMessage} data={o} />
        ))
      }
    </div>
  )
}

export default ARzSk;