import React from 'react'
import background from './background.png'
import { Row, Col } from 'antd'
import moment from 'moment'

import { inject, observer } from 'mobx-react';

@inject('payrollStore')
@observer
export default class ComputerTemplate extends React.Component {
    constructor(props) {
        super(props);
        this.templateBaseData = {}
        this.salaryItemSetStr = {}
        this.salaryTemplateShowSet = []
    }
    
    componentWillMount() {
        let templateBaseDataStr = window.localStorage.getItem("templateBaseData");
        this.templateBaseData = JSON.parse(templateBaseDataStr)
        let salaryTemplateShowSetStr = window.localStorage.getItem("salaryTemplateShowSet");
        let salaryItemSetStr = window.localStorage.getItem("salaryItemSet");
        this.salaryItemSet = JSON.parse(salaryItemSetStr)
        this.salaryTemplateShowSet = JSON.parse(salaryTemplateShowSetStr)
    }

    render() {
        const { isPC } = this.props;
        return (
            <div className="computerTemplate">
                <div className="titleWrapper">
                    {this.salaryTemplateShowSet.theme.replace("${companyName}", "上海泛微").replace("${salaryMonth}", moment(new Date()).format("YYYY-MM"))}
                </div>
                {
                    this.salaryTemplateShowSet.background && <div className="background-wrapper">
                        <img className="background-img" src={this.salaryTemplateShowSet.background} />
                    </div>
                }

                <div className="sobItemDiv" style={{margin: "20px auto"}}>
                    {
                        this.salaryTemplateShowSet.textContentPosition == 1 && this.salaryTemplateShowSet.textContent
                    }
                </div>

                <div className="sobItemWrapper">
                    {
                        this.salaryItemSet.length > 0 && 
                        this.salaryItemSet.map((group,index) => (
                            <div className="sobItem">
                                <Row className="titleRow">
                                    <Col span={24} className="sobTitle">{group.groupName}</Col>
                                </Row>
                                
                                <Row className="contentRow">
                                    {
                                        group.items && group.items.map(item => (
                                            <Col span={8}>
                                                <Row>
                                                    <Col span={ 12 } className="contentItem">{item.name}</Col>
                                                    <Col span={ 12 } className="contentItem">{index == 0 ? item.salaryItemValue : 10000}</Col>
                                                </Row>
                                            </Col>
                                        ))
                                    }
                                </Row>
                            </div>
                        ))
                    }
                </div>
                <div style={{margin: "20px auto"}}>
                    {
                        this.salaryTemplateShowSet.textContentPosition == 2 && this.salaryTemplateShowSet.textContent
                    }
                </div>
            </div>
        )
    }
}