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

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  render() {
    const { theme, background, tip, tipPosi, itemTypeList } = this.props;
    const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "mobile");
    return (
      <React.Fragment>
        <div className="pbmc-head">{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 === "1" && tip &&
                <div className="corporate-culture-text top" title={tip}>{tip}</div>
              }
              <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 === "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 } = templatItem || {};
                              return <div className="list-item" key={index}>
                                <div className="item-name" title={name}><span className="text">{name || ""}</span></div>
                                <div className="item-count">{salaryItemValue || "100"}</div>
                              </div>;
                            })
                          }
                          {
                            (onlyOneGrup && tipPosi === "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 === "2" && tip &&
                <div className="corporate-culture-text footer" title={tip}>{tip}</div>
              }
            </div>
          </div>
        </div>
        <div className="pbmc-footer">
          <div className="pbmcf-indicator"></div>
        </div>
      </React.Fragment>
    );
  }
}

export default Index;