import { List, Avatar } from 'antd';
import * as React from 'react';

const RemarkList: React.FC<any> = props => {
    const { remarkList,detailRemark } = props 

    const renderRemarkList = (remark:any) => {
        const billState = Number(remark.befor)-Number(remark.after) >=0? '核减':'增加' 
        const balance  = Math.abs(Number(remark.befor-remark.after))
        return <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between', width:600}}>
            <div>{remark?.alias? remark?.alias: remark?.data_api_name}产品{billState}{balance}次(核定前{remark.befor}次,核定后{remark.after}次)</div>
            <div>{remark?.time}</div>
        </div>
    }

    const renderDetailRemarkList = (remark:any) => {
        return <div style={{ fontSize:13, color:'gray'}}>{remark}</div>
    }

    return (
        <List
            itemLayout="horizontal"
            size={detailRemark? 'small':'default'}
            dataSource={remarkList}
            header={<div style={{ fontSize:16, fontWeight:600}}>备注</div>}
            renderItem={item => (
            <List.Item>
                <List.Item.Meta
                title={detailRemark ? renderDetailRemarkList(item) : renderRemarkList(item)}
                />
            </List.Item>
        )}
      />
    )
    
};
export default RemarkList;