/*
 * Author: 黎永顺
 * name: 移动端-工资单预览
 * Description:
 * Date: 2023/10/19
 */
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { dealTemplate } from "../pcTemplate";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  render() {
    const { theme, background, tip, tipPosi, itemTypeList, title } = this.props;
    const { onlyOneGrup, showData } = dealTemplate(_.filter(itemTypeList, o => !!o), "mobile");
    return (
      <React.Fragment>
        {/*<div className="pbmc-head">{title || getLabel(111, "薪酬预览")}</div>*/}
        <div className="pbmc-body">
          <div className="weapp-salary-payroll-mobile-preview">
            <div className="bill-container">
              <div className="bill-info-header">
                <div className="title">{theme || ""}</div>
                {/*<div className="time">{moment().format("YYYY-MM-DD HH:mm:ss")}</div>*/}
                {/*{*/}
                {/*  background &&*/}
                {/*  <div className="img"><img src={`${background}`} alt="logo"/></div>*/}
                {/*}*/}
              </div>
              {
                !onlyOneGrup && tipPosi.toString() === "1" && tip &&
                <div className="corporate-culture-text top" title={tip} dangerouslySetInnerHTML={{ __html: tip }}/>
              }
              <div className="salary-detail-table-container">
                {
                  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="list-item 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 className="list-item" key={index}>
                                <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="list-item 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 footer" title={tip} dangerouslySetInnerHTML={{ __html: tip }}/>
              }
              {this.props.children}
            </div>
          </div>
        </div>
        <div className="pbmc-footer">
          <div className="pbmcf-indicator"></div>
        </div>
      </React.Fragment>
    );
  }
}

export default Index;