import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import { Table, Card, Modal, Form, Input, Button, Row, Col, Typography, message, Tabs, Image, InputNumber } from 'antd';
import ToolBar from './toolbar'
import ReactEcharts from 'echarts-for-react';
import './index.less'
import drpOption from './drpOption.js'
import { httppost2 } from '../../utils/request';
import TestApp from './createData.js'
import { getAllHydroBatches, responseData } from './watersTools'
const TableE = ({ count, setEditData, tableData }) => {
  const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
    const inputNode = <InputNumber style={{ textAlign: "center", flex: 1 }} />;

    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            name={dataIndex}
            wrapperCol={[24]}
            style={{
              margin: 0,
            }}
          >
            {inputNode}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
  const [editingKey, setEditingKey] = useState('');
  const [details, setDetails] = useState([])
  const isEditing = (record) => {
    return editingKey.includes(record.key);
  }
  const columns = [
    {
      title: '预见期',
      dataIndex: 'tm',
      width: '30%',

    },
    {
      title: '雨量',
      dataIndex: 'drp',
      width: '30%',
      editable: true,
      align: 'center'
    },
    {
      title: '水位',
      dataIndex: 'rz',
      width: '20%',
    },
    {
      title: '操作', key: 'operation', width: "20%", fixed: 'right', align: 'center',
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record.key)}
              style={{
                marginRight: 8,
              }}
            >
              完成
            </Typography.Link>

          </span>
        ) : (
          <div style={{ display: "flex", justifyContent: "center", columnGap: 10 }}>
            <Typography.Link disabled={editingKey !== ''} onClick={() => edit1(record)}>
              编辑
            </Typography.Link>
          </div>

        );
      },
    },
  ]
  const [form1] = Form.useForm()
  const edit1 = (record) => {
    form1.setFieldsValue({
      drp: '',
      ...record,
    });
    setEditingKey(record.key);
  };
  const save = async (key) => {
    try {
      const row = await form1.validateFields();
      const newData = [...details];
      const index = newData.findIndex((item) => key === item.key);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        setDetails(newData);
        setEditData(newData);
        setEditingKey('');
      } else {
        newData.push(row);
        setDetails(newData);
        setEditData(newData);
        setEditingKey('');
      }
    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }
  };

  useEffect(() => {
    if (tableData.length > 0) {
      setDetails(tableData)
    }
  }, [tableData])


  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

  const handleAddRow = (count) => {
    const newArr = Array(count).fill(0).map((item, i) => ({
      key: (i + 1).toString(),
      tm: `${i + 1}小时`,
      drp: '',
      rz: '',
    }))
    form1.setFieldsValue(newArr[0])
    setDetails([...newArr]);
    setEditData([...newArr]);
    setEditingKey(newArr.map(item => item.key));
  };

  useEffect(() => {
    if (count) {
      handleAddRow(count)
    }
  }, [count])

  return (
    <>
      <Form form={form1} component={false}>
        <Table
          rowKey="key"
          components={{
            body: {
              // row: EditableRow,
              cell: EditableCell,
            },
          }}
          columns={mergedColumns}
          dataSource={details}
          scroll={{ x: 200, y: 'calc( 100vh - 400px )' }}
          pagination={false}
        />
      </Form>
    </>
  )
}



export default function TestLine() {
  const [form] = Form.useForm()
  const [searchVal, setSearchVal] = useState(false)
  const [editData, setEditData] = useState([])
  const [type, setType] = useState({})
  const [tmCount, setTmCount] = useState('')
  const [tableForm, setTableForm] = useState({})
  const [tableData, setTableData] = useState([])
  const [historyData, setHistoryData] = useState(responseData)
  const [predictData, setPredictData] = useState([])
  // const options = useMemo(() => {
  //   return drpOption(tableForm.time || '1h', tableForm.tabArr || [])
  // }, [tableForm])
 
  const options = useMemo(() => {
    return drpOption(predictData,historyData)
  }, [predictData,historyData])

  // useEffect(() => {
  //   if (searchVal) {
  //     getPrejectRain(searchVal.code)
  //   }
  // }, [searchVal])

  useEffect(() => {
    let count;
    if (type?.time) {
      count = type.time == '1h' ? 1 :
        type.time == '3h' ? 3 :
          type.time == '6h' ? 6 :
            type.time == '12h' ? 12 :
              type.time == '24h' ? 24 : '';
      setTmCount(count)
    } else {
      count = 1
      setTmCount('')
    }
  }, [type])



  const rowObj = {
    "1小时": 420,
    "2小时": 450,
    "3小时": 480,
    "4小时": 510,
    "5小时": 540,
    "6小时": 480,
    "7小时": 420,
    "8小时": 450,
    "9小时": 480,
    "10小时": 510,
    "11小时": 540,
    "12小时": 480,
    "13小时": 420,
    "14小时": 450,
    "15小时": 480,
    "16小时": 510,
    "17小时": 540,
    "18小时": 480,
    "19小时": 420,
    "20小时": 450,
    "21小时": 480,
    "22小时": 510,
    "23小时": 540,
    "24小时": 480,

  }
  const save = async () => {
    // const all = editData.some(item => !item.drp)
    // if (all) {
    //   message.error("所有雨量不能为空")
    //   return
    // }
    try {
      const newTabl = editData.map(item => ({
        ...item,
        rz: rowObj[item.tm],
      }))
      setTableForm({ tabArr: newTabl, time: type.time })
      setTableData(newTabl)

    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }
  };
  // 测试

  const getHistoryData = async (params) => {
    try {
      const allBatches = getAllHydroBatches(responseData);
      const res =await processPredictions(allBatches, params.code)
      if (res.length > 0) { 
        setPredictData(res)
      }

    } catch (error) {

    }

    // try {
    //   const res = await httppost2('/api/hydrology/history');
    //   if (res.code == 200) {
    //     const allBatches = getAllHydroBatches(res.data);
    //     if (allBatches.length) {
    //       processPredictions(allBatches,params.code)
    //     }
    //   } else {
    //     const allBatches = getAllHydroBatches(responseData);
    //   }
    // } catch (error) {
    //   console.log(error);
    // }
  }
  /**
 * 处理预测结果
 * @param {Array} batches - 批次数据
 * @param {Array} predictions - 预测结果数组
 * @returns {Array} - 返回处理后的预测结果
 */ const processPredictions = async (batches, name) => {
    const results = [];

    for (const batch of batches) {
      const prediction = await httppost2('http://202.96.165.23:10100/api/v1/bot/water_infer', {
        rains: batch.rains,
        waters: batch.waters,
        name
      });
      results.push({
        predict: prediction?.data?.water_predicts[0],  // 预测水位
        tm: batch.lastTm     // 对应的时间点
      });
    }

    return results;
  };

  useEffect(() => {
    if (searchVal) {
      getHistoryData(searchVal)
    }
  }, [searchVal])


  return (
    <>
      <div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              setType={setType}
              save={save}
              form1={form}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0", height: 'calc( 100vh - 400px )' }}>

            <div style={{ display: 'flex', columnGap: 20 }}>
              <div style={{ flex: 1, height: 'calc( 100vh - 400px )', padding: 10 }}>
                <ReactEcharts option={options} style={{ width: "100%", height: '100%' }} notMerge={true} />
              </div>
              {/* <div style={{ width: 430, marginRight: 30 }}>
               <Button type="primary" onClick={save} style={{float:'right',marginBottom:10}}>生成</Button>
             <TestApp  count={tmCount}  tableData={tableData} setEditData={setEditData}/>
              </div> */}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}