import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import moment from "moment";
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 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}>{tip}</div>
            }
            <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">{groupName}</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 } = templatItem || {};
                            return <div key={index}
                                        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}>{tip}</div>
            }
          </div>
        </div>
        {this.props.children}
      </div>
    );
  }
}

export default Content;