import {Col, Form, Row, Select, Tree, Input, Button, Pagination, Space, Table} from "antd";
import Title from '../homepage/compontent/title'
import styles from '../assetmangement_assetgrouping/AssetGrouping.less'
import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons";
import {useEffect, useState} from "react";
const {Search} = Input

const mockData = [
    {
        groupId: 'GRP-001',
        groupName: '集团总部资产组',
        groupLevel: '一级',
        parentGroup: '--',
        assetCount: 1200,
        permissionStrategy: '管理员',
        managementStrategy: '全权限管理+策略继承',
        createTime: '2025-10-01',
    },
    {
        groupId: 'GRP-001-1',
        groupName: '研发中心分部',
        groupLevel: '二级',
        parentGroup: '集团总部资产组',
        assetCount: 500,
        permissionStrategy: '编辑',
        managementStrategy: '自定义维保策略',
        createTime: '2025-10-02',
    },
    {
        groupId: 'GRP-001-2',
        groupName: '生产车间分部',
        groupLevel: '二级',
        parentGroup: '集团总部资产组',
        assetCount: 700,
        permissionStrategy: '编辑',
        managementStrategy: '设备巡检策略',
        createTime: '2025-10-02',
    },
    {
        groupId: 'GRP-001-1-1',
        groupName: '研发传感器组',
        groupLevel: '三级',
        parentGroup: '研发中心分部',
        assetCount: 200,
        permissionStrategy: '查看',
        managementStrategy: '数据采集策略',
        createTime: '2025-10-03',
    },
    {
        groupId: 'GRP-001-1-2',
        groupName: '研发服务器组',
        groupLevel: '三级',
        parentGroup: '研发中心分部',
        assetCount: 300,
        permissionStrategy: '编辑',
        managementStrategy: '集群管理策略',
        createTime: '2025-10-03',
    },
    {
        groupId: 'GRP-001-2-1',
        groupName: '车间产线设备组',
        groupLevel: '三级',
        parentGroup: '生产车间分部',
        assetCount: 400,
        permissionStrategy: '编辑',
        managementStrategy: '产线联动策略',
        createTime: '2025-10-04',
    },
    {
        groupId: 'GRP-001-2-2',
        groupName: '车间环境监测组',
        groupLevel: '三级',
        parentGroup: '生产车间分部',
        assetCount: 300,
        permissionStrategy: '查看',
        managementStrategy: '环境告警策略',
        createTime: '2025-10-04',
    },
];
const AssetGroupTable=()=>{
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10); // 可根据需求调整默认每页条数
    useEffect(() => {
        fetchAssetGroupData(currentPage, pageSize);
    }, [currentPage,pageSize]);
    // 表格列配置
    const columns = [
        {
            title: '分组ID',
            dataIndex: 'groupId',
            key: 'groupId',
        },
        {
            title: '分组名称',
            dataIndex: 'groupName',
            key: 'groupName',
        },
        {
            title: '分组层级',
            dataIndex: 'groupLevel',
            key: 'groupLevel',
        },
        {
            title: '父分组',
            dataIndex: 'parentGroup',
            key: 'parentGroup',
        },
        {
            title: '资产数量',
            dataIndex: 'assetCount',
            key: 'assetCount',
        },
        {
            title: '权限策略',
            dataIndex: 'permissionStrategy',
            key: 'permissionStrategy',
        },
        {
            title: '管理策略',
            dataIndex: 'managementStrategy',
            key: 'managementStrategy',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button style={{color:'#2C9E9D'}} type="text" onClick={() => handleEdit(record)}>编辑</Button>
                    <Button style={{color:'#2C9E9D'}} type="text" onClick={() => handlePermissionConfig(record)}>权限配置</Button>
                    <Button style={{color:'#006665'}} type="text" onClick={() => handleViewAsset(record)}>查看资产</Button>
                </Space>
            ),
            align:'center'
        },
    ];

    // 行选择回调
    const onSelectChange = (selectedKeys) => {
        setSelectedRowKeys(selectedKeys);
    };

    // 分页回调
    const onPageChange = (page) => {
        setCurrentPage(page);
        // 对接接口：请求第page页数据
        // fetchAssetGroupData(page, pageSize);
    };

    const onPageSizeChange = (current, size) => {
        setCurrentPage(1);
        setPageSize(size);
        // 对接接口：请求第current页、每页size条数据
        // fetchAssetGroupData(current, size);
    };

    // 模拟接口请求函数（实际开发中替换为真实接口调用）
    const fetchAssetGroupData = (page, size) => {
        console.log(`请求第${page}页，每页${size}条数据`);
        // 这里写axios/fetch等请求逻辑，例如：
        // axios.get('/api/asset-group', { params: { page, size } }).then(res => {
        //   setTableData(res.data.list);
        //   setTotal(res.data.total);
        // });
    };

    // 编辑操作（预留逻辑）
    const handleEdit = (record) => {
        console.log('编辑', record);
    };

    // 权限配置操作（预留逻辑）
    const handlePermissionConfig = (record) => {
        console.log('权限配置', record);
    };

    // 查看资产操作（预留逻辑）
    const handleViewAsset = (record) => {
        console.log('查看资产', record);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    return (
        <div style={{width:'100%'}}>
            <Table
                rowSelection={rowSelection}
                columns={columns}
                dataSource={mockData} // 实际场景中替换为接口返回的dataSource
                rowKey="groupId"
                pagination={false} // 关闭表格自带分页，使用外部Pagination组件
                style={{width:'100%'}}
                // className={styles.table}
            />
            <div style={{textAlign: 'right', marginTop: 16}}>
                <Pagination
                    current={currentPage}
                    pageSize={pageSize}
                    total={85} // 实际场景中替换为接口返回的total
                    onChange={onPageChange}
                    onShowSizeChange={onPageSizeChange}
                    showSizeChanger
                    pageSizeOptions={['5', '10', '20', '50']}
                    showTotal={(total) => `共 ${total} 条记录`}
                />
            </div>
        </div>
    )
}


const AssetGrouping = () => {
    const treeData = [
        {
            title: '集团总部资产组 (1200)',
            key: '0-0',
            children: [
                {
                    title: '研发中心分部 (500)',
                    key: '0-0-0',
                    children: [
                        {
                            title: '研发传感器组 (200)',
                            key: '0-0-0-0',
                        },
                        {
                            title: '研发服务器组 (300)',
                            key: '0-0-0-1',
                        },
                    ]
                },
                {

                    title: '生产车间分部 (700)',
                    key: '0-0-1',
                  children:[
                      {
                          title: '车间产线设备组 (400)',
                          key: '0-0-1-0',
                      },
                      {
                          title: '车间环境监测组 (300)',
                          key: '0-0-1-1',
                      },
                  ]
              },
          ],
        },
      ];
    const columns = [
        {
            title: '分组ID',
            dataIndex: 'groupId',
            key: 'groupId',
        },
        {
            title: '分组名称',
            dataIndex: 'groupName',
            key: 'groupName',
        },
        {
            title: '分组层级',
            dataIndex: 'groupLevel',
            key: 'groupLevel',
        },
        {
            title: '父分组',
            dataIndex: 'parentGroup',
            key: 'parentGroup',
        },
        {
            title: '资产数量',
            dataIndex: 'assetCount',
            key: 'assetCount',
        },
        {
            title: '权限策略',
            dataIndex: 'permissionStrategy',
            key: 'permissionStrategy',
        },
        {
            title: '管理策略',
            dataIndex: 'managementStrategy',
            key: 'managementStrategy',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button style={{color:'#2C9E9D'}} type="text" onClick={() => handleEdit(record)}>编辑</Button>
                    <Button style={{color:'#2C9E9D'}} type="text" onClick={() => handlePermissionConfig(record)}>权限配置</Button>
                    <Button style={{color:'#006665'}} type="text" onClick={() => handleViewAsset(record)}>查看资产</Button>
                </Space>
            ),
            align:'center'
        },
    ];
  return (
    <div style={{padding:'20px'}}>
        <Row gutter={16}>
            <Col span={5}>
                <div style={{height:'100%',backgroundColor:'rgb(234, 245, 241)',padding:'20px'}}>
                    <Title title={'分组'}></Title>
                   <Tree
                        treeData={treeData}
                        showLine={true}
                        defaultExpandedKeys={['0-0']}
                        defaultSelectedKeys={['0-0-0-0']}
                        checkable={true}
                        // checkStrictly={true}
                        defaultExpandAll={true}
                        style={{backgroundColor:'rgb(234, 245, 241)',paddingTop:'20px',fontSize:'16px'}}
                   >
                   </Tree>
                </div>
            </Col>
            <Col span={19}>
                <Title title={'查询条件'}></Title>
                <Row style={{marginTop:'20px',paddingBottom:'20px',borderBottom:'1px solid #eeeeee'}}>
                    <Search placeholder="分组名称、分组 ID" style={{width:'291px',marginRight:'30px'}}></Search>
                    <Button icon={<SearchOutlined></SearchOutlined>} className={styles['search-button']} style={{marginRight:'30px'}}>查询</Button>
                    <Button icon={<SyncOutlined></SyncOutlined>} className={styles['reset-button']}>重置</Button>
                </Row>
                <Row style={{marginTop:'20px'}}>
                    <div style={{flex:'1'}}>
                        <Title title={'资产列表'}></Title>
                        <Row justify={'space-between'} style={{marginTop:'20px'}}>
                            <Col>
                                <Button style={{marginRight:'30px'}} className={styles['search-button']}>导出分组结构</Button>
                                <Button style={{marginRight:'30px'}} className={styles['reset-button']}>策略模板管理</Button>
                                <Button style={{marginRight:'30px'}} className={styles['del-button']}>删除</Button>
                            </Col>
                            <Col>
                                <Button style={{marginRight:'30px'}} className={styles['reset-button']}>权限配置</Button>
                                <Button icon={<PlusOutlined></PlusOutlined>} className={styles['search-button']}>新增分组</Button>
                            </Col>
                        </Row>
                    </div>
                </Row>
                <Row style={{margin:'30px 0'}}>
                    <AssetGroupTable ></AssetGroupTable>
                </Row>
            </Col>
        </Row>
    </div>
  )
}
export default AssetGrouping
