import React, { useEffect, useState } from 'react';
import { IOTTimeTaskProps } from './type';
import './style/index.less';
const prefixCls = 'iot-time-task-out';

const IOTTimeTask: React.FC<IOTTimeTaskProps> = ({
  type,
  list,
  title,
  label,
  streamId,
  subTitle,
  icon,
  disabled,
  streamName,
  handler,
  ...rest
}) => {

  return (
    <>
      <div className={prefixCls} {...rest}>
        <div className='iot-time-task'>
          <div className='time-task-left'>
            {
              icon?.show && (
                <div className="time-task-icon">
                  <span className={['time-task-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              )
            }
            <div className="time-task-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }} >
              <div className="time-task-main" style={{ width: icon?.show ? '90%' : '90%' }} >{title}</div>
              {
                subTitle?.show && (
                  <div className="time-task-sub" style={{ width: icon?.show ? '90%' : '90%' }}>{subTitle['value']}</div>
                )
              }
            </div>
          </div>
          <div className="time-task-right" onClick={() => {
            handler?.();
          }}>
            <div className={['time-task-btn-icon'].join(' ')}>
               设置
            </div>
          </div>
          {disabled && (
            <div className="time-task-disable"></div>
          )}
        </div>
      </div>
    </>
  );

};

export default IOTTimeTask;