Highways4Good/web/client/src/sections/fillion/components/videoTable.js

import { connect } from 'react-redux';
import './protable.less'
import { Card, Button, Popconfirm, Badge,Col, Row } from 'antd';
import ProTable from '@ant-design/pro-table';
// import { Badge, Button } from 'antd';
import React, { useEffect, useState } from 'react';
// @ts-ignore
import styles from './protable.less';
const DetailList = (props) => {
    const { ip } = props;
    const [tableListDataSource, setTableListDataSource] = useState([]);
  
    const columns= [
      {
        title: '视频',
        key: 'createdAt',
        dataIndex: 'createdAt',
        valueType: 'dateTime',
        render: (dom, record) => {
            return  <Row>
            <Col span={8}></Col>
            <Col span={8}>col-8</Col>
            <Col span={8}>col-8</Col>
          </Row>
        },
      },
    ];
    useEffect(() => {
      const source = [];
      for (let i = 0; i < 15; i += 1) {
        source.push({
          createdAt: Date.now() - Math.floor(Math.random() * 10000),
          code: `const getData = async params => {
            const data = await getData(params);
            return { list: data.data, ...data };
          };`,
          key: i,
        });
      }
      setTableListDataSource(source);
    }, [ip]);
    return (
        <ProTable
        columns={columns}
        dataSource={tableListDataSource}
        pagination={{
          pageSize: 3,
          showSizeChanger: false,
        }}
        rowKey="key"
        toolBarRender={false}
        search={false}
      />
    );
  };
  

  
 
  

  
  const ipListDataSource= [];
  
  for (let i = 0; i < 10; i += 1) {
    ipListDataSource.push({
      ip: `106.14.98.1${i}4`,
      cpu: 10,
      mem: 20,
      status: [Math.floor(Math.random() * 10) % 4],
      disk: 30,
    });
  }
  
 
  
  const IPList = (props) => {
    const { onChange, ip } = props;
  
    const columns= [
      {
        title: '路段名称',
        key: 'ip',
        dataIndex: 'ip',
        render: (_, item) => {
            console.log(item.ip)
          return <Badge status={item.status} text={item.ip} />;
        },
      },
      
    ];
    return (
        <div className='spilce'>
            <ProTable
        columns={columns}
        request={(params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          console.log(params, sorter, filter);
          return Promise.resolve({
            data: ipListDataSource,
            success: true,
          });
        }}
        rowKey="ip"
        rowClassName={(record) => {
          return record.ip === ip ? styles['split-row-select-active'] : '';
        }}
        toolbar={{
          search: {
            onSearch: (value) => {
              alert(value);
            },
          },
        }}
        options={false}
        pagination={false}
        search={false}
        onRow={(record) => {
          return {
            onClick: () => {
              if (record.ip) {
                onChange(record.ip);
              }
            },
          };
        }}
      /></div>
      
    );
  };
  
  
  
  const videoTable = () => {
    const [ip, setIp] = useState('0.0.0.0');
    const tabList = [
        {
          key: 'tab1',
          tab: '公交',
        },
        {
          key: 'tab2',
          tab: '路段',
        },
      ];
      const contentList= {
        tab1: [<div  className='card-protable'>
        <Card >
          <IPList onChange={(cIp) => setIp(cIp)} ip={ip} />
        </Card>
        <Card style={{flex:1}}>
          <DetailList ip={ip} />
        </Card>
      </div>],
        tab2: [<div  className='card-protable'>
        <Card >
          <IPList onChange={(cIp) => setIp(cIp)} ip={ip} />
        </Card>
        <Card  style={{flex:1}}>
            
          <DetailList ip={ip} />
        </Card>
      </div>]
      };
      const [activeTabKey1, setActiveTabKey1] = useState('tab1');
  const [activeTabKey2, setActiveTabKey2] = useState('app');
  const onTab1Change = (key) => {
    setActiveTabKey1(key);
  };

  const onTab2Change = (key) => {
    setActiveTabKey2(key);
  };
    return (
        <>
      <Card
        style={{
          width: '100%',
        }}
        tabList={tabList}
        activeTabKey={activeTabKey1}
        onTabChange={(key) => {
          onTab1Change(key);
        }}
      >
        {contentList[activeTabKey1]}
      </Card>
     
    </>
      
    );
  };
  
function mapStateToProps(state) {
    const { auth, depMessage } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        depMessage: depMessage.data || [],
        depLoading: depMessage.isRequesting,
        depData,
    };
}
export default connect(mapStateToProps)(videoTable);