/*
 * Author: 黎永顺
 * name:工资单发放-重构页面-工资单模板预览
 * Description:
 * Date: 2023/10/18
 */
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { message } from "antd";
import moment from "moment";
import computer from "./computer.png";
import phone from "./phone_new.png";
import PcTemplate from "../../../components/pcTemplate";
import MobileTemplate from "../../../components/mobileTemplate";
import cs from "classnames";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class TmpPreview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: "0", theme: "", tip: "", background: "", tipPosi: "", itemTypeList: [],
      phsImgList: [
        { key: "0", src: computer },
        { key: "1", src: phone }
      ]
    };
  }

  componentDidMount() {
    const dataStr = window.localStorage.getItem("weapp-salary-payroll-preview-data");
    if (!dataStr) {
      message.warning(getLabel(111, "参数异常！"));
      return;
    }
    const data = JSON.parse(dataStr);
    let theme = data.theme || "";
    theme = theme.replaceAll("${salaryMonth}", moment().format("YYYY年MM月"));
    theme = theme.replaceAll("${salaryYear}", moment().format("YYYY年"));
    this.setState({
      theme, tip: data.textContent || "",
      background: data.background || "",
      tipPosi: data.textContentPosition || "",
      itemTypeList: data.salaryItemSetting || []
    });
    if (theme.indexOf("${companyName}") !== -1) {
      const themeAccount = window.localStorage.getItem("theme-account") || {};
      if (themeAccount)
        this.setState({ theme: theme.replaceAll("${companyName}", JSON.parse(themeAccount).subcompanyname) });
    }
  }

  render() {
    const { phsImgList, active } = this.state;
    return (
      <div className="salary-payroll-preview">
        <div className="p-header">
          <div className="ph-switch">
            {
              _.map(phsImgList, o => (
                <div className={cs("phs-btn", { "active": active === o.key })}
                     onClick={() => this.setState({ active: o.key })}><img src={o.src} alt=""/>
                </div>))
            }
          </div>
        </div>
        <div className="p-body">
          <div className="pb-pc-container" style={{ display: active === "0" ? "block" : "none" }}>
            <PcTemplate {...this.state}/>
          </div>
          <div className="pb-mobile-container" style={{ display: active === "1" ? "block" : "none" }}>
            <MobileTemplate {...this.state}/>
          </div>
        </div>
      </div>
    );
  }
}

export default TmpPreview;