/*
  *  自定义移动端弹框组件
  *
  * @Author:    黎永顺
  * @Date:      2025/4/16
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { removeElementById } from "../../util";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class MobileModal extends Component {
  componentDidMount() {
    this.setMetaViewport();
  }

  setMetaViewport = () => {
    // 检查是否已存在 viewport meta 标签
    let viewportMeta = document.querySelector("meta[name=\"viewport\"]");
    if (!viewportMeta) {
      // 如果不存在，创建一个新的 meta 标签
      viewportMeta = document.createElement("meta");
      viewportMeta.setAttribute("name", "viewport");
      document.head.appendChild(viewportMeta);
    }
    // 设置或更新 viewport 的 content 属性
    const content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover";
    viewportMeta.setAttribute("content", content);
  };

  render() {
    return (
      <div id="am-modal-container">
        <div>
          <div className="am-modal-mask"></div>
          <div className="am-modal-wrap">
            <div className="am-modal am-modal-transparent">
              <div className="am-modal-content">
                <div className="am-modal-header">
                  <div className="am-modal-title">{this.props.title}</div>
                </div>
                <div className="am-modal-body">{this.props.children}</div>
                <div className="am-modal-footer">
                  <div className="am-modal-button-group-h">
                    <a href="javascript:void(0);" className="am-modal-button"
                       onClick={() => removeElementById("am-modal-container")}>{getLabel(111, "取消")}</a>
                    <a href="javascript:void(0);" className="am-modal-button"
                       onClick={this.props.onConfirm}>{getLabel(111, "确定")}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default MobileModal;