import React, { useEffect, useState } from 'react';
import * as datav from '@jiaminghi/data-view-react';
import styles from './sliderData.less';
import { connect } from '@@/plugin-dva/exports';
import { JSONPath } from 'jsonpath-plus';

interface propsData {
  data: any;
  MQTTMessage: any;
}

/**
 * 底部轮播
 * @constructor
 */
const SliderData: React.FC<propsData> = (props) => {
  const { data, MQTTMessage } = props;
  const [voltage, setVoltage] = useState({ ua: 0 });
  const [current, setCurrent] = useState({ ia: 0 });
  const [activePower, setActivePower] = useState({ active_power: 0 });
  const [controlData, setControlData] = useState({
    power: data.power ? data.power : 0,
    mode: data.mode,
    set_temp: data.set_temp,
    temperature: data.temperature,
    humidity: data.humidity,
    air_quality: data.air_quality,
    co2: data.co2,
  });

  useEffect(() => {
    // 电
    if (
      MQTTMessage.message?.DeviceCode === 'DT645-4G' &&
      MQTTMessage.message?.SubDeviceId !== '' &&
      data.electric_id !== '' &&
      MQTTMessage.message?.SubDeviceId === data.electric_id
    ) {
      // 电压
      if (Object.keys(MQTTMessage.message.Data)[0] === 'voltage') {
        setVoltage({ ua: JSONPath({ json: MQTTMessage.message.Data, path: '$.voltage.ua' })[0] });
      }
      // 电流
      if (Object.keys(MQTTMessage.message.Data)[0] === 'current') {
        setCurrent({ ia: JSONPath({ json: MQTTMessage.message.Data, path: '$.current.ia' })[0] });
      }
      // 用电量
      if (Object.keys(MQTTMessage.message.Data)[0] === 'power') {
        setActivePower({
          active_power: JSONPath({
            json: MQTTMessage.message.Data,
            path: '$.power.active_power',
          })[0],
        });
      }
    }

    //温湿度等
    if (
      MQTTMessage.message?.DeviceCode === data.device_id &&
      MQTTMessage.message?.SubDeviceId === ''
    ) {
      setControlData({
        power: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.power' })[0],
        mode: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.mode' })[0],
        set_temp: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.set_temp' })[0],
        temperature: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.temperature' })[0],
        humidity: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.humidity' })[0],
        air_quality: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.air_quality' })[0],
        co2: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.co2' })[0],
      });
    }
  }, [MQTTMessage.message?.DeviceCode && MQTTMessage.message?.SubDeviceId]);

  const handleCo2Grade = (co2: number) => {
    if (co2 >= 0 && co2 < 800) {
      return '#90c456';
    }
    if (co2 >= 800 && co2 < 1600) {
      return '#eceb3b';
    }
    if (co2 >= 1600) {
      return '#e4151b';
    }
    return '';
  };

  const handlePm25Grade = (pm25: number) => {
    if (pm25 >= 0 && pm25 <= 50) {
      return '#90c456';
    }
    if (pm25 > 50 && pm25 < 150) {
      return '#eceb3b';
    }
    if (pm25 >= 150) {
      return '#e4151b';
    }
    return '';
  };

  return (
    <div>
      <datav.BorderBox12
        className={styles.decoration_bottom_border}
        style={{ width: '550px', height: '280px' }}
      >
        <div className={styles.home_detail}>
          <div className={styles.detail_left}>
            <div className={styles.detail_left_left}>
              <div className={styles.decoration_on} />
              <div className={styles.home_name}>{data?.home_name ? data?.home_name : '我的家'}</div>
            </div>
            <div className={styles.detail_left_right}>
              <table className={styles.detail_item}>
                <tbody>
                  <tr>
                    <td className={styles.detail_item_title}>管理员</td>
                    <td className={styles.detail_item_value}>{data?.admin}</td>
                  </tr>
                  <tr>
                    <td className={styles.detail_item_title}>是否在线</td>
                    <td
                      className={styles.detail_item_value}
                      // style={{ color: `${data?.is_online ? '#90c456' : '#e4151b'}` }}
                      style={{ color: '#90c456' }}
                    >
                      {/*{data?.is_online ? '在线' : '离线'}*/}
                      在线
                    </td>
                  </tr>
                  <tr>
                    <td className={styles.detail_item_title}>运行状态</td>
                    <td className={styles.detail_item_value} style={{ color: '#ffb026' }}>
                      {{ 0: '关', 1: '开' }[controlData.power]}
                    </td>
                  </tr>
                  <tr>
                    <td className={styles.detail_item_title}>模式</td>
                    <td className={styles.detail_item_value}>
                      {{ 0: '制冷', 1: '制热', 2: '除湿', 3: '送风', 4: '加湿' }[controlData?.mode]}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div className={styles.detail_right}>
            <div className={styles.detail_right_top}>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>设定温度</div>
                <div className={styles.content_value}>{controlData?.set_temp}°C</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>室内温度</div>
                <div className={styles.content_value}>{controlData?.temperature}°C</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>湿度</div>
                <div className={styles.content_value}>{controlData?.humidity}%rh</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>PM25</div>
                <div
                  className={styles.content_value}
                  style={{ color: handlePm25Grade(controlData?.air_quality) }}
                >
                  {controlData?.air_quality}μg/m³
                </div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>CO2</div>
                <div
                  className={styles.content_value}
                  style={{ color: handleCo2Grade(controlData?.co2) }}
                >
                  {controlData?.co2}
                </div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>用电量</div>
                <div className={styles.content_value}>{activePower?.active_power}kwh</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>电压</div>
                <div className={styles.content_value}>{voltage?.ua}V</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>电流</div>
                <div className={styles.content_value}>{current?.ia}A</div>
              </div>
            </div>
          </div>
        </div>
      </datav.BorderBox12>
    </div>
  );
};
export default connect(({ MQTTMessage }: any) => ({
  MQTTMessage,
}))(SliderData);