import React, { useState, useMemo, useEffect } from 'react';
import { List, Button, Icon, Row, Col, Modal, Input, Form, message } from 'antd';
import Panel from '@/pages/Smart/components/Panel';

const TargetOperatingConditions = ({
  optimum,
  onCancel,
  // current,
  setCurrent,
  onDelete,
  list: data,
  loading,
}) => {
  const renderItem = (item, index) => {
    const { name, control, id, is_best } = item;
    const base = optimum?.base;
    // const isCurrent = id == current?.id;

    const renderParameters = () => {
      let data = { ...base, ...control };
      let items = Object.keys(data).map(name => {
        return (
          <Col span={8} key={name}>
            <div style={{ fontSize: 18, // color: '#fff', margin: '5px 0' }}>
              <span>{name}: </span>
              <span>{data[name]}</span>
            </div>
          </Col>
        );
      });

      const rows = [];
      const colCount = 3;

      for (let i = 0; i < items.length; i += colCount) {
        const rowItems = items.slice(i, i + colCount);
        const row = (
          <Row gutter={16} key={i}>
            {rowItems}
          </Row>
        );
        rows.push(row);
      }

      return <div style={{ margin: '0 auto', width: '80%' }}>{rows}</div>;
    };

    const renderTitle = () => {
      if (item.is_best) {
        return (
          <>
            {name}
            <span style={{ fontSize: 18, color: '#52c41a', marginLeft: 10 }}>(最优)</span>
          </>
        );
      }
      return name;
    };

    const renderActions = () => {
      let actions = [];
      // actions.push(
      //   <Icon
      //     onClick={() => {
      //       // setName(item.name);
      //       onEdit(item);
      //     }}
      //     type="form"
      //   />
      // );
      actions.push(<Icon onClick={() => handleRemove(item.id)} type="delete" />);

      return actions;
    };

    return (
      <List.Item
        // className={{ active: isCurrent }}
        style={{ cursor: 'pointer' }}
        actions={renderActions()}
        onClick={() => setCurrent(item)}
      >
        <List.Item.Meta title={renderTitle()} description={renderParameters()} />
      </List.Item>
    );
  };

  // 删除模块
  const handleRemove = id => {
    Modal.confirm({
      title: '提醒',
      content: `确认删除工况吗？`,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        onDelete(id);
      },
    });
  };

  return (
    <Panel title="工况列表" btns={<Button onClick={() => onCancel()}>返回</Button>}>
      <List
        loading={loading}
        dataSource={data}
        renderItem={renderItem}
        style={{ height: '626px', overflowY: 'auto' }}
      />
    </Panel>
  );
};

export default TargetOperatingConditions;
