import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { dealTemplate } from "./index";

const getLabel = WeaLocaleProvider.getLabel;

class Content extends Component {
  render() {
    const { theme, background, tip, tipPosi, itemTypeList, sendTime = new Date() } = this.props;
    const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "pc");
    return (
      <div className="salary-preview-container">
        <div style={{ border: "10px solid #F3F9FF" }}>
          <div className="edition-center">
            <div className="header">
              <div className="header-title">{theme || ""}</div>
              {/*<div className="header-salary-date-time">{moment(sendTime).format("YYYY-MM-DD HH:mm:ss")}</div>*/}
            </div>
            <div className="body">
              {/*{*/}
              {/*  background &&*/}
              {/*  <div className="comp-img"><img src={`${background}`} alt="logo"/></div>*/}
              {/*}*/}
              {
                !onlyOneGrup && tipPosi.toString() === "1" && tip &&
                <div className="corporate-culture-text" title={tip} dangerouslySetInnerHTML={{ __html: tip }}/>
              }
              <div className="data-detail">
                {
                  showData.map((groupItem, index) => {
                    // 如果当前组下没有条目 当前组直接不展示。
                    if (!groupItem) return null;
                    const { groupId, groupName, items = [] } = groupItem;
                    return (
                      <div className="salary-group" key={groupId || index}>
                        {
                          groupName ? <div className="group-title">
                            <img src={require("../../common/titleLogo.png")} alt=""/>
                            <span>{groupName}</span>
                          </div> : null
                        }
                        <div className="group-list">
                          {
                            (onlyOneGrup && tipPosi.toString() === "1" && tip) && (<div className="send-tip top">
                              <div className="label">{getLabel(111, "发放说明")}</div>
                              <div className="detail">{tip}</div>
                            </div>)
                          }
                          {
                            items.map((templatItem, index) => {
                              const { salaryItemValue, name, salaryItemShowName, id } = templatItem || {};
                              return <div key={index} style={{ display: id ? "flex" : "none" }}
                                          className={`list-item ${index % 2 === 0 ? "even" : "odd"} ${index === 0 ? "zero" : ""} ${index === 1 ? "first" : ""}`}>
                                <div className="item-name" title={salaryItemShowName || name}>
                                  <span className="text">{salaryItemShowName || name || ""}</span>
                                </div>
                                <div className="item-count">{salaryItemValue || ""}</div>
                              </div>;

                            })
                          }
                          {
                            (onlyOneGrup && tipPosi.toString() === "2" && tip) && (<div className="send-tip bottom">
                              <div className="label">{getLabel(111, "发放说明")}</div>
                              <div className="detail">{tip}</div>
                            </div>)
                          }
                        </div>
                      </div>);
                  })
                }
              </div>
              {
                !onlyOneGrup && tipPosi.toString() === "2" && tip &&
                <div className="corporate-culture-text" title={tip} dangerouslySetInnerHTML={{ __html: tip }}/>
              }
              {this.props.children}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Content;