import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import apiurl from '../../../../service/apiurl';
import { exportFile } from '../../../../utils/tools.js';
import { httppost2,httppost5 } from '../../../../utils/request';
import "./index.less"
import MyTable from './table'
const Page = () => {
  const role = useSelector(state => state.auth.role);

  const [searchVal, setSearchVal] = useState(false)
  const [dataSource, setDataSource] = useState([])
  const [trData, setTrData] = useState([])
  const [table2Data, setTable2Data] = useState([])
  const [loading, setLoading] = useState(false)
  const [wyObj, setWyObj] = useState(false)
  const wyList = ["X","Y","H"]
  const columns1 = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 150, align:"center"},
  ];
  const columns2 = [
    { title: '监测日期', key: 'tm', dataIndex: 'tm', width: 250, align:"center" },
  ];

  const demoColumns = [
    columns1[0],
    columns2[0],
    {
      title: 'WY-01',
      width: 100,
      align: "center",
      children: {
        title: "X",
        key: `X_WY-01`,
        dataIndex: `X_WY-01`,
        width: 100,
        align: "center",
        render: (rec, record) => <span>{rec ?? "-"}</span>
      }
    }
  ]
 
 
  const getDmTree = async() => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.list)
      setTrData(res.data)
    } catch (error) {
      console.log(error);
    }
  }
  const newCols = useMemo(() => {
    if (trData.length > 0 && wyObj) {
      let dm = trData?.map(item => (
        {
          title: item.stationCode,
          width: 100,
          align: "center",
          children: wyList?.map(s => ({
            title: s,
            key: `${s}_${item.stationCode}`,
            dataIndex: `${s}_${item.stationCode}`,
            width: 100,
            align: "center",
            render: (rec, record) => <span>{rec?? "-"}</span>
          }))
        }
      ))

      const newDm = dm.filter(item => item.title == wyObj.wy)
      return [...columns1,...columns2, ...newDm]
    }
    
  }, [trData,wyObj])
  
  const getTableData = async (params) => {
    setLoading(true)
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.page, params)
      setLoading(false)
      let newArr = [];
      let newData = res.data?.map((s, i) => {
        newArr.push(s.list?.map((c, i) => ({
          [c.stationCode]: c.value || '-',
           [`X_${c.stationCode}`]:c.x ,
           [`Y_${c.stationCode}`]:c.y ,
           [`H_${c.stationCode}`]:c.h ,
         tm: c.tm,
        })))
        return {
          tm: s.tm,
          inx:i+1
        }
      })
      let filterData = newArr?.filter(s => s.length > 0).flat()
      let result = newData?.map(s => {
        let tm1 = s.tm;
        let r = filterData.filter(t => {
         return t.tm == tm1
        })
        let obj = {};
        r.forEach(s1 => {
         obj = {...s1,...obj}
        })
        return {
          ...s,
          ...obj,
        }
      })
      // const demo = [{tm:"2025-01-01",inx:1,"H_WY-03":0.87,"X_WY-01":0.1}]
      setDataSource(result)
    } catch (error) {
      console.log(error);
    }
  }
  const width = useMemo(() => {
    if (newCols?.length > 0) {
      return  newCols?.reduce((total, cur) => total + (cur.width), 0)
    }
  }, [newCols]);
  console.log('width',width);

  const exportExcel = () => {
    let params = {
      ...searchVal,
      stationCodes: [trData.find(s => s.stationCode == wyObj.wy)?.stationCode],
      type:2,
      id:1
    }
    httppost5(apiurl.gcaqjc.sjtjcx.ndwytjb.export, params).then(res => {
      exportFile(`年度位移统计表.xlsx`,res.data)
  })
  }
  const getTable2Data = async (params) => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.list1, params)
      setTable2Data(res.data)
      // const list = []
      // for(let i=0; i<24*3; i++){
      //   list.push({
      //     maxValue:'',
      //     maxTm:'',
      //     minValue:'',
      //     minTm:'',
      //     diff:'',
      //   })
      // }
      // setTable2Data(list)
    } catch (error) {
      console.log(error);
    }
  }
  useEffect(() => {
    if (trData && trData.length > 0) {
      const params = {
        ...searchVal,
        stationCodes: trData.map(s => s.stationCode),
      };
      getTableData(params)
      
    }
  }, [searchVal,trData])
  
  useEffect(() => {
    if (trData && trData?.length > 0) { 
      let params = {
        ...searchVal,
        stationCodes:[trData.find(s => s.stationCode == wyObj.wy)?.stationCode],
      }
      getTable2Data(params)
    }
  }, [trData,wyObj])
  
  useEffect(() => {
    getDmTree()
  }, [])
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"10px",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              list={trData}
              setWyObj={setWyObj}
              exportFile={exportExcel}
              role={role}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <Table
              columns={newCols}
              rowKey="inx"
              loading={loading}
              scroll={{ x: width, y: "calc( 100vh - 500px )" }}
              dataSource={dataSource}
              pagination={false}
              summary={(pageData) => {
                return(
                  <Table.Summary fixed>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0}  align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell  index={1} align='center'>最大值</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.maxValue ?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.maxTm?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row >
                      <Table.Summary.Cell index={0} align='center' className='total-col'>全年度特征值统计</Table.Summary.Cell>
                      <Table.Summary.Cell  index={1} align='center'>最小值</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.minValue ?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.minTm?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                    <Table.Summary.Row>
                      <Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
                      <Table.Summary.Cell index={1} align='center'>年变幅</Table.Summary.Cell>
                      {table2Data?.length > 0 && table2Data.map((item,i) =>
                        <Table.Summary.Cell index={i +1} align='center'>{item?.diff?? "-"}</Table.Summary.Cell>)}
                    </Table.Summary.Row>
                  </Table.Summary>
                )
              }}
            />
            {/* {
              (newCols?.length>0 && width!==undefined)?
              <MyTable 
                columns={demoColumns}
                dataSource={dataSource}
                width={width}
                loading={loading}
                table2Data={table2Data}
              />:null
            } */}
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;