import { Button, notification } from "ant-design-vue";
import { CloseSquareTwoTone } from "@ant-design/icons-vue";
import { h, VNode } from "vue";
/**
 * 消息弹窗组件 Notification
 * @param {string} title 标题
 * @param {string} content 内容
 * @param {string} id 唯一标识
 * @param {number} duration 持续时间： 默认不关闭（单位：秒）
 * @param {string} btnAText 按钮1 名称
 * @param {string} btnBText 按钮2 名称
 * @param {Event} btnAEvent 按钮1 事件
 * @param {Event} btnBEvent 按钮2 事件
 */
export default function popup(
  title = "标题",
  content: VNode[] | string = "请输入内容",
  id = "",
  duration = 0,
  btnAText = "", btnBText = "",
  btnAEvent = () => {/* do nothing.*/ },
  btnBEvent = () => {/* do nothing.*/ }  
): void {
  const key = id === "" ? `id-${Date.now()}` : id;
  notification.open({
    key,
    duration: duration,
    message: h(
      "h2",
      {
        style: { color: "#fff",
        textAlign: "center"
    },
      },
      title
    ),
    description: h(
      "div",
      {
        style: { color: "#fff" },
      },
      content
    ),
    placement: 'topLeft',
    style: {
      width: "540px",
      // height: "600px",
      // marginLeft: `-200px`,
      /**right导致页面重排，不流畅，但目前mac和Windows通过效果
       */
      top: "50%",
      left: `50%`, 
      transform: 'translate(-50%,-50%)',
      backgroundColor: "rgba(0 ,64 ,64 , 0.8)",
      userSelect: "none",
    //boxShadow: "inset 0 0 15px 4px #56ffff",
    // boxShadow: "inset 0 0 4px 2px #56ffff",
      borderRadius:"5px",
      border:"2px solid #56ffff88",
      color: "white",
      position: 'fixed',
    },
    btn: h("div", null, [
      btnAText == "" ? null : h(
        Button,
        {
          type: "primary",
          size: "small",
          danger: true,
          onClick: btnAEvent,
        },
        btnAText
      ),
      btnBText == "" ? null : h(
        Button,
        {
          type: "primary",
          size: "small",
          style: {
            marginLeft: "7px",
          },
          danger: true,
          onClick: btnBEvent,
        },
        btnBText
      ),
    ]),
    closeIcon:  h(CloseSquareTwoTone, {
      style: {
        display:"none"
      },
    }) ,
    onClose: () => {
      notification.close(key);
    },
  });
}