import React from "react";
import "../index.less";
import { inject, observer } from "mobx-react";
import moment from "moment";


@inject("payrollStore")
@observer
export default class PhoneTemplate extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      salaryItemSet: [],
      salaryTemplateShowSet: {
        theme: "",
        background: "",
        textContentPosition: "",
        textContent: ""
      }
    };
  }


  componentWillMount() {
    if (this.props.isPreview) return;
    let salaryTemplateShowSetStr = window.localStorage.getItem("salary-showset");
    let salaryItemSetStr = window.localStorage.getItem("salaryItemSet");
    this.setState({
      salaryItemSet: JSON.parse(salaryItemSetStr),
      salaryTemplateShowSet: JSON.parse(salaryTemplateShowSetStr)
    });
  }

  componentDidMount() {
    // && window.em
    if (this.props.isMsgPreview && this.props.salaryItemSet) {
      this.setState({
        salaryItemSet: JSON.parse(this.props.salaryItemSet),
        salaryTemplateShowSet: JSON.parse(this.props.salaryTemplateShowSet)
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.salaryTemplateShowSet !== this.props.salaryTemplateShowSet) {
      this.setState({
        salaryItemSet: JSON.parse(nextProps.salaryItemSet),
        salaryTemplateShowSet: JSON.parse(nextProps.salaryTemplateShowSet)
      });
    }
  }


  render() {
    const { salaryTemplateShowSet, salaryItemSet } = this.state;
    return (
      <div className="computerTemplate phoneTemplate">
        <div className="titleWrapper">
          {salaryTemplateShowSet.theme.replace("${companyName}", "上海泛微").replace("${salaryMonth}", moment(new Date()).format("YYYY-MM"))}
        </div>

        {/*{*/}
        {/*  salaryTemplateShowSet.background && <div className="background-wrapper">*/}
        {/*    <img className="background-img" src={salaryTemplateShowSet.background}/>*/}
        {/*  </div>*/}
        {/*}*/}

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

        <div className="sobItemWrapper">
          {
            salaryItemSet.length > 0 &&
            salaryItemSet.map((group, index) => (
              <div className="sobItem">
                <div className="descript-title">{group.groupName}</div>
                <div className="descriptions-view">
                  <table>
                    {
                      _.map(group.items, item => {
                        return <tr className="descriptions-row">
                          <th
                            className="descriptions-item-label">{(!this.props.isPreview && group.groupId !== "111111111111111111") ? item.salaryItemShowName : item.name}</th>
                          <td className="descriptions-item-content">{item.salaryItemValue || "-"}</td>
                        </tr>;
                      })
                    }
                  </table>
                </div>
              </div>
            ))
          }
        </div>

        <div style={{ margin: "20px 10px" }}>
          {
            salaryTemplateShowSet.textContentPosition == 2 && salaryTemplateShowSet.textContent
          }
        </div>
        {this.props.children}
      </div>
    );
  }
}