import React from 'react'
import { Modal, Row, Col } from 'antd'
import { inject, observer } from 'mobx-react';
import { getQueryString } from '../../util/url'

@inject('mySalaryStore')
@observer
export default class MobilePayroll extends React.Component {
    constructor(props) {
        super(props)
        this.id = "";
        this.state = {
            type: 'phone'
        }
    }

    componentWillMount() {
        let id = getQueryString("id");
        let type = getQueryString("type");
        this.setState({type})
        this.id = id;
        const { mySalaryStore: {getMySalaryBill}} = this.props;
        getMySalaryBill(this.id)
    }

    render() {
        const { mySalaryStore: { mySalaryBill }} = this.props;
        const { type } = this.state
        return (
            <div className="computerTemplate" style={{
                backgroundColor: "rgb(246, 246, 246)",
                minHeight: "600px",
                height: "600px",
                overflowY: "scroll",
                paddingTop: "30px",
                paddingBottom: "20px",
                margin: "20px auto",
            }}>
                {/* 标题 */}
                <div className="titleWrapper" style={{
                    textAlign: "center",
                    fontSize: "18px",
                    fontWeight: 700
                }}>
                    { mySalaryBill.salaryTemplate && mySalaryBill.salaryTemplate.theme }
                </div>
                {
                    mySalaryBill.salaryTemplate && mySalaryBill.salaryTemplate.background && mySalaryBill.salaryTemplate.background !== ""
                    && <div className="background-wrapper" style={{
                        height: "200px",
                        margin: "10px"
                    }}>
                        <img className="background-img" src={mySalaryBill.salaryTemplate.background} style={{
                            width: "100%",
                            height: "200px"
                        }}/>
                    </div>
                }

                {/* 员工信息 */}
                <div className="sobItemWrapper">
                    <div className="sobItem" style={{
                        margin: "10px",
                        backgroundColor: "#FFF",
                        padding: "10px",
                        lineHeight: "35px",
                        textAlign: "center"
                    }}>
                        {
                            mySalaryBill.employeeInformation && <Row className="titleRow" style={{
                                border: "1px solid #f2f2f2",
                                textAlign: "left"
                            }}>
                                <Col span={24} className="sobTitle" style={{
                                    paddingLeft: "10px"
                                }}>{mySalaryBill.employeeInformation.groupName}</Col>
                            </Row>
                        }
                        <Row className="contentRow" style={{
                                    borderLeft: "1px solid #f2f2f2",
                                    borderBottom: "1px solid #f2f2f2",
                                    borderRight: "1px solid #f2f2f2"
                                }}>
                        {
                            mySalaryBill.employeeInformation && mySalaryBill.employeeInformation.items.map((item, index) => (
                                <Col>
                                    <Col span={ type == "phone" ? 12 : 4 } className="contentItem" style={{
                                        borderRight: "1px solid #f2f2f2",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis", 
                                        whiteSpace: "nowrap",
                                        height: "35px"
                                    }}>{item.name}</Col>
                                    <Col span={ type == "phone" ? 12 : 4 } className="contentItem" 
                                    style={{
                                        borderRight: (index + 1) % 3 == 0 ? "none": "1px solid #f2f2f2",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis", 
                                        whiteSpace: "nowrap",
                                        height: "35px"
                                    }}
                                    >{item.salaryItemValue}</Col>
                                </Col>
                            ))
                        }
                        </Row>
                    </div>
                </div>

                {
                    mySalaryBill.salaryGroups && mySalaryBill.salaryGroups.length > 0 &&
                        mySalaryBill.salaryGroups.map(group => (
                            <div className="sobItemWrapper">
                                <div className="sobItem" style={{
                                    margin: "10px",
                                    backgroundColor: "#FFF",
                                    padding: "10px",
                                    lineHeight: "35px",
                                    textAlign: "center"
                                }}>
                                {
                                    mySalaryBill.employeeInformation && <Row className="titleRow" style={{
                                        border: "1px solid #f2f2f2",
                                        textAlign: "left"
                                    }}>
                                        <Col span={24} className="sobTitle" style={{
                                            paddingLeft: "10px"
                                        }}>{group.groupName}</Col>
                                    </Row>
                                }
                                <Row className="contentRow" style={{
                                            borderLeft: "1px solid #f2f2f2",
                                            borderBottom: "1px solid #f2f2f2",
                                            borderRight: "1px solid #f2f2f2"
                                        }}>
                                {
                                    group.items && group.items.map((item, index) => (
                                        <Col>
                                            <Col span={ type == "phone" ? 12 : 4 } className="contentItem" style={{
                                                borderRight: "1px solid #f2f2f2",
                                                borderBottom: (index + 1) > 3 ? "1px solid #f2f2f2" : "none",
                                                overflow: "hidden",
                                                textOverflow: "ellipsis", 
                                                whiteSpace: "nowrap",
                                                height: "35px"
                                            }}>{item.name}</Col>
                                            <Col span={ type == "phone" ? 12 : 4 } className="contentItem" 
                                            style={{
                                                borderRight: (index + 1) % 3 == 0 ? "none": "1px solid #f2f2f2",
                                                borderBottom: (index + 1) > 3 ? "1px solid #f2f2f2" : "none",
                                                overflow: "hidden",
                                                textOverflow: "ellipsis", 
                                                whiteSpace: "nowrap",
                                                height: "35px"
                                            }}
                                            >{item.salaryItemValue}</Col>
                                        </Col>
                                    ))
                                }
                                </Row>
                            </div>
                        </div>
                    ))
                }
            </div>
        )
    }
}