function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/**
 * 计量-工况信息
 */
import { useSetState } from 'ahooks';
import { Space, Tabs } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { VmFilter, VmWrapper } from "../../../_components";
import useSettings from "../../../_hooks/useSettings";
import { BaseService } from "../../api";
import Monitor from "./Monitor";
import Table from "./Table";
import "./index.less";
import alarm from "../../imgs/alarm.png";
import alarmLight from "../../imgs/alarm_light.png";
import normal from "../../imgs/normal.png";
import normalLight from "../../imgs/normal_light.png";
import more from "../../imgs/tab_more.png";
import moreLight from "../../imgs/tab_more_light.png";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var WorkCondition = function WorkCondition(props) {
  var _realtimeMonitor$find;
  var _useSettings = useSettings(),
    isDark = _useSettings.isDark;
  var code = props.code;
  var _useSetState = useSetState({
      startDate: dayjs().subtract(3, 'days'),
      endDate: dayjs(),
      tabKey: 'chart'
    }),
    _useSetState2 = _slicedToArray(_useSetState, 2),
    state = _useSetState2[0],
    setState = _useSetState2[1];
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    active = _useState2[0],
    setActive = _useState2[1];
  var _useState3 = useState(''),
    _useState4 = _slicedToArray(_useState3, 2),
    deviceId = _useState4[0],
    setDeviceId = _useState4[1]; // 列表使用
  var startDate = state.startDate,
    endDate = state.endDate,
    tabKey = state.tabKey;
  var _BaseService$useRealt = BaseService.useRealtimeMonitor(code),
    realtimeMonitor = _BaseService$useRealt.realtimeMonitor;
  useEffect(function () {
    if ((realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.length) > 0) {
      var _realtimeMonitor$;
      setActive(realtimeMonitor[0].deviceId);
      setDeviceId(realtimeMonitor === null || realtimeMonitor === void 0 || (_realtimeMonitor$ = realtimeMonitor[0]) === null || _realtimeMonitor$ === void 0 ? void 0 : _realtimeMonitor$.deviceId);
    }
  }, [realtimeMonitor]);
  var _BaseService$useRealt2 = BaseService.useRealtime(active),
    realtimeRes = _BaseService$useRealt2.realtimeRes;
  var alarmImg = isDark ? alarm : alarmLight;
  var normalImg = isDark ? normal : normalLight;
  var disabledDate = function disabledDate(current) {
    if (!startDate || !endDate) {
      return false;
    }
    var tooLate = startDate && current.diff(startDate, 'days') > 7;
    var tooEarly = endDate && endDate.diff(current, 'days') > 7;
    return !!tooEarly || !!tooLate;
  };
  return /*#__PURE__*/_jsx("div", {
    className: "df-condition",
    children: /*#__PURE__*/_jsxs(VmWrapper, {
      title: "\u8FD0\u884C\u603B\u89C8",
      onChange: function onChange(key) {
        setState({
          tabKey: key
        });
      },
      needChange: true,
      extra: /*#__PURE__*/_jsxs(Space, {
        children: [tabKey === 'list' && /*#__PURE__*/_jsx(VmFilter.VMSelect, {
          value: deviceId,
          onChange: function onChange(val) {
            setDeviceId(val);
          },
          options: realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.map(function (item) {
            return {
              value: item.deviceId,
              label: item.deviceName
            };
          }),
          style: {
            width: 150
          },
          placeholder: "\u8BF7\u9009\u62E9",
          allowClear: false
        }), /*#__PURE__*/_jsx(VmFilter.VMRangePicker, {
          value: [dayjs(startDate), dayjs(endDate)],
          disabledDate: disabledDate,
          onChange: function onChange(dates) {
            return dates && setState({
              startDate: dayjs(dates[0]),
              endDate: dayjs(dates[1])
            });
          }
        })]
      }),
      children: [tabKey === 'chart' && /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx("div", {
          className: "df-condition-head",
          children: /*#__PURE__*/_jsx(Tabs, {
            centered: true,
            moreIcon: /*#__PURE__*/_jsx("img", {
              src: isDark ? more : moreLight
            }),
            popupClassName: "df-popup-className ".concat(isDark ? 'dark' : ''),
            onChange: function onChange(key) {
              setActive(key);
            },
            size: "small",
            items: (realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.map(function (item) {
              var flag = item.beenNormal;
              return {
                label: /*#__PURE__*/_jsxs("div", {
                  className: "df-monitor-head-item",
                  children: [/*#__PURE__*/_jsx("img", {
                    src: flag ? normalImg : alarmImg
                  }), /*#__PURE__*/_jsxs("div", {
                    className: "df-monitor-head-item-right",
                    children: [/*#__PURE__*/_jsx("div", {
                      className: "df-monitor-head-item-right-name",
                      children: item.deviceName
                    }), /*#__PURE__*/_jsx("div", {
                      className: "df-monitor-head-item-right-".concat(flag ? 'valueNormal' : 'valueAlarm'),
                      children: /*#__PURE__*/_jsx("span", {
                        children: flag ? '正常' : '异常'
                      })
                    })]
                  })]
                }),
                key: item.deviceId
              };
            })) || []
          })
        }), /*#__PURE__*/_jsx(Monitor, {
          deviceName: realtimeMonitor === null || realtimeMonitor === void 0 || (_realtimeMonitor$find = realtimeMonitor.find(function (ele) {
            return ele.deviceId === active;
          })) === null || _realtimeMonitor$find === void 0 ? void 0 : _realtimeMonitor$find.deviceName,
          realtimeRes: realtimeRes,
          startDate: startDate,
          endDate: endDate,
          deviceId: active
        })]
      }), tabKey === 'list' && /*#__PURE__*/_jsx("div", {
        className: "df-condition-table",
        children: /*#__PURE__*/_jsx(Table, {
          startDate: dayjs(startDate).format('YYYY-MM-DD 00:00:00'),
          endDate: dayjs(endDate).format('YYYY-MM-DD 00:00:00'),
          deviceId: deviceId
        })
      })]
    })
  });
};
export default WorkCondition;