import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
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, "pc");
    return (
      <div className="pbpc-content">
        <div className="weapp-salary-sp weapp-salary-payroll-pc-preview">
          <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().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 === "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 === "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 } = templatItem || {};
                                return <div key={index}
                                            className={`list-item ${index % 2 === 0 ? "even" : "odd"} ${index === 0 ? "zero" : ""} ${index === 1 ? "first" : ""}`}>
                                  <div className="item-name" title={name}>
                                    <span className="text">{name || ""}</span>
                                  </div>
                                  <div className="item-count">{salaryItemValue || ""}</div>
                                </div>;

                              })
                            }
                            {
                              (onlyOneGrup && tipPosi === "2" && tip) && (<div className="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" title={tip}>{tip}</div>
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Index;

export const dealTemplate = (itemTypeList, type) => {
  let cloneItemTypeList = _.cloneDeep(itemTypeList);
  let showData = [], onlyOneGrup = false;
  cloneItemTypeList.forEach((group) => {
    const { items, groupName, groupId } = group;
    if (items.length !== 0) {
      items.forEach((item) => {
        item.salaryItemValue = "100";
      });
      if (items.length % 2 && type === "pc") items.push({});
      // 未分类不展示标题
      if (!groupId.includes("222222222222222222")) {
        showData.push({ groupId, groupName, items });
      } else {
        showData.push({ items });
      }
    }
  });
  if (cloneItemTypeList.length === 1) {
    onlyOneGrup = true;
    // 只有一个分组的时候不展示分组名
    cloneItemTypeList[0].name = "";
  }
  return { onlyOneGrup, showData };
};