import React, { useEffect, useState } from "react";
import { Modal, Skeleton, Table } from "antd";

interface Props{
    visible:boolean;//显示
    item?:BearCostSetting.Item;//行数据
    onCancel: () => void;
}
const { Column } = Table;

const BearModal = ({visible, onCancel, item = {} as BearCostSetting.Item}:Props) => {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 500);
    }, []);
    
    return (
      <Modal
        title="分摊比例"
        visible={visible}
        onCancel={onCancel}
        onOk={onCancel}
        cancelButtonProps={{ hidden: true }}
        width="30%"
        
      >
        <Skeleton
          active
          loading={loading}
        >
          <Table
            dataSource={item.shareRateItemList || []}
            rowKey={(item) => `${item.id}`}
          >
            <Column title="门店/往来单位名称" dataIndex="name" render={(t) => t || "-"} />
            <Column title="分摊比例" dataIndex="shareRate" render={(t) => (t && `${(t*100).toFixed(2)}%`) || "-"} />
            
          </Table>
        </Skeleton>
      </Modal>
    );
};

export default BearModal;