<script lang="ts">
    import { onMount } from "svelte";

let isMaskMode = false;
let title = "这是一个标题";
let content = "这是一个提示！给你显示东西！";

onMount(async () => {
  window['setContent'] = (newTitle: string, newContent: string) => {
    title = newTitle;
    content = newContent;
  };

  window['setMaskMode'] = (maskMode: boolean) => {
    isMaskMode = maskMode;
  };
});


</script>

<div class="container"> 
  <div id="main" class:mask-mode="{isMaskMode}">
    <div class="notice-container">
      <div class="notice-title">{title}</div>
      <div class="notice-content">{content}</div>
    </div>
  </div>
</div>
<button id="maskButton" on:click="{() => isMaskMode = !isMaskMode}">
  切换遮罩模式
</button>

<style>
  .container {
    font-size: 2em;
    background-color: rgb(0, 0, 0);
    padding: 10px;
  }

  #main {
    background-color: rgb(90, 90, 90);
    width: fit-content;
    padding: 4px 0.25em 0.25em 8px;
  }

  .notice-container {
    width: fit-content;
    border: 0.05em solid rgb(120, 120, 120);
    background-color: white;
    border-radius: 0.5em;
    overflow: hidden;
    box-shadow: 0.1em 0.1em 0.2em rgba(90,90,90, 0.75);
  }

  .notice-title {
    font-size: 1em;
    font-weight: bold;
    padding: 0.6em;
    color: white;
    background-color: #ff3939;
    text-align: center;
  }

  .notice-content {
    font-size: 1em;
    font-weight: bold;
    padding: 0.6em;
    color: #333;
    max-width: 12em;
  }

  .mask-mode {
    background-color: black!important;
    .notice-container {
      border: 0.05em solid rgb(255, 255, 255);
      box-shadow: 0.1em 0.1em 0.2em rgba(255, 255, 255, 0.5);
    }
    .notice-title {
      background-color: #ffffff!important;
    }
    .notice-content {
      color: white!important;
    }
  }

  button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #333;
    color: white;
  }
</style>