import React, { useContext, useEffect, useState } from 'react';
import { ConfigProvider, Modal, Radio, Slider, InputNumber, Input, Button, Tabs } from 'antd';
import classNames from 'classnames';
import HistoryTrend from './historyTrend';
import IntellectDraw from './intellectDraw';
import LoadBox from '@wisdom-components/loadbox';
import './index.less';

const LimitCurve = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('limit-curve');
  const { width, deviceCode, sensors, deviceType, getContainer, title } = props;
  const [open, setOpen] = useState(false);
  const [ruleData, setRuleData] = useState([]); // 预测数据
  const [spinning, setSpinning] = useState(false);

  // 确定
  const onOk = () => {
    props.onOk && props.onOk(ruleData);
  };

  // 取消
  const onCancel = () => {
    setOpen(false);
    props.onCancel && props.onCancel();
  };

  // 返回数据
  const backData = (data) => {
    console.log(data);
    setRuleData(data);
  };

  // spin控制
  const changeSpin = (flag) => {
    setSpinning(flag);
  };

  const renderTitle = () => {
    return (
      <>
        <div className={classNames(`${prefixCls}-title`)}>
          <span className={classNames(`${prefixCls}-title-name`)}>自动限制提取</span>
          <Tabs
            defaultActiveKey="历史趋势"
            centered
            onChange={() => {}}
            items={[
              {
                label: `历史趋势`,
                key: '历史趋势',
                children: <HistoryTrend {...props} changeSpin={changeSpin} backData={backData} />,
              },
              {
                label: `智能提取`,
                key: '智能提取',
                children: <IntellectDraw {...props} changeSpin={changeSpin} />,
              },
            ]}
          />
          <div className={classNames(`${prefixCls}-title-operate`)}>
            <Button onClick={onCancel}>取消</Button>
            <Button type={'primary'} onClick={onOk}>
              确定
            </Button>
          </div>
        </div>
      </>
    );
  };

  useEffect(() => {}, [open]);

  useEffect(() => {
    setOpen(props.open);
  }, [props.open]);

  return (
    <>
      <Modal
        closable={false}
        centered
        width={width || '1300px'}
        footer={null}
        open={open}
        visible={open}
        onOk={onOk}
        onCancel={onCancel}
        wrapClassName={classNames(`${prefixCls}`)}
        getContainer={getContainer || document.body}
        destroyOnClose={true}
      >
        <div className={classNames(`${prefixCls}-box`)}>
          {renderTitle()}
          {spinning && (
            <div className={classNames(`${prefixCls}-load`)}>
              <LoadBox spinning={spinning} />
            </div>
          )}
        </div>
      </Modal>
    </>
  );
};

export default LimitCurve;
