/*
 * Author: 黎永顺
 * name: 水印预览
 * Description:
 * Date: 2023/6/15
 */
import React, { Component } from "react";
import { salaryBillBaseSetPreviewWaterMark } from "../../apis/payroll";
import { WeaTools } from "ecCom";

const { watermark } = WeaTools;

class WatermarkPreview extends Component {
  componentDidMount() {
    const wmSetting = window.localStorage.getItem("wmSetting");
    wmSetting && this.salaryBillBaseSetPreviewWaterMark(JSON.parse(wmSetting));
  }

  salaryBillBaseSetPreviewWaterMark = (payload) => {
    salaryBillBaseSetPreviewWaterMark(payload).then(({ status, data }) => {
      if (status) {
        const { wmSetting: { wmHeight: height, wmWidth: width, wmNoTransparent, wmRotate } } = payload;
        watermark({
          text: data,
          src: "",
          width, height,
          rotate: `-${wmRotate || 15}`,
          alpha: wmNoTransparent / 100 || 0.15,
          interval: 2000,
          intervalCheck: true,
          clickCheck: true
        });
      }
    });
  };

  render() {
    return (
      <div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
        <h1 style={{ textAlign: "center" }}>水印预览效果</h1>
        <p
          style={{ fontSize: 14 }}>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
        <p
          style={{ fontSize: 14 }}>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
        <p
          style={{ fontSize: 14 }}>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
        <p
          style={{ fontSize: 14 }}>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
        <p
          style={{ fontSize: 14 }}>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
        <p
          style={{ fontSize: 14 }}>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
      </div>
    );
  }
}

export default WatermarkPreview;