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';
import { history } from 'umi';

const TargetList = ({ onEdit, current, setCurrent, onDelete, list: data, loading }) => {
  const renderItem = (item, index) => {
    const { name, base, id, is_best, control } = item;
    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 renderActions = () => {
      let actions = [];
      actions.push(
        <Icon
          onClick={() => {
            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={name} description={renderParameters()} />
      </List.Item>
    );
  };

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

  return (
    <Panel
      title="目标工况"
      btns={
        <div>
          <Button style={{ marginRight: 20 }} onClick={() => onEdit(null)} type="primary">
            新增
          </Button>
          <Button onClick={() => history.go(-1)} type="primary">
            返回
          </Button>
        </div>
      }
    >
      <List
        loading={loading}
        dataSource={data}
        renderItem={renderItem}
        style={{ height: '626px', overflowY: 'auto' }}
      />
    </Panel>
  );
};

export default TargetList;
