<template>
  <q-dialog
    persistent
    v-model="show_dialog"
    @before-hide="resetData"
    @keydown="
      (evt) => {
        if (!loading && evt.keyCode == 27) {
          show_dialog = false;
        }
        if (
          evt.keyCode == 37 &&
          (current_index != -1 || multiple_select.length > 1)
        ) {
          //左
          sub_x();
        }
        if (
          evt.keyCode == 38 &&
          (current_index != -1 || multiple_select.length > 1)
        ) {
          //上
          sub_y();
        }
        if (
          evt.keyCode == 39 &&
          (current_index != -1 || multiple_select.length > 1)
        ) {
          //右
          add_x();
        }
        if (
          evt.keyCode == 40 &&
          (current_index != -1 || multiple_select.length > 1)
        ) {
          //下
          add_y();
        }
        if (evt.keyCode == 17) {
          //ctrl
          multiple = true;
        }
        //对齐
        if (evt.keyCode == 87 && multiple_select.length > 1) {
          //上
          alignTop();
        }
        if (evt.keyCode == 83 && multiple_select.length > 1) {
          //下
          alignBottom();
        }
        if (evt.keyCode == 65 && multiple_select.length > 1) {
          //左
          alignLeft();
        }
        if (evt.keyCode == 68 && multiple_select.length > 1) {
          //右
          alignRight();
        }
        //保存魔墙配置
        if (evt.keyCode == 83 && evt.shiftKey) {
          //右
          export_magic_wall();
        }
      }
    "
    @keyup="
      (evt) => {
        if (evt.keyCode == 17) {
          //ctrl
          multiple = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="max-width: 60vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("magic wall") }}
            </div>
            <q-space />
            <div>
              <q-btn
                :loading="loading"
                flat
                round
                :disable="loading"
                icon="close"
                color="red"
                v-close-popup
                @click="close_magic_switch()"
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-section style="max-height: 80vh; width: 55vw" class="q-pa-none">
          <q-scroll-area style="height: 70vh">
            <q-card class="my-card" flat bordered>
              <q-card-section horizontal>
                <q-card-section class="col-3" style="">
                  <div class="text-h5">{{ $t("angle") }}</div>
                  <q-separator />
                  <br />
                  <div class="row no-wrap items-center">
                    <q-item>
                      <q-item-section avatar>
                        <span class="q-mb-md" style="font-size: 1rem">
                          angle:</span
                        >
                      </q-item-section>
                      <q-item-section>
                        <q-input
                          v-if="current_index > -1"
                          type="number"
                          min="0"
                          v-model="test_monitor_wall[current_index].angle"
                          @keydown="testLog($event)"
                          oninput="if(value<0)value=0;if(value>360)value=360;"
                          hint=""
                          @update:model-value="changeAngle()"
                        >
                          <template v-slot:append>
                            <span class="input_append">°</span>
                          </template>
                        </q-input>
                        <q-input
                          v-else
                          type="number"
                          min="0"
                          :model-value="0"
                          :disable="true"
                          hint=""
                        >
                          <template v-slot:append>
                            <span class="input_append">°</span>
                          </template>
                        </q-input>
                      </q-item-section>
                    </q-item>
                  </div>
                  <br />
                  <div class="text-h5">
                    {{ $t("physical central location") }}
                  </div>
                  <q-separator />
                  <br />
                  <div class="row no-wrap items-center">
                    <q-item>
                      <q-item-section avatar>
                        <span class="q-mb-md">X:</span>
                      </q-item-section>
                      <q-item-section>
                        <q-input
                          v-if="current_index > -1"
                          type="number"
                          :min="min_x()"
                          v-model="test_monitor_wall[current_index].centerx"
                          @update:model-value="center_x()"
                          @keydown="testLog($event)"
                          :max="max_x()"
                          :rules="[
                            (val) =>
                              (val != null &&
                                val != undefined &&
                                val.toString().length > 0) ||
                              $t('Please type something'),
                            (val) =>
                              parseInt(val) >= 0 ||
                              $t('the number must be greater than 0'),
                          ]"
                          lazy-rules
                          hint=""
                        >
                          <template v-slot:append>
                            <span class="input_append text-h6">px</span>
                          </template>
                        </q-input>
                        <q-input
                          v-else
                          type="number"
                          min="0"
                          :model-value="0"
                          :disable="true"
                          hint=""
                        >
                          <template v-slot:append>
                            <span class="input_append text-h6">px</span>
                          </template>
                        </q-input>
                      </q-item-section>
                    </q-item>
                  </div>
                  <br />

                  <div class="row">
                    <q-item>
                      <q-item-section avatar>
                        <span class="q-mb-md">Y:</span>
                      </q-item-section>
                      <q-item-section>
                        <q-input
                          v-if="current_index > -1"
                          :hint="''"
                          type="number"
                          :min="min_y()"
                          :max="max_y()"
                          v-model="test_monitor_wall[current_index].centery"
                          @update:model-value="center_y()"
                          @keydown="testLog($event)"
                          :rules="[
                            (val) =>
                              (val != null &&
                                val != undefined &&
                                val.toString().length > 0) ||
                              $t('Please type something'),
                            (val) =>
                              parseInt(val) > 0 ||
                              $t('the number must be greater than 0'),
                          ]"
                          lazy-rules
                        >
                          <template v-slot:append>
                            <span class="input_append text-h6">px</span>
                          </template>
                        </q-input>
                        <q-input
                          v-else
                          type="number"
                          min="0"
                          :model-value="0"
                          :disable="true"
                          hint=""
                        >
                          <template v-slot:append>
                            <span class="input_append text-h6">px</span>
                          </template>
                        </q-input>
                      </q-item-section>
                    </q-item>
                  </div>
                </q-card-section>
                <q-separator vertical></q-separator>

                <q-card-section
                  @dragenter="onDragEnter"
                  @dragleave="onDragLeave"
                  @dragover="onDragOver"
                  @drop="onDrop"
                  style="
                    max-height: 80vh;
                    width: 75%;
                    position: relative;
                    margin-top: 1.5vh; ;
                  "
                >
                  <div class="text-h6 row">
                    <div for="" class="col-2">{{ $t("resize") }}</div>
                    <q-slider
                      class="col"
                      style="font-size: 0.7rem"
                      v-model="percenter"
                      @update:model-value="changePercenter()"
                      @keydown.prevent.stop.capture="testLog($event)"
                      label
                      :label-value="percenter"
                      markers
                      switch-marker-labels-side
                      label-always
                      :min="0.1"
                      :max="2"
                      :step="0.05"
                    />
                  </div>
                  <div
                    style="
                      position: absolute;
                      height: 20.7vw;
                      width: 36.8vw;
                      text-align: center;
                    "
                    :class="$store.state.power_state ? 'wall' : ''"
                  >
                    <!-- <div
                    class="row"
                    v-for="i in 64 / 8"
                    :key="i"
                    style="height: 12.5%; align-items: center"
                    :class="i % 2 == 0 ? 'wall_row' : ''"
                  >
                    <div class="col" v-for="j in 8" :key="j">
                      {{ i * j }}
                    </div>
                  </div> -->
                  </div>
                  <div
                    ref="wall"
                    v-if="$store.state.power_state"
                    style="
                      position: absolute;
                      height: 20.7vw;
                      width: 36.8vw;
                      overflow: hidden;
                    "
                    @click="canel_active()"
                  >
                    <div
                      v-for="(item, index) of test_monitor_wall"
                      @click.stop="Unchecked == false"
                    >
                      <vue3-resize-drag
                        v-if="item.isShow"
                        :w="item.w"
                        :h="item.h"
                        :x="item.currentx"
                        :y="item.currenty"
                        :isActive="true"
                        :isGuide="true && item.angle == 0"
                        :rotate="parseInt(item.angle.toString())"
                        :is-resizable="false"
                        :resizeIconSize="10"
                        style="
                          background-color: grey;
                          text-align: center;
                          position: absolute;
                        "
                        @moveHandler="moveingMonitor(item, $event, index)"
                        @moveEndHandler="moveMonitor(item, $event)"
                        @mousedown="activeMouseDown(item, index)"
                        :z-index="item.active ? 99 : 0"
                      >
                        <div
                          class="full-height full-width"
                          :class="item.active ? 'monitor_selected' : ''"
                          style="text-align: center"
                          :style="{ lineHeight: show_box_line_height(item.h) }"
                        >
                          <q-popup-proxy context-menu>
                            <q-list>
                              <q-item clickable v-close-popup>
                                <q-item-section
                                  @click="closeWindow(item, index)"
                                >
                                  {{ $t("close this window") }}
                                </q-item-section>
                              </q-item>
                              <q-item clickable v-close-popup>
                                <q-item-section
                                  @click="closeOtherWindows(item, index)"
                                >
                                  {{ $t("close other windows") }}
                                </q-item-section>
                              </q-item>
                              <q-item clickable v-close-popup>
                                <q-item-section @click="closeAllWindows()">
                                  {{ $t("close all windows") }}
                                </q-item-section>
                              </q-item>
                            </q-list>
                          </q-popup-proxy>
                          {{ item.uuid }}
                          <q-separator></q-separator>
                          x:{{ item.centerx }} y:{{ item.centery }}
                          <!-- <q-separator></q-separator>
                        W:{{ filter_px(item.w) }}H:{{ filter_px(item.h) }} -->
                        </div>
                      </vue3-resize-drag>
                    </div>
                  </div>
                </q-card-section>
              </q-card-section>
            </q-card>
            <br />
            <q-card class="my-card" flat bordered>
              <q-item>
                <q-item-section>
                  <q-item-label class="text-h6">{{
                    $t("monitors list")
                  }}</q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section avatar>
                  <span class="q-mb-md">W:</span>
                </q-item-section>
                <q-item-section>
                  <q-input
                    v-if="monitor_list_current_index > -1"
                    type="text"
                    v-model="test_monitor_list[monitor_list_current_index].cmw"
                    @update:model-value="changewidth()"
                    :rules="[
                      (val) =>
                        (val != null &&
                          val != undefined &&
                          val.toString().length > 0) ||
                        $t('Please type something'),
                      (val) =>
                        parseInt(val) >= 0 ||
                        $t('the number must be greater than 0'),
                      (val) =>
                        parseInt(val) <= 3840 ||
                        $t('the number must be less than 3840'),
                    ]"
                    lazy-rules
                    hint=""
                  >
                    <template v-slot:append>
                      <span class="input_append text-h6">mm</span>
                    </template>
                  </q-input>
                  <q-input
                    v-else
                    type="number"
                    :model-value="0"
                    :disable="true"
                    hint=""
                  >
                    <template v-slot:append>
                      <span class="input_append text-h6">mm</span>
                    </template>
                  </q-input>
                </q-item-section>
                <q-item-section avatar>
                  <span class="q-mb-md">H:</span>
                </q-item-section>
                <q-item-section>
                  <q-input
                    v-if="monitor_list_current_index > -1"
                    type="text"
                    v-model="test_monitor_list[monitor_list_current_index].cmh"
                    @update:model-value="changeHeight()"
                    :rules="[
                      (val) =>
                        (val != null &&
                          val != undefined &&
                          val.toString().length > 0) ||
                        $t('Please type something'),
                      (val) =>
                        parseInt(val) >= 0 ||
                        $t('the number must be greater than 0'),
                      (val) =>
                        parseInt(val) <= 2160 ||
                        $t('the number must be less than 2160'),
                    ]"
                    lazy-rules
                    hint=""
                  >
                    <template v-slot:append>
                      <span class="input_append text-h6">mm</span>
                    </template>
                  </q-input>
                  <q-input
                    v-else
                    type="number"
                    min="0"
                    :model-value="0"
                    :disable="true"
                    hint=""
                  >
                    <template v-slot:append>
                      <span class="input_append text-h6">mm</span>
                    </template>
                  </q-input>
                </q-item-section>
              </q-item>
              <q-separator></q-separator>
              <q-card-section horizontal>
                <q-list key="uuid" class="full-width">
                  <div
                    v-for="item in Math.ceil(output_length / 4)"
                    class="row justify-around"
                  >
                    <div
                      v-for="j in 4"
                      style="display: inline-block"
                      v-if="item < output_length / 4 || output_length % 4 == 0"
                      :style="{ lineHeight: box_line_height(item, j) }"
                    >
                      <div
                        v-if="
                          test_monitor_list[(item - 1) * 4 + (j - 1)].isHide
                        "
                      ></div>
                      <div
                        v-else
                        :class="
                          test_monitor_list[(item - 1) * 4 + (j - 1)].isactive
                            ? 'list_select'
                            : ''
                        "
                        style="
                        background-color: grey;
                        border: 1px solid black;
                        text-align: center;
                        font-size: {{ percenter }};
                      "
                        :style="{
                          width: box_width(item, j),
                          height: box_height(item, j),
                        }"
                        :draggable="$store.state.power_state"
                        @click="activeMonitorList((item - 1) * 4 + (j - 1))"
                        @dragstart="
                          (evt) =>
                            onDragStart(
                              evt,
                              test_monitor_list[(item - 1) * 4 + (j - 1)]
                            )
                        "
                        @dragend="(evt) => onDragend(evt, item, j)"
                      >
                        {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
                        W:{{
                          filter_px(
                            test_monitor_list[(item - 1) * 4 + (j - 1)].cmw
                          )
                        }}
                        H:{{
                          filter_px(
                            test_monitor_list[(item - 1) * 4 + (j - 1)].cmh
                          )
                        }}
                      </div>
                    </div>
                    <div
                      v-else
                      v-for="j in output_length % 4"
                      style="display: inline-block; text-align: center"
                      :style="{ lineHeight: box_line_height(item, j) }"
                    >
                      <div
                        v-if="
                          test_monitor_list[(item - 1) * 4 + (j - 1)].isHide
                        "
                      ></div>
                      <!-- :class="monitor_list_current_index==(item - 1) * 4 + (j - 1)?'list_select':''" -->
                      <div
                        v-else
                        style="background-color: grey; border: 1px solid black"
                        :style="{
                          width: box_width(item, j),
                          height: box_height(item, j),
                        }"
                        :class="
                          test_monitor_list[(item - 1) * 4 + (j - 1)].isactive
                            ? 'list_select'
                            : ''
                        "
                        @click="activeMonitorList((item - 1) * 4 + (j - 1))"
                        :draggable="$store.state.power_state"
                        @dragstart="
                          (evt) =>
                            onDragStart(
                              evt,
                              test_monitor_list[(item - 1) * 4 + (j - 1)]
                            )
                        "
                        @dragend="(evt) => onDragend(evt, item, j)"
                      >
                        {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
                        W:{{
                          filter_px(
                            test_monitor_list[(item - 1) * 4 + (j - 1)].cmw
                          )
                        }}
                        H:{{
                          filter_px(
                            test_monitor_list[(item - 1) * 4 + (j - 1)].cmh
                          )
                        }}
                      </div>
                    </div>
                  </div>
                </q-list>
              </q-card-section>
            </q-card>

            <q-separator />
          </q-scroll-area>
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <q-btn
            v-if="magic_isbutton"
            :loading="loading"
            flat
            :label="$t('export magic')"
            no-caps
            color="primary"
            @click="export_magic_wall"
          />
          <q-toggle
            v-model="magic_switch"
            @update:model-value="upload_magic_switch()"
            :label="$t('raster graph')"
          />
          <q-space />
          <q-btn
            :loading="loading"
            flat
            :label="$t('Cancel')"
            no-caps
            color="primary"
            v-close-popup
            @click="close_magic_switch()"
          />
          <q-btn
            :loading="loading"
            flat
            no-caps
            :label="$t('revert')"
            color="primary"
            @click="refresh_all"
          />
          <q-btn
            ref="accept"
            flat
            :label="$t('Accept')"
            no-caps
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.monitor_selected {
  outline-style: dashed;
  outline-color: transparent;
  background-color: dimgrey;
}

.wall {
  border: 1px solid black;
  background: no-repeat url("../../public/magic_bg/bg.jpg");
  background-size: 36.8vw 20.7vw;
}

.wall_row {
  background-color: #166fab;
}

.drag-enter {
  outline-style: dashed;
}
.list_select {
  border: 2px dashed black !important;
}
</style>

<script lang="ts">
import { defineComponent, ref, watch, computed, Ref, reactive } from "vue";
import { useStore } from "src/store";
import {
  useQuasar,
  extend,
  QBtn,
  QCard,
  QCardActions,
  QCardSection,
  QDialog,
  QInput,
  QItem,
  QItemLabel,
  QItemSection,
  QList,
  QPopupProxy,
  QSeparator,
  QSpace,
  QTooltip,
  exportFile,
  QForm,
  QSlider,
} from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
import MagicWallConfig from "src/entities/MagicWallConfig";
import { PointF } from "src/entities/RectF";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import { NotifyMessage } from "src/common/ClientConnection";

export class test_monitor {
  uuid = "";
  active = false;
  start_x = 0;
  start_y = 0;
  InitialW = 0;
  InitialH = 0;
  startw = 0.0;
  starth = 0.0;
  w = 0.0;
  h = 0.0;
  cmw = 0.0;
  cmh = 0.0;
  currentx = 0.0;
  currenty = 0.0;
  centerx = 0;
  centery = 0;
  angle = 0;
  id = 0;
  resize = 0.0;
  resizew = 0.0;
  resizeh = 0.0;
  isHide = false;
  isShow = false;
  isactive = false;
  reset() {
    this.uuid = "";
    this.active = false;
    this.start_x = 0;
    this.start_y = 0;
    this.w = 0.0;
    this.h = 0.0;
    this.cmh = 0.0;
    this.cmw = 0.0;
    this.currentx = 0.0;
    this.currenty = 0.0;
    this.centerx = 0;
    this.centery = 0;
    this.angle = 0;
    this.id = 0;
    this.isHide = false; //列表隐藏
    this.isShow = false; //墙显示
    this.resize = 0.0;
    this.resizew = 0.0;
    this.resizeh = 0.0;
    this.InitialW = 0;
    this.InitialW = 0;
    this.startw = 0.0;
    this.starth = 0.0;
    this.isactive = false;
  }
  constructor(id: number, uuid: string, w: number, h: number, resize: number) {
    this.reset();
    this.id = id;
    this.uuid = uuid;
    this.w = w;
    this.h = h;
    this.resize = resize;
    this.startw = 128;
    this.starth = 72;
    this.cmw = 0.0;
    this.cmh = 0.0;
  }
}
class test_monitor2 {
  w = 0.0;
  h = 0.0;
  currentx = 0.0;
  currenty = 0.0;
  centerx = 0.0;
  centery = 0.0;
  angle = 0;
  id = 0;
  constructor(id: number, w: number, h: number) {
    this.currentx = 0.0;
    this.currenty = 0.0;
    this.angle = 0;
    this.centerx = 0;
    this.centery = 0;
    this.id = id;
    this.w = w;
    this.h = h;
  }
}
class exporttxt {
  id = 0;
  point_left_top = {};
  point_left_bootom = {};
  point_right_top = {};
  point_right_bottom = {};
  w = 0.0;
  h = 0.0;
  angle = 0;
  constructor(
    id: number,
    w: number,
    h: number,
    angle: number,
    point_left_top: {},
    point_left_bootom: {},
    point_right_top: {},
    point_right_bottom: {}
  ) {
    this.id = id;
    this.point_left_top = point_left_top;
    this.point_left_bootom = point_left_bootom;
    this.point_right_top = point_right_top;
    this.point_right_bottom = point_right_bottom;
    this.w = w;
    this.h = h;
    this.angle = angle;
  }
}
export default defineComponent({
  name: "ComponentControlPanelDialog",
  components: { vue3ResizeDrag },
  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();
    let lcm = ref(0);
    let show_dialog = ref(false);
    let magic_isbutton = ref(false);
    let loading = ref(false);
    let wall: Ref<HTMLElement | null> = ref(null);
    let current_index = ref(-1);
    let monitor_list_current_index = ref(-1);
    const monitor_percenter = ref([0.1, 0.2, 0.3, 0.4, 0.5]);
    const monitor_proportion = ref(["16:9", "4:3"]);
    let window_rect = reactive({
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      angle: 0,
    });
    let multiple = ref(false);
    const aw = 303.5;
    const ah = 171;
    const bw = 269.5;
    const bh = 152;
    const cw = 255.5;
    const ch = 144;
    const model = ref(null);
    let magic_switch = ref(false);
    const options = ref([
      {
        id: "55",
        w: 1214,
        h: 684,
        desc: "Google",
      },
      {
        id: "49",
        w: 1078,
        h: 608,
        desc: "Facebook",
      },
      {
        id: "46",
        w: 1022,
        h: 577,
        desc: "Twitter",
      },
      {
        id: "70",
        w: 1920,
        h: 1080,
        desc: "Apple",
      },
      // {
      //   id: '55',
      //   w:1214,
      //   h:684,
      //   desc: 'Oracle',
      //   inactive: true
      // }
    ]);
    //调整与背景的百分比
    const percenter = ref(1);
    let last_percenter = ref(1);
    const ar = 0.5;
    const br = 0.6;
    const cr = 0.7;
    let test_monitor_list: Ref<test_monitor[]> = ref([
      new test_monitor(0, "01", aw, ah, ar),
      new test_monitor(1, "02", aw, ah, ar),
      new test_monitor(2, "03", aw, ah, ar),
      new test_monitor(3, "04", aw, ah, ar),
      new test_monitor(4, "05", bw, bh, br),
      new test_monitor(5, "06", bw, bh, br),
      new test_monitor(6, "07", bw, bh, br),
      new test_monitor(7, "08", bw, bh, br),
      new test_monitor(8, "09", cw, ch, cr),
      new test_monitor(9, "10", cw, ch, cr),
      new test_monitor(10, "11", cw, ch, cr),
      new test_monitor(11, "12", cw, ch, cr),
      // new test_monitor(12, "13", cw, ch, cr)
    ]);
    interface show__Rect {
      width: number;
      height: number;
      x: number;
      y: number;
      left: number;
      top: number;
      angle: number;
    }

    const filter_px = (val: number) => {
      return Math.round(val);
    };
    const realtime_upload = async () => {
      let client = GlobalData.getInstance().getCurrentClient();
      const settings = await GlobalData.getInstance()
        .getCurrentClient()
        ?.getOutputBoardSetting();
      if (settings) {
        output_length.value =
          parseInt(settings.wall_col.toString()) *
          parseInt(settings.wall_row.toString());
        if (output_length.value > test_monitor_list.value.length) {
          let num = output_length.value - test_monitor_list.value.length;
          while (num > 0) {
            let index = test_monitor_list.value.length;
            let uuid = (index + 1).toString();
            test_monitor_list.value.push(
              new test_monitor(index, uuid, aw, ah, ar)
            );
            num--;
          }
          getpx();
        }
      }

      const cloud_monitor_list = new MagicWallConfig();
      const wall_dom = wall.value;
      if (wall_dom && settings) {
        cloud_monitor_list.magic_wall_enable = true;
        cloud_monitor_list.col = parseInt(settings.wall_col.toString());
        cloud_monitor_list.row = parseInt(settings.wall_row.toString());
        test_monitor_wall.value.forEach((element, index) => {
          if (element.isShow) {
            cloud_monitor_list.windows.push({
              index: element.id,
              lt: new PointF(
                element.currentx / wall_dom.offsetWidth,
                element.currenty / wall_dom.offsetHeight
              ),
              h: element.h / wall_dom.offsetHeight,
              w: element.w / wall_dom.offsetWidth,
              angle: parseInt(element.angle.toString()),
              initial_h: element.InitialH,
              initial_w: element.InitialW,
              percenter: percenter.value,
              background_h: wall_dom.offsetHeight,
              background_w: wall_dom.offsetWidth,
            });
          }
        });
      }
      if (client) {
        const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
        if (setMagic?.success) {
          let monitorList: any = [];
          test_monitor_wall.value.forEach((element, index) => {
            if (element.isShow && wall_dom) {
              monitorList.push({
                id: element.id,
                currentx: element.currentx / wall_dom.offsetWidth,
                currenty: element.currenty / wall_dom.offsetHeight,
                h: element.h / wall_dom.offsetHeight,
                w: element.w / wall_dom.offsetWidth,
                angle: parseInt(element.angle.toString()),
      centerx: element.centerx / 3840,
                  centery: element.centery / 2160,
              });
            }
          });
          $store.commit("setShowMonitorList", monitorList);
        }
        if (!setMagic?.success) {
          $q.notify({
            color: "negative",
            icon: "warning",
            message: $t.t("update magic wall") + $t.t("fail") + "!",
            position: "top",
            timeout: 2500,
          });
        }
      }
    };
    const getpx = () => {
      const wall_dom = wall.value;
      if (wall_dom) {
        lcm.value = (wall_dom.offsetWidth * 0.5) / 1214;
        test_monitor_list.value.forEach((ele) => {
          ele.cmw = Math.round(ele.w / lcm.value);
          ele.cmh = Math.round(ele.h / lcm.value);
        });
      }
    };
    const upload_magic_switch = async () => {
      let client = GlobalData.getInstance().getCurrentClient();
      if (client) {
        const SetMagicWallGridState = await client.setMagicWallGridState(
          magic_switch.value
        );
      }
    };
    const close_magic_switch = () => {
      magic_switch.value = false;
      upload_magic_switch();
    };
    const radians = (item: test_monitor) => {
      return /*a*/ (item.angle * Math.PI) / 180;
    };
    const calculateCoordinates = (
      px: number,
      py: number,
      cx: number,
      cy: number,
      item: test_monitor
    ) => {
      const x =
        cx +
        (px - cx) * Math.cos(radians(item)) -
        (py - cy) * Math.sin(radians(item));

      const y =
        cy +
        (px - cx) * Math.sin(radians(item)) +
        (py - cy) * Math.cos(radians(item));

      return { x, y };
    };
    const four_point = (item: test_monitor) => {
      const wall_dom = wall.value;
      let centerx: any, centery: any;
      if (wall_dom) {
        centerx = (item.centerx / 3840) * wall_dom.offsetWidth;
        centery = (item.centery / 2160) * wall_dom.offsetHeight;
      }
      centerx = Math.round(centerx);
      centery = Math.round(centery);
      // item.centerx = Math.round((item.centerx));
      // item.centery = Math.round(item.centery);
      const x2: number = item.currentx + item.w;
      const y2: number = item.currenty + item.h;
      const x1: number = centerx;
      const y1: number = centery;
      if (item.angle != 0) {
        const point_left_top = calculateCoordinates(
          item.currentx,
          item.currenty,
          x1,
          y1,
          item
        );
        const point_left_bootom = calculateCoordinates(
          item.currentx,
          y2,
          x1,
          y1,
          item
        );
        const point_right_top = calculateCoordinates(
          x2,
          item.currenty,
          x1,
          y1,
          item
        );
        const point_right_bottom = calculateCoordinates(x2, y2, x1, y1, item);
        const point_list = [
          point_left_top,
          point_left_bootom,
          point_right_top,
          point_right_bottom,
        ];
        return point_list;
      } else {
        const point_list = [
          { x: item.currentx, y: item.currenty }, //左上
          { x: x2, y: item.currenty }, //右上
          { x: item.currentx, y: y2 }, //左下
          { x: x2, y: y2 }, //右下
        ];
        return point_list;
      }
    };
    let offsetHeight = ref(0.0);
    let offsetWidth = ref(0.0);
    let test_monitor_wall: Ref<test_monitor[]> = ref([]);
    let last_wall: Ref<test_monitor[]> = ref([]);
    let output_length = ref(0);
    let multiple_select: Ref<number[]> = ref([]);
    const set_x = () => {
      const wall_dom = wall.value;
      const item = test_monitor_wall.value[current_index.value];
      const rx: number = item.currentx + item.w;
      if (wall_dom) {
        if (rx > wall_dom.offsetWidth) {
          item.currentx = wall_dom.offsetWidth - item.w;
          return item.currentx;
        } else {
          return item.currentx;
        }
      }
    };
    const min_x = (
      item: test_monitor = test_monitor_wall.value[current_index.value]
    ) => {
      const wall_dom = wall.value;
      const point_list = four_point(item);
      if (wall_dom) {
        if (item.angle != 0 && point_list) {
          let minx = 0;
          point_list.forEach((element) => {
            if (minx > element.x) {
              minx = element.x;
            }
          });
          if (minx < 0) {
            return Math.round(
              ((item.w / 2 + item.currentx + Math.abs(minx)) /
                wall_dom.offsetWidth) *
                3840
            );
          } else {
            return Math.round((minx / wall_dom.offsetWidth) * 3840);
          }
        } else {
          return Math.round((item.w / 2 / wall_dom.offsetWidth) * 3840);
        }
      }
    };
    const max_x = (
      item: test_monitor = test_monitor_wall.value[current_index.value]
    ) => {
      const wall_dom = wall.value;
      const point_list = four_point(item);
      if (wall_dom) {
        if (item.angle != 0 && point_list) {
          let maxx = 0;
          point_list.forEach((element) => {
            if (maxx < element.x) {
              maxx = element.x;
            }
          });
          if (maxx > wall_dom.offsetWidth) {
            return Math.round(
              ((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) /
                wall_dom.offsetWidth) *
                3840
            );
          } else {
            return Math.round(
              ((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) /
                wall_dom.offsetWidth) *
                3840
            );
          }
        } else {
          return Math.round(
            ((wall_dom.offsetWidth - item.w / 2) / wall_dom.offsetWidth) * 3840
          );
        }
      }
    };
    const set_y = () => {
      //输入框正向溢出
      const wall_dom = wall.value;
      const item = test_monitor_wall.value[current_index.value];
      const ry: number = item.currenty + item.h;
      if (wall_dom) {
        if (ry > wall_dom.offsetHeight) {
          item.currenty = wall_dom.offsetHeight - item.h;
          return item.currenty;
        } else {
          return item.currenty;
        }
      }
    };
    const min_y = (
      item: test_monitor = test_monitor_wall.value[current_index.value]
    ) => {
      const wall_dom = wall.value;
      const point_list = four_point(item);
      if (wall_dom) {
        if (item.angle != 0 && point_list) {
          let miny = 0;
          point_list.forEach((element) => {
            if (miny > element.y) {
              miny = element.y;
            }
          });
          if (miny < 0) {
            return Math.round(
              ((item.h / 2 + item.currenty + Math.abs(miny)) /
                wall_dom.offsetHeight) *
                2160
            );
          } else {
            return Math.round((miny / wall_dom.offsetHeight) * 2160);
          }
        } else {
          return Math.round((item.h / 2 / wall_dom.offsetHeight) * 2160);
        }
      }
    };
    const max_y = (
      item: test_monitor = test_monitor_wall.value[current_index.value]
    ) => {
      const wall_dom = wall.value;
      const point_list = four_point(item);
      if (wall_dom) {
        if (item.angle != 0 && point_list) {
          let maxy = 0;
          point_list.forEach((element) => {
            if (maxy < element.y) {
              maxy = element.y;
            }
          });
          if (maxy > wall_dom.offsetHeight) {
            return Math.round(
              ((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) /
                wall_dom.offsetHeight) *
                2160
            );
          } else {
            return Math.round(
              ((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) /
                wall_dom.offsetHeight) *
                2160
            );
          }
        } else {
          return Math.round(
            ((wall_dom.offsetHeight - item.h / 2) / wall_dom.offsetHeight) *
              2160
          );
        }
      }
    };
    let Unchecked = ref(false);
    const moveingMonitor = (
      item: test_monitor,
      rect: show__Rect,
      index: number
    ) => {
      item.active = true;
      if (item.active) {
        test_monitor_wall.value.forEach((element) => {
          element.active = false;
        });
      }
      const wall_dom = wall.value;
      if (wall_dom) {
        item.h = item.InitialH * percenter.value;
        item.w = item.InitialW * percenter.value;
        item.active = true;
        item.currentx = rect.left;
        item.currenty = rect.top;
        item.centerx = Math.round(
          ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840
        );
        item.centery = Math.round(
          ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160
        );
      }

      if (Number.isNaN(rect.left || rect.left < 0)) {
        item.currentx = 0;
      }
    };

    const moveMonitor = (item: test_monitor, rect: show__Rect) => {
      //计算是否超出，然后放回
      const wall_dom = wall.value;
      if (item.angle != 0) {
        exceedrange(item);
      } else if (wall_dom) {
        if (rect.left < 0) {
          item.currentx = 0;
        } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
          item.currentx = Number(set_x()) ?? 0;
        } else {
          item.currentx = rect.left;
        }
        if (rect.top < 0) {
          item.currenty = 0;
        } else if (wall_dom && rect.top > wall_dom.offsetHeight - item.h) {
          item.currenty = set_y() ?? 0;
        } else {
          item.currenty = rect.top;
        }
        item.centerx = Math.round(
          ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840
        );
        item.centery = Math.round(
          ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160
        );
      }
      realtime_upload();
    };
    const exceedrange = (item: test_monitor) => {
      const wall_dom = wall.value;
      let a = 0;
      const point_list = four_point(item);
      if (wall_dom && point_list) {
        let maxx = 0;
        let maxy = 0;
        let minx = 0;
        let miny = 0;
        point_list.forEach((element) => {
          if (minx > element.x) {
            minx = element.x;
          }
          if (maxx < element.x) {
            maxx = element.x;
          }
          if (miny > element.y) {
            miny = element.y;
          }
          if (maxy < element.y) {
            maxy = element.y;
          }
        });
        if (minx < 0) {
          item.currentx += Math.abs(minx);
          item.centerx = Math.round(
            ((item.w / 2 + item.currentx) / wall_dom.offsetWidth) * 3840
          );
        }
        if (maxx > wall_dom.offsetWidth) {
          item.currentx -= maxx - wall_dom.offsetWidth;
          item.centerx = Math.round(
            ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840
          );
        }
        if (miny < 0) {
          item.currenty += Math.abs(miny);
          item.centery = Math.round(
            ((item.h / 2 + item.currenty) / wall_dom.offsetHeight) * 2160
          );
        }
        if (maxy > wall_dom.offsetHeight) {
          item.currenty -= maxy - wall_dom.offsetHeight;
          item.centery = Math.round(
            ((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160
          );
        }
      }
    };
    const activeMonitorList = (index: number) => {
      monitor_list_current_index.value = index;
      test_monitor_list.value[index].isactive = true;
      test_monitor_list.value.forEach((element) => {
        element.isactive = false;
      });
      test_monitor_list.value[index].isactive = true;
    };
    let test_delete_flag = false;
    const refresh_all = () => {
      test_monitor_wall.value = [];
      current_index.value = -1;
      monitor_list_current_index.value=-1
      percenter.value = last_percenter.value;
      multiple_select.value = [];
      multiple.value = false;
      loading.value = false;
      test_monitor_list.value.forEach((element) => {
        element.isHide = false;
        element.isactive=false;
      });
      last_wall.value.forEach((element) => {
        element.isShow = true;
        test_monitor_wall.value.push(JSON.parse(JSON.stringify(element)));
        test_monitor_list.value[element.id].isHide = true;
      });
      realtime_upload();
    };
    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
      const wall_dom = wall.value;
      if (wall_dom) {
        test_monitor_wall.value.forEach(async (element) => {
          let teph = element.InitialH;
          let tepw = element.InitialW;
          element.InitialH = wall_dom.offsetHeight * element.resizeh;
          element.InitialW = wall_dom.offsetWidth * element.resizew;
          element.h = element.InitialH * percenter.value;
          element.w = element.InitialW * percenter.value;
          let sizeh = element.InitialH / teph;
          let sizew = element.InitialW / tepw;
          element.currentx = element.currentx * sizew;
          element.currenty = element.currenty * sizeh;
          element.centerx =
            Math.round(((element.currentx + element.w / 2) / wall_dom.offsetWidth) * 3840);
          element.centery =
            Math.round(((element.currenty + element.h / 2) / wall_dom.offsetHeight) * 2160);
        });
      }
    });
    const refresh_magic = (a: any) => {
      let monitorList: any = [];
      $store.commit("setShowMonitorList", monitorList);
      if (a) {
        a.forEach((element: any) => {
          let item: test_monitor2 = new test_monitor2(0, 0, 0);
          item.h = element.h;
          item.w = element.w;
          item.currentx = element.lt.x;
          item.currenty = element.lt.y;
          item.angle = element.angle;
          item.id = element.index;
          if ($store.state.show_monitor_list.length == 0) {
            monitorList.push(item);
            $store.commit("setShowMonitorList", monitorList);
          } else {
            let flag = false;
            $store.state.show_monitor_list.forEach((ele: any) => {
              if (element.index == ele.id) {
                flag = true;
              }
            });
            if (!flag) {
              monitorList.push(item);
              $store.commit("setShowMonitorList", monitorList);
            }
          }
        });
      }
      const wall_dom = wall.value;
      if (a && wall_dom) {
        test_monitor_wall.value = [];
        a.forEach((element: any) => {
          let item: test_monitor = new test_monitor(0, "0", 0, 0, 0);
          extend(true, item, test_monitor_list.value[element.index]);
          let sizeh = wall_dom.offsetHeight / element.background_h;
          let sizew = wall_dom.offsetWidth / element.background_w;
          item.currentx = element.lt.x * wall_dom.offsetWidth;
          item.currenty = element.lt.y * wall_dom.offsetHeight;
          percenter.value = parseFloat(element.percenter.toString());
          last_percenter.value = percenter.value;
          item.InitialH = element.initial_h * sizeh;
          item.InitialW = element.initial_w * sizew;
          item.h = item.InitialH * percenter.value;
          item.w = item.InitialW * percenter.value;
          item.resizew = item.InitialW / wall_dom.offsetWidth;
          item.resizeh = item.InitialH / wall_dom.offsetHeight;
          item.centerx =
            Math.round(((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840);
          item.centery =
            Math.round(((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160);
          item.angle = element.angle;
          item.isShow = true;
          test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
          test_monitor_list.value.forEach((ele) => {
            if (element.index == ele.id) {
              ele.isHide = true;
            }
          });
        });
      }
    };
    const sub_x = () => {
      const wall_dom = wall.value;
      let item = test_monitor_wall.value[current_index.value];
      let minx = 1000;
      if (wall_dom) {
        if (multiple_select.value.length > 1) {
          multiple_select.value.forEach((element) => {
            if (element != -1) {
              let tep_item = test_monitor_wall.value[element];
              let min = min_x(tep_item) ?? 0;
              if (tep_item.centerx > min) {
                if (minx > tep_item.centerx && tep_item.angle != 0) {
                  minx = tep_item.centerx;
                  current_index.value = element;
                }
                tep_item.centerx--;
                tep_item.currentx =
                  (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2;
              }
            }
          });
        } else {
          let min = min_x() ?? 0;
          if (item.centerx > min) {
            item.centerx--;
            item.currentx =
                  (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2;
          }
        }
      }
      realtime_upload();
    };
    const sub_y = () => {
      const wall_dom = wall.value;
      let item = test_monitor_wall.value[current_index.value];
      let miny = 1000;
      if (wall_dom) {
        if (multiple_select.value.length > 1) {
          multiple_select.value.forEach((element) => {
            if (element != -1) {
              let tep_item = test_monitor_wall.value[element];
              let min = min_y(tep_item) ?? 0;
              if (tep_item.centery > min) {
                if (miny > tep_item.centery) {
                  miny = tep_item.centery;
                  current_index.value = element;
                }
                tep_item.centery--;
                tep_item.currenty =
                  (tep_item.centery / 2160) * wall_dom.offsetHeight -
                  tep_item.h/2;
              }
            }
          });
        } else {
          let min = min_y() ?? 0;
          if (item.centery > min) {
            item.centery--;
            item.currenty =
                  (item.centery / 2160) * wall_dom.offsetHeight -
                  item.h/2;
          }
        }
      }
      realtime_upload();
    };
    const add_x = () => {
      let item = test_monitor_wall.value[current_index.value];
      let maxx = 0;
      if (multiple_select.value.length > 1) {
        multiple_select.value.forEach((element) => {
          if (element != -1) {
            let tep_item = test_monitor_wall.value[element];
            let max = max_x(tep_item) ?? 0;
            if (tep_item.centerx < max) {
              if (maxx < tep_item.centerx && tep_item.angle != 0) {
                maxx = tep_item.centerx;
                current_index.value = element;
              }
              tep_item.centerx++;
              const wall_dom = wall.value;
              if (wall_dom) {
                tep_item.currentx =
                  (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2;
              }
            }
          }
        });
      } else {
        let max = max_x() ?? 0;
        if (item.centerx < max) {
          item.centerx++;
          const wall_dom = wall.value;
          if (wall_dom) {
            item.currentx =
              (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2;
          }
        }
      }
      realtime_upload();
    };
    const add_y = () => {
      const wall_dom = wall.value;
      let item = test_monitor_wall.value[current_index.value];
      let maxy = 0;
      if (wall_dom) {
        if (multiple_select.value.length > 1) {
          multiple_select.value.forEach((element) => {
            if (element != -1) {
              let tep_item = test_monitor_wall.value[element];
              let max = max_y(tep_item) ?? 0;
              if (tep_item.centery < max) {
                if (maxy < tep_item.centery && tep_item.angle != 0) {
                  maxy = tep_item.centery;
                  current_index.value = element;
                }
                tep_item.centery++;
                tep_item.currenty =
                  (tep_item.centery / 2160) * wall_dom.offsetHeight -
                  tep_item.h/2;
              }
            }
          });
        } else {
          let max = max_y() ?? 0;
          if (item.centery < max) {
            item.centery++;
            item.currenty =
              (item.centery / 2160) * wall_dom.offsetHeight - item.h/2;
          }
        }
      }
      realtime_upload();
    };
    EventBus.getInstance().on(
      EventNamesDefine.NotifyMessage,
      (notify: NotifyMessage) => {
        try {
          switch (notify.packet.command) {
            case Protocol.Commands.kRpcSetMagicWallGridState:
              {
                let temp = JSON.parse(
                  notify.data
                ) as Protocol.MagicWallGridStateNotifyEntity;
                if (temp) {
                  magic_switch.value = temp.grid_showing;
                }
              }
              break;
            case Protocol.Commands.kSetApplicationConfig: {
              let temp = JSON.parse(
                notify.data
              ) as Protocol.SetApplicationConfigRequestEntity;
              if (temp.key == "magic_wall_config") {
                const a = JSON.parse(temp.value).windows;
                if (
                  current_index.value == -1 ||
                  multiple_select.value.length < 1
                ) {
                  refresh_magic(a);
                }
              }
              break;
            }
          }
        } catch (e) {
          console.error(e);
        }
      }
    );
    return {
      sub_x,
      sub_y,
      add_x,
      add_y,
      close_magic_switch,
      upload_magic_switch,
      magic_switch,
      magic_isbutton,
      refresh_all,
      getpx,
      lcm,
      model,
      options,
      offsetHeight,
      offsetWidth,
      filter_px,
      activeMonitorList,
      monitor_percenter,
      monitor_proportion,
      output_length,
      multiple_select,
      multiple,
      exceedrange,
      four_point,
      show_dialog,
      loading,
      window_rect,
      Unchecked,
      monitor_list_current_index,
      current_index,
      test_monitor_list,
      test_monitor_wall,
      percenter,
      last_percenter,
      wall,
      set_x,
      min_x,
      max_x,
      set_y,
      min_y,
      max_y,
      moveMonitor,
      moveingMonitor,
      loga(a: any) {
        console.log(a);
      },
      async showDialog() {
        monitor_list_current_index.value = -1;
        show_dialog.value = true;
        magic_switch.value = true;
        let client = GlobalData.getInstance().getCurrentClient();
        if (client) {
          const settings = await GlobalData.getInstance()
            .getCurrentClient()
            ?.getOutputBoardSetting();
          const response = await client.getMagicWallConfig();
          const wall_dom = wall.value;
          const SetMagicWallGridState = await client.setMagicWallGridState(
            magic_switch.value
          );
          if (wall_dom) {
            offsetHeight.value = wall_dom.offsetHeight;
            offsetWidth.value = wall_dom.offsetWidth;
            getpx();
          }
          if (response && settings) {
            const a = response?.config.windows;
            output_length.value =
              parseInt(settings.wall_col.toString()) *
              parseInt(settings.wall_row.toString());
            if (output_length.value > test_monitor_list.value.length) {
              let num = output_length.value - test_monitor_list.value.length;
              while (num > 0) {
                let index = test_monitor_list.value.length;
                let uuid = (index + 1).toString();
                test_monitor_list.value.push(
                  new test_monitor(index, uuid, aw, ah, ar)
                );
                num--;
              }
              getpx();
            }
            if (
              output_length.value !=
              response.config.col * response.config.row
            ) {
              test_monitor_wall.value = [];
              current_index.value = -1;
              percenter.value = 1;
              multiple_select.value = [];
              multiple.value = false;
              last_wall.value = [];
              test_monitor_list.value.forEach((element) => {
                element.isHide = false;
              });
              $store.commit("setShowMonitorList", []);
              loading.value = false;
            } else if (a && wall_dom) {
              a.forEach((element) => {
                let item: test_monitor = new test_monitor(0, "0", 0, 0, 0);
                extend(true, item, test_monitor_list.value[element.index]);
                let sizeh = wall_dom.offsetHeight / element.background_h;
                let sizew = wall_dom.offsetWidth / element.background_w;
                item.currentx = element.lt.x * wall_dom.offsetWidth;
                item.currenty = element.lt.y * wall_dom.offsetHeight;
                percenter.value = parseFloat(element.percenter.toString());
                last_percenter.value = percenter.value;
                item.InitialH = element.initial_h * sizeh;
                item.InitialW = element.initial_w * sizew;
                item.h = item.InitialH * percenter.value;
                item.w = item.InitialW * percenter.value;
                item.resizew = item.InitialW / wall_dom.offsetWidth;
                item.resizeh = item.InitialH / wall_dom.offsetHeight;
                item.centerx = Math.round(
                  ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840
                );
                item.centery = Math.round(
                  ((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160
                );
                item.angle = element.angle;
                item.isShow = true;
                test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
                last_wall.value.push(JSON.parse(JSON.stringify(item)));
                test_monitor_list.value.forEach((ele) => {
                  if (element.index == ele.id) {
                    ele.isHide = true;
                  }
                });
              });
              if (a.length == 1) {
                current_index.value = 0;
              } else {
                current_index.value = -1;
              }
            }
          }
        }
      },
      resetData() {
        test_monitor_wall.value = [];
        current_index.value = -1;
        percenter.value = 1;
        multiple_select.value = [];
        multiple.value = false;
        last_wall.value = [];
        test_monitor_list.value.forEach((element) => {
          element.isHide = false;
          element.isactive = false;
        });

        loading.value = false;
      },
      async onSubmit() {
        loading.value = true;
        let client = GlobalData.getInstance().getCurrentClient();
        const wall_dom = wall.value;
        const settings = await GlobalData.getInstance()
          .getCurrentClient()
          ?.getOutputBoardSetting();
        if (client && wall_dom && settings) {
          const cloud_monitor_list = new MagicWallConfig();
          cloud_monitor_list.magic_wall_enable = true;
          cloud_monitor_list.col = parseInt(settings.wall_col.toString());
          cloud_monitor_list.row = parseInt(settings.wall_row.toString());
          test_monitor_wall.value.forEach((element, index) => {
            if (element.isShow) {
              cloud_monitor_list.windows.push({
                index: element.id,
                lt: new PointF(
                  element.currentx / wall_dom.offsetWidth,
                  element.currenty / wall_dom.offsetHeight
                ),
                h: element.h / wall_dom.offsetHeight,
                w: element.w / wall_dom.offsetWidth,
                angle: parseInt(element.angle.toString()),
                initial_h: element.InitialH,
                initial_w: element.InitialW,
                percenter: percenter.value,
                background_h: wall_dom.offsetHeight,
                background_w: wall_dom.offsetWidth,
              });
            }
          });
          const setMagic = await client.setMagicWallConfig(cloud_monitor_list);

          if (setMagic?.success) {
            let monitorList: any = [];
            test_monitor_wall.value.forEach((element, index) => {
              if (element.isShow && wall_dom) {
                monitorList.push({
                  id: element.id,
                  currentx: element.currentx / wall_dom.offsetWidth,
                  currenty: element.currenty / wall_dom.offsetHeight,
                  h: element.h / wall_dom.offsetHeight,
                  w: element.w / wall_dom.offsetWidth,
                  angle: parseInt(element.angle.toString()),
                  centerx: element.centerx / 3840,
                  centery: element.centery / 2160,
                });
              }
            });
            $store.commit("setShowMonitorList", monitorList);
          }
          $q.notify({
            color: setMagic?.success ? "positive" : "negative",
            icon: setMagic?.success ? "done" : "warning",
            message:
              $t.t("set magic wall") +
              (setMagic?.success ? $t.t("success") : $t.t("fail")) +
              "!",
            position: "top",
            timeout: 2500,
          });
          show_dialog.value = false;
          close_magic_switch();
        }
        loading.value = false;
      },
      activeMouseDown(item: test_monitor, index: number) {
        item.active = true;
        Unchecked.value = false;
        if (multiple.value) {
          if (multiple_select.value.indexOf(index) != -1) {
            test_monitor_wall.value[index].active = false;
            multiple_select.value[multiple_select.value.indexOf(index)] = -1;
          } else {
            multiple_select.value.push(index);
            test_monitor_wall.value[index].active = true;
            current_index.value = index;
          }
        } else {
          multiple_select.value = [];
          if (item.active) {
            test_monitor_wall.value.forEach((element) => {
              element.active = false;
            });
            multiple_select.value.push(index);
          }
          item.active = true;
        }
        item.active = true;

        current_index.value = index;
      },
      onDragStart(e: DragEvent, item: test_monitor) {
        item.start_x = e.offsetX;
        item.start_y = e.offsetY;
        item.active = false;
        test_delete_flag = false;
        e.dataTransfer?.setData("item", JSON.stringify(item));
        monitor_list_current_index.value = -1;
      },
      onDragOver(e: DragEvent) {
        e.preventDefault();
      },
      onDrop(e: DragEvent) {
        if (e.dataTransfer?.getData("item") != "") {
          let item = JSON.parse(e.dataTransfer?.getData("item") + "");
          item.currentx = e.offsetX - item.start_x;
          item.currenty = e.offsetY - item.start_y;
          item.active = true;
          item.angle = 0;
          if (item.active) {
            test_monitor_wall.value.forEach((element) => {
              element.active = false;
            });
          }
          if (item.currentx < 0) {
            item.currentx = 0;
            window_rect.x = 0;
          } else {
            window_rect.x = item.currentx;
          }
          if (item.currenty < 0) {
            item.currenty = 0;
            window_rect.y = 0;
          } else {
            window_rect.y = item.currenty;
          }
          test_delete_flag = false;
          const wall_dom = wall.value;
          item.isShow = true;
          if (wall_dom) {
            item.InitialH = item.h;
            item.InitialW = item.w;
            item.resizew = item.w / wall_dom.offsetWidth;
            item.resizeh = item.h / wall_dom.offsetHeight;
            item.h = item.InitialH * percenter.value;
            item.w = item.InitialW * percenter.value;
            if (item.currentx > wall_dom?.offsetWidth - item.w) {
              item.currentx = wall_dom?.offsetWidth - item.w;
            }
            if (item.currenty > wall_dom?.offsetHeight - item.h) {
              item.currenty = wall_dom?.offsetHeight - item.h;
            }
            item.centerx = Math.round(
              ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840
            );
            item.centery = Math.round(
              ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160
            );
            if (
              item.h > wall_dom.offsetHeight ||
              item.w > wall_dom.offsetWidth
            ) {
              $q.notify({
                color: "negative",
                icon: "warning",
                message: "该显示器超出,请调整缩放",
                position: "top",
                timeout: 2500,
              });
            } else {
              if (test_monitor_wall.value.indexOf(item) == -1) {
                test_monitor_wall.value.push(item);
                test_delete_flag = true;
              }
              current_index.value = test_monitor_wall.value.length - 1;
              realtime_upload();
              monitor_list_current_index.value = -1;
            }
          }
        }
      },

      onDragEnter(e: DragEvent, index: string) {
        e.stopPropagation();
        let target: HTMLElement | null = e.target as HTMLElement;
        if (target && target.draggable !== true) {
          while (
            target &&
            !target.classList.contains("window_flag") &&
            !target.classList.contains("wall_item_flag")
          ) {
            target = target.parentElement;
          }
          target?.classList.add("drag-enter");
        }
      },
      onDragend(e: DragEvent, row: number, col: number) {
        let num = (row - 1) * 4 + (col - 1);
        if (test_delete_flag) {
          test_monitor_list.value[num].isHide = true;
        }
      },
      onDragLeave(e: DragEvent) {
        let target: HTMLElement = e.target as HTMLElement;
        target?.classList.remove("drag-enter");
      },
      closeWindow(item: test_monitor, index: number) {
        current_index.value = -1;
        item.cmw = Math.round(item.w / lcm.value);
        item.cmh = Math.round(item.h / lcm.value);
        test_monitor_list.value[item.id] = JSON.parse(
          JSON.stringify(test_monitor_wall.value[index])
        );
        test_monitor_list.value[item.id].isHide = false;
        test_monitor_wall.value[index].isShow = false;
        multiple_select.value = [];
        realtime_upload();
      },
      closeOtherWindows(item: test_monitor, index: number) {
        current_index.value = index;
        test_monitor_wall.value.forEach((ele) => {
          ele.cmh = Math.round(ele.h / lcm.value);
          ele.cmw = Math.round(ele.w / lcm.value);
          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
        });
        test_monitor_list.value.forEach((element) => {
          element.isHide = false;
        });
        test_monitor_wall.value.forEach((element) => {
          element.isShow = false;
        });
        test_monitor_list.value[item.id].isHide = true;
        test_monitor_wall.value[index].isShow = true;
        realtime_upload();
      },
      //cache和与主存间的地址映射由硬件自动完成
      closeAllWindows() {
        current_index.value = -1;
        test_monitor_wall.value.forEach((ele) => {
          ele.cmh = Math.round(ele.h / lcm.value);
          ele.cmw = Math.round(ele.w / lcm.value);
          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
        });
        test_monitor_list.value.forEach((element) => {
          element.isHide = false;
        });
        test_monitor_wall.value.forEach((element) => {
          element.isShow = false;
        });
        multiple_select.value = [];
        realtime_upload();
      },
      box_width(row: number, col: number) {
        let tep = JSON.parse(
          JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
        );
        return tep.startw + "px";
      },
      box_height(row: number, col: number) {
        let tep = JSON.parse(
          JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
        );
        return tep.starth + "px";
      },
      box_line_height(row: number, col: number) {
        let tep = JSON.parse(
          JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
        );
        return tep.starth * 0.4 + "px";
      },
      show_box_line_height(height: number) {
        return height * 0.3 + "px";
      },
      center_x() {
        const wall_dom = wall.value;
        const item = test_monitor_wall.value[current_index.value];
        if (wall_dom) {
          item.currentx =
            (item.centerx / 3840) * wall_dom?.offsetWidth - item.w / 2;
        }
        realtime_upload();
      },
      center_y() {
        const wall_dom = wall.value;
        const item = test_monitor_wall.value[current_index.value];
        if (wall_dom) {
          item.currenty =
            (item.centery / 2160) * wall_dom?.offsetHeight - item.h / 2;
        }
        realtime_upload();
      },
      changePercenter() {
        const wall_dom = wall.value;
        let tep = false;
        test_monitor_wall.value.forEach((element) => {
          element.w = element.InitialW * percenter.value;
          element.h = element.InitialH * percenter.value;
          const rx: number = element.currentx + element.w;
          const ry: number = element.currenty + element.h;
          const wall_dom = wall.value;
          if (wall_dom) {
            if (rx > wall_dom.offsetWidth) {
              element.currentx = wall_dom.offsetWidth - element.w;
            }
            if (ry > wall_dom.offsetHeight) {
              element.currenty = wall_dom.offsetHeight - element.h;
            }
            element.centerx = Math.round(
              ((element.currentx + element.w / 2) / wall_dom?.offsetWidth) *
                3840
            );
            element.centery = Math.round(
              ((element.currenty + element.h / 2) / wall_dom?.offsetHeight) *
                2160
            );
          }

          if (element.isShow) {
            tep = true;
          }
        });
        realtime_upload();
      },
      canel_active() {
        Unchecked.value = true;
        if (Unchecked) {
          current_index.value = -1;
          test_monitor_wall.value.forEach((element) => {
            element.active = false;
          });
        }
        multiple_select.value = [];
        multiple.value = false;
        if (monitor_list_current_index.value != -1) {
          test_monitor_list.value[monitor_list_current_index.value].isactive =
            false;
          monitor_list_current_index.value = -1;
        }
      },
      changeAngle() {
        const wall_dom = wall.value;
        let item = test_monitor_wall.value[current_index.value];
        exceedrange(item);
        realtime_upload();
      },

      changewidth() {
        let item = test_monitor_list.value[monitor_list_current_index.value];
        item.w = Number(item.cmw) * lcm.value;
      },
      changeHeight() {
        let item = test_monitor_list.value[monitor_list_current_index.value];
        item.h = item.cmh * lcm.value;
      },
      alignTop() {
        let item = test_monitor_wall.value[multiple_select.value[0]];
        multiple_select.value.forEach((element) => {
          if (element != -1) {
            let tep_item = test_monitor_wall.value[element];
            tep_item.currenty = item.currenty;
          }
        });

        realtime_upload();
      },
      alignBottom() {
        let item = test_monitor_wall.value[multiple_select.value[0]];
        multiple_select.value.forEach((element) => {
          if (element != -1) {
            let tep_item = test_monitor_wall.value[element];
            tep_item.currenty = item.currenty + item.h - tep_item.h;
          }
        });
        realtime_upload();
      },
      alignRight() {
        let item = test_monitor_wall.value[multiple_select.value[0]];
        multiple_select.value.forEach((element) => {
          if (element != -1) {
            let tep_item = test_monitor_wall.value[element];
            tep_item.currentx = item.currentx + item.w - tep_item.w;
          }
        });

        realtime_upload();
      },
      alignLeft() {
        let item = test_monitor_wall.value[multiple_select.value[0]];
        multiple_select.value.forEach((element) => {
          if (element != -1) {
            let tep_item = test_monitor_wall.value[element];
            tep_item.currentx = item.currentx;
          }
        });
        realtime_upload();
      },
      testLog(a: any) {
        if (current_index.value != -1 || multiple_select.value.length > 1) {
          switch (a.key) {
            case "ArrowRight":
              {
                a.preventDefault();
                add_x();
              }
              break;
            case "ArrowLeft":
              {
                a.preventDefault();
                sub_x();
              }
              break;
            case "ArrowUp":
              {
                a.preventDefault();
                sub_y();
              }
              break;
            case "ArrowDown":
              {
                a.preventDefault();
                add_y();
              }
              break;
          }
        }
      },
      export_magic_wall() {
        let res: string = "";
        test_monitor_wall.value.forEach((ele, index) => {
          const point_list = four_point(ele);
          if (wall.value && point_list && ele.isShow) {
            point_list?.forEach((element) => {
              if (wall.value) {
                element.x = Math.round(
                  (element.x / wall.value.offsetWidth) * 3840
                );
                element.y = Math.round(
                  (element.y / wall.value.offsetHeight) * 2160
                );
              }
            });
            let item: exporttxt = new exporttxt(0, 0, 0, 0, {}, {}, {}, {});
            item.id = ele.id;
            item.point_left_top = [point_list[0]];
            item.point_left_bootom = [point_list[1]];
            item.point_right_top = [point_list[2]];
            item.point_right_bottom = [point_list[3]];
            item.w = Math.round((ele.w / wall.value?.offsetWidth) * 3840);
            item.h = Math.round((ele.h / wall.value.offsetHeight) * 2160);
            item.angle = ele.angle;
            res = res + JSON.stringify(item) + "\r\n";
          }
        });
        res = res.replace(/\"/g, "");
        const status = exportFile("magic_wall.txt", res);
        if (status === true) {
        } else {
          $q.notify({
            type: "warning",
            message: $t.t("data export ") + $t.t("fail") + "!",
            position: "top",
            timeout: 1500,
          });
        }
      },
    };
  },
});
</script>