import React from "react"
import {Descriptions,Typography,Row,Col, Tooltip} from "antd"
import styles from "./index.module.less"
import png from "./imgs/note.png"
import {pageUtil} from "@/utils"

const {Item} = Descriptions
const {Text} = Typography

const TopPanel:React.FC<any>=(props)=>{

    const {total,attrs,treeNode} = props

    return (
        <div className={styles.topmessage}>
            <div className={styles.message}>
                <Row gutter={[10,10]}>
                    {
                        attrs.map((item:any,key:any)=>{
                            return (
                                <Col span={item.span||8} key={key}>
                                    <Text ellipsis={true}>
                                        <span style={{marginRight:10}}>{item.cnName}:</span>
                                        <Tooltip title={treeNode[item.name]} placement="top">
                                            {treeNode[item.name]}
                                        </Tooltip>
                                    </Text>
                                </Col>
                            )
                        })
                    }
                    
                </Row>
                {/* <Descriptions size="small">
                    {
                        attrs.map((item:any,key:any)=>{
                            return <Item key={key} label={item.cnName}></Item>
                        })
                    }
                </Descriptions> */}
            </div>
            <div className={styles.count}>
                <img src={png} />
                <div className={styles.countnum}>
                    <div>记录数</div>
                    <div>{total}</div>
                </div>
            </div>
        </div>
    )
}

export default TopPanel