import React, { useState } from 'react';
import moment from 'moment';
import { Button } from 'antd';
import { PandaHistoryConfiguration } from '../index';
// import PandaConfigurationView from '../../es/index';
const Demo = () => {
  const [speed, setSpeed] = useState(0);
  const [play, setPlay] = useState(false);
  const [times, setTimes] = useState(2);
  const [obj, setObj] = useState({});
  const [params, setParams] = useState({
    isDilute: true,
    zoom: '1',
    unit: 'h',
    ignoreOutliers: false,
    isVertical: false, // 是否查询竖表
    dateFrom: moment(new Date()).format('yyyy-MM-DD 00:00:00'),
    dateTo: moment(new Date()).format('yyyy-MM-DD 23:59:59'),
  });
  return (
    <>
      <div style={{ width: '100%', height: '600px', background: '#242835' }}>
        <PandaHistoryConfiguration
          name={'水厂工艺流程段'}
          devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004'.split(
            ',',
          )}
          // name={'崇左丽江水厂原水泵房'}
          // devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001'.split(
          //   ',',
          // )}
          // name={'丽江水厂原水提升泵D单元'}
          // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
          config={globalConfig}
          deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
          speed={speed}
          play={play}
          times={times}
          callback={(speed, total, play, time) => {
            setObj({
              speed,
              total,
              play,
              time,
            });
          }}
          params={params}
          // isZoom={true}
          // flowShow={false}
        />
      </div>
      <Button
        onClick={() => {
          setSpeed(20);
        }}
        style={{ margin: '10px' }}
      >
        改变speed
      </Button>
      <Button
        onClick={() => {
          setPlay(!play);
        }}
        style={{ margin: '10px' }}
      >
        改变play
      </Button>
      <Button
        onClick={() => {
          setTimes(5);
        }}
        style={{ margin: '10px' }}
      >
        改变times
      </Button>
      <Button
        onClick={() => {
          setParams({
            isDilute: true,
            zoom: '1',
            unit: 'min',
            ignoreOutliers: false,
            isVertical: false, // 是否查询竖表
            dateFrom: moment(new Date()).format('yyyy-MM-DD 00:00:00'),
            dateTo: moment(new Date()).format('yyyy-MM-DD 23:59:59'),
          });
        }}
        style={{ margin: '10px' }}
      >
        改变params
      </Button>
      <div
        style={{
          display: 'flex',
          marginTop: '20px',
          justifyContent: 'space-between',
          flex: 'none',
        }}
      >
        <span>speed:{obj?.speed || 0}</span>
        <span>total:{obj?.total || 0}</span>
        <span>play:{obj?.play ? '开' : '关'}</span>
        <span>time:{obj?.time || ''}</span>
      </div>
    </>
  );
};

export default Demo;

const globalConfig = {
  token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
  mqtt_iotIP: 'emqttd10.panda-water.cn:443',
  mqtt_path: '/mqtt',
  mqtt_IsSSL: true,
  mqtt_site_code: 'site_dc8302ni',
  mqtt_mess: {
    MessageLevel: '1.0',
    TcpIP: 'emqttd10.panda-water.cn',
    TcpPort: 443,
    site_code: 'site_dc8302ni',
  },
  userInfo: {
    LocalSite: 'site_dc8302ni',
    site: '',
  },
};