import React from 'react';
import { mergeDetailColumns, dataSource} from './columns'
import { Row, Col, Table } from 'antd'
import { WeaHelpfulTip } from "ecCom"

export default class FileMergeDetail extends React.Component {
    render() {
        return (
            <div className="fileMergeDetail">
                <div className="detialItemWrapper">
                    <div className="titleWrapper">
                        <span className="itemTitle">基本信息</span>
                        <div className="rightItemWrapper">
                            <span>薪资所属月：2021-11</span>
                            <WeaHelpfulTip
                                style={{marginLeft: "10px"}}
                                width={200}
                                title="薪资周期\n
                                2021-11-01至2021-11-30\n
                                税款所属期\n
                                2021-12\n
                                考勤取值周期\n
                                2021-11-01至2021-11-30\n
                                福利台账月份\n
                                引用2021-11的福利台账数据"
                                placement="topLeft"
                            />
                        </div>
                    </div>

                    <div className="itemContent">
                        <Row classsName="itemRow">
                            <Col span={8}>
                                <Row>
                                    <Col span={12}>姓名</Col>
                                    <Col span={12}>张三</Col>
                                </Row> 
                            </Col>
                            
                            <Col span={8}>
                                <Row>
                                    <Col span={12}>部门</Col>
                                    <Col span={12}>研发</Col>
                                </Row> 
                            </Col>

                            
                            <Col span={8}>
                                <Row>
                                    <Col span={12}>岗位</Col>
                                    <Col span={12}>开发</Col>
                                </Row> 
                            </Col>
                        </Row>
                        
                        <Row className="itemRow">
                            <Col span={8}>
                                <Row>
                                    <Col span={12}>入职日期</Col>
                                    <Col span={12}>2020-10-20</Col>
                                </Row> 
                            </Col>
                            
                            <Col span={8}>
                                <Row>
                                    <Col span={12}>手机号</Col>
                                    <Col span={12}>18888888888</Col>
                                </Row> 
                            </Col>

                            
                            <Col span={8}>
                                <Row>
                                    <Col span={12}>个税扣缴义务人</Col>
                                    <Col span={12}>义务人一</Col>
                                </Row> 
                            </Col>
                        </Row>
                    </div>
                </div>
                <div className="detialItemWrapper">
                    <div className="titleWrapper">
                        <span className="itemTitle">合并计税详情</span>
                        <WeaHelpfulTip
                            style={{marginLeft: "10px"}}
                            width={200}
                            title="薪资周期\n
                            2021-11-01至2021-11-30\n
                            税款所属期\n
                            2021-12\n
                            考勤取值周期\n
                            2021-11-01至2021-11-30\n
                            福利台账月份\n
                            引用2021-11的福利台账数据"
                            placement="topLeft"
                        />
                    </div>
                    <div className="tableWrapper">
                        <Table dataSource={dataSource} columns={mergeDetailColumns}/>
                    </div>
                </div>
            </div>
        )
    }
}