<template>
  <div class="row">
    <div class="col-4">
      <div class="row">
        <div class="col-6"></div>
        <div class="col-3">
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[0] = false"
            :dense="true"
            v-model="nine[0].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[0] = false"
            :dense="true"
            v-model="nine[0].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(0)"
            text-color="black"
            :label="$t('reset') + $t('point') + '1'"
          />
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="row">
        <div class="col-5"></div>
        <div class="col-3">
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[1] = false"
            :dense="true"
            v-model="nine[1].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[1] = false"
            :dense="true"
            v-model="nine[1].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(1)"
            text-color="black"
            :label="$t('reset') + $t('point') + '2'"
          />
        </div>

        <div class="col-3" style="margin-left: 5px">
          <q-input
            filled
            type="number"
            class="q-pt-md"
            :dense="true"
            v-model="nine[4].x"
            label="x"
            @focus="isactivearray[4] = false"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            :dense="true"
            v-model="nine[4].y"
            label="y"
            @focus="isactivearray[4] = false"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(4)"
            text-color="black"
            :label="$t('reset') + $t('point') + '5'"
          />
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="row">
        <div class="col-4"></div>
        <div class="col-3">
          <q-input
            filled
            type="number"
            @focus="isactivearray[2] = false"
            class="q-pt-md"
            :dense="true"
            v-model="nine[2].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[2] = false"
            :dense="true"
            v-model="nine[2].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(2)"
            text-color="black"
            :label="$t('reset') + $t('point') + '3'"
          />
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="row" style="margin-top: 10vh">
        <div class="col-6"></div>
        <div class="col-6">
          <q-input
            filled
            type="number"
            @focus="isactivearray[3] = false"
            class="q-pt-md"
            :dense="true"
            v-model="nine[3].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[3] = false"
            :dense="true"
            v-model="nine[3].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(3)"
            text-color="black"
            :label="$t('reset') + $t('point') + '4'"
          />
        </div>
      </div>
    </div>
    <div class="col-8">
      <div ref="div" style="background-color: #7fffd4; height: 40vh">
        <div style="position: absolute">
          <vue3ResizeDrag
            :isActive="isactivearray[0]"
            v-if="isshowarray[0]"
            :w="30"
            :h="20"
            :x="ninepostion[0].x"
            :y="ninepostion[0].y"
            @mousedown="activeMouseDown(0)"
            :isResizable="false"
            @moveHandler="moveHandler_1"
            ><span>{{ $t("point") }}1</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[1]"
            v-if="isshowarray[1]"
            :w="30"
            :h="20"
            :x="ninepostion[1].x"
            :y="ninepostion[1].y"
            @mousedown="activeMouseDown(1)"
            :isResizable="false"
            @moveHandler="moveHandler_2"
            ><span>{{ $t("point") }}2</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[2]"
            v-if="isshowarray[2]"
            :w="30"
            :h="20"
            :x="ninepostion[2].x"
            :y="ninepostion[2].y"
            @mousedown="activeMouseDown(2)"
            :isResizable="false"
            @moveHandler="moveHandler_3"
            ><span>{{ $t("point") }}3</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[3]"
            v-if="isshowarray[3]"
            :w="30"
            :h="20"
            :x="ninepostion[3].x"
            :y="ninepostion[3].y"
            @mousedown="activeMouseDown(3)"
            :isResizable="false"
            @moveHandler="moveHandler_4"
            ><span>{{ $t("point") }}4</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[4]"
            v-if="isshowarray[4]"
            :w="30"
            :h="20"
            :x="ninepostion[4].x"
            :y="ninepostion[4].y"
            @mousedown="activeMouseDown(4)"
            :isResizable="false"
            @moveHandler="moveHandler_5"
            ><span>{{ $t("point") }}5</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[5]"
            v-if="isshowarray[5]"
            :w="30"
            :h="20"
            :x="ninepostion[5].x"
            :y="ninepostion[5].y"
            @mousedown="activeMouseDown(5)"
            :isResizable="false"
            @moveHandler="moveHandler_6"
            ><span>{{ $t("point") }}6</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[6]"
            v-if="isshowarray[6]"
            :w="30"
            :h="20"
            :x="ninepostion[6].x"
            :y="ninepostion[6].y"
            @mousedown="activeMouseDown(6)"
            :isResizable="false"
            @moveHandler="moveHandler_7"
            ><span>{{ $t("point") }}7</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[7]"
            v-if="isshowarray[7]"
            :w="30"
            :h="20"
            :x="ninepostion[7].x"
            :y="ninepostion[7].y"
            @mousedown="activeMouseDown(7)"
            :isResizable="false"
            @moveHandler="moveHandler_8"
            ><span>{{ $t("point") }}8</span>
          </vue3ResizeDrag>
          <vue3ResizeDrag
            :isActive="isactivearray[8]"
            v-if="isshowarray[8]"
            :w="30"
            :h="20"
            :x="ninepostion[8].x"
            :y="ninepostion[8].y"
            @mousedown="activeMouseDown(8)"
            :isResizable="false"
            @moveHandler="moveHandler_9"
            ><span>{{ $t("point") }}9</span>
          </vue3ResizeDrag>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="row" style="margin-top: 10vh">
        <div class="col-6">
          <q-input
            filled
            type="number"
            @focus="isactivearray[5] = false"
            class="q-pt-md"
            :dense="true"
            v-model="nine[5].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[5] = false"
            :dense="true"
            v-model="nine[5].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(5)"
            text-color="black"
            :label="$t('reset') + $t('point') + '6'"
          />
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="row">
        <div class="col-6">
          <q-btn
            color="white"
            @click="resetall"
            text-color="black"
            :label="$t('resetall')"
          />
        </div>
        <div class="col-3">
          <q-input
            filled
            type="number"
            @focus="isactivearray[6] = false"
            class="q-pt-md"
            :dense="true"
            v-model="nine[6].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[6] = false"
            :dense="true"
            v-model="nine[6].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(6)"
            text-color="black"
            :label="$t('reset') + $t('point') + '7'"
          />
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="row">
        <div class="col-6"></div>
        <div class="col-3">
          <q-input
            filled
            type="number"
            @focus="isactivearray[7] = false"
            class="q-pt-md"
            :dense="true"
            v-model="nine[7].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[7] = false"
            :dense="true"
            v-model="nine[7].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(7)"
            text-color="black"
            :label="$t('reset') + $t('point') + '8'"
          />
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="row">
        <div class="col-4"></div>
        <div class="col-3">
          <q-input
            filled
            type="number"
            @focus="isactivearray[8] = false"
            class="q-pt-md"
            :dense="true"
            v-model="nine[8].x"
            label="x"
            lazy-rules
          />
          <q-input
            filled
            type="number"
            class="q-pt-md"
            @focus="isactivearray[8] = false"
            :dense="true"
            v-model="nine[8].y"
            label="y"
            lazy-rules
          />
          <q-btn
            color="white"
            @click="reset(8)"
            text-color="black"
            :label="$t('reset') + $t('point') + '9'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
<script lang="ts">
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
import GlobalData from "src/common/GlobalData";
import {
  defineComponent,
  ref,
  watch,
  computed,
  defineProps,
  withDefaults,
  onMounted,
  onBeforeUnmount,
  reactive,
} from "vue";
import { useStore } from "src/store";
import { useI18n } from "vue-i18n";

export default defineComponent({
  name: "ComponentSurfaceCorrection",
  components: {
    vue3ResizeDrag,
  },
  setup() {
    let $store = useStore();
    let $t = useI18n();
    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
    const configselsect = computed(() => {
      return $store.state.selected_projector;
    });
    let Proportion = ref({ x: 0, y: 0 });
    let centor = ref({ x: 0, y: 0 });
    const div = ref();
    let nine = reactive([
      { x: 0, y: 1080 },
      { x: 960, y: 1920 },
      { x: 1920, y: 1080 },
      { x: 0, y: 540 },
      { x: 960, y: 540 },
      { x: 1920, y: 540 },
      { x: 0, y: 0 },
      { x: 960, y: 0 },
      { x: 1920, y: 0 },
    ]);
    let defaultnine = ref([
      { x: 0, y: 1080 },
      { x: 960, y: 1920 },
      { x: 1920, y: 1080 },
      { x: 0, y: 540 },
      { x: 960, y: 540 },
      { x: 1920, y: 540 },
      { x: 0, y: 0 },
      { x: 960, y: 0 },
      { x: 1920, y: 0 },
    ]);
    const activeMouseDown = (index: number) => {
      isactivearray.value[index] = true;
    };
    //用于计算当前投影仪的索引
    let serverconfig = JSON.parse($store.state.fusion_configuration);
    const selectedprojector = computed(() => {
      return (
        $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col +
        $store.getters.GetTheCurrentlySelectedCamera[1]
      );
    });
    const set_cache: any = ref([]);
    const ste_status = ref(0);
    const isshowarray = ref([
      true,
      true,
      true,
      true,
      true,
      true,
      true,
      true,
      true,
    ]);
    const isactivearray = ref([
      true,
      true,
      true,
      true,
      true,
      true,
      true,
      true,
      true,
    ]);
    let ninepostion: any = ref([
      { x: 0, y: 1920 },
      { x: 960, y: 1920 },
      { x: 1080, y: 1920 },
      { x: 0, y: 540 },
      { x: 960, y: 540 },
      { x: 1080, y: 540 },
      { x: 0, y: 0 },
      { x: 540, y: 0 },
      { x: 1080, y: 0 },
    ]);
    let defaultninepostion: any = ref([
      { x: 0, y: 1920 },
      { x: 960, y: 1920 },
      { x: 1080, y: 1920 },
      { x: 0, y: 540 },
      { x: 960, y: 540 },
      { x: 1080, y: 540 },
      { x: 0, y: 0 },
      { x: 540, y: 0 },
      { x: 1080, y: 0 },
    ]);
    const moveHandler_1 = (data: any) => {
      let x = Math.ceil(
        (data.left - ninepostion.value[0].x) * Proportion.value.x
      );
      let y =
        config.height -
        Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);
      nine[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_2 = (data: any) => {
      let x =
        config.width / 2 +
        Math.ceil((data.left - ninepostion.value[1].x) * Proportion.value.x);
      let y =
        config.height -
        Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.y);
      nine[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_3 = (data: any) => {
      let x =
        config.width +
        Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x);
      let y =
        config.height -
        Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);
      nine[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_4 = (data: any) => {
      let x = Math.ceil(
        (data.left - ninepostion.value[3].x) * Proportion.value.x
      );
      let y =
        config.height / 2 -
        Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
      nine[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_5 = (data: any) => {
      let x =
        config.width / 2 +
        Math.ceil((data.left - ninepostion.value[4].x) * Proportion.value.x);
      let y =
        config.height / 2 -
        Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);
      nine[4].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[4].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_6 = (data: any) => {
      let x =
        config.width +
        Math.ceil((data.left - ninepostion.value[5].x) * Proportion.value.x);
      let y =
        config.height / 2 -
        Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
      nine[5].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[5].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_7 = (data: any) => {
      let x = Math.ceil(
        (data.left - ninepostion.value[6].x) * Proportion.value.x
      );
      let y = Math.abs(
        Math.ceil((data.top - ninepostion.value[6].y) * Proportion.value.y)
      );
      nine[6].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[6].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_8 = (data: any) => {
      let x =
        config.width / 2 +
        Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x);
      let y = Math.abs(
        Math.ceil((data.top - ninepostion.value[7].y) * Proportion.value.y)
      );
      nine[7].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[7].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };
    const moveHandler_9 = (data: any) => {
      let x =
        config.width +
        Math.ceil((data.left - ninepostion.value[8].x) * Proportion.value.x);
      let y = Math.abs(
        Math.ceil((data.top - ninepostion.value[8].y) * Proportion.value.y)
      );
      nine[8].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
      nine[8].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
      save_set_cache();
    };

    //为了加载 缓存的配置时 同步点的位置
    const syncpoint = () => {
      for (let index = 0; index < ninepostion.value.length; index++) {
        isactivearray.value[index] = false;
      }
    };

    const use_set_cache = () => {
      if (set_cache.value[selectedprojector.value] != null) {
        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
        deepcopy(nine, tmp);
      }
      syncpoint();
    };
    const deepcopy = (o1: any, o2: any) => {
      for (let k in o2) {
        if (typeof o2[k] === "object") {
          o1[k] = {};
          deepcopy(o1[k], o2[k]);
        } else {
          o1[k] = o2[k];
        }
      }
    };
    const save_set_cache = () => {
      set_cache.value[selectedprojector.value] = JSON.stringify(nine);
    };
    onBeforeUnmount(() => {
      if (set_cache.value[selectedprojector.value] != null) {
        sessionStorage.SurfaceCorrection = JSON.stringify(set_cache.value);
      }
    });

    watch(
      () => configselsect,
      (newVal, oldVal) => {
        let tmp = JSON.parse($store.state.fusion_configuration);
        let fortmp = null;
        let i;
        for (i of tmp.projectors) {
          if (
            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
          ) {
            fortmp = JSON.parse(JSON.stringify(i));
          }
        }
        ste_status.value = 1;
        config = JSON.parse(JSON.stringify(fortmp));
        use_server_config();
        use_set_cache();
        setTimeout(() => {
          ste_status.value = 0;
        }, 100);
      },
      { deep: true }
    );
    onMounted(() => {
      ste_status.value = 1;
      startpostion();
      for (let index = 0; index < defaultninepostion.value.length; index++) {
        defaultninepostion.value[index].x = ninepostion.value[index].x;
        defaultninepostion.value[index].y = ninepostion.value[index].y;
        defaultnine.value[index].x = config.point9[index].def_x;
        defaultnine.value[index].y = config.point9[index].def_y;
      }
      setninepostion();
      use_set_cache();
      setTimeout(() => {
        ste_status.value = 0;
      }, 100);
    });

    //窗口变动重新渲染
    onMounted(() => {
      window.onresize = () => {
        return (() => {
          ste_status.value = 1;
          startpostion();
          for (
            let index = 0;
            index < defaultninepostion.value.length;
            index++
          ) {
            defaultninepostion.value[index].x = ninepostion.value[index].x;
            defaultninepostion.value[index].y = ninepostion.value[index].y;
            defaultnine.value[index].x = config.point9[index].def_x;
            defaultnine.value[index].y = config.point9[index].def_y;
          }
          setninepostion();
          use_set_cache();
          setTimeout(() => {
            ste_status.value = 0;
          }, 100);
        })();
      };
    });

    const setninepostion = () => {
      for (let index = 0; index < defaultninepostion.value.length; index++) {
        nine[index].x = config.point9[index].x;
        nine[index].y = config.point9[index].y;
      }
    };
    const startpostion = () => {
      ninepostion.value[0].x = 0;
      ninepostion.value[0].y = 0;

      ninepostion.value[1].x = div.value.offsetWidth / 2 - 25;
      ninepostion.value[1].y = 0;

      ninepostion.value[2].x = div.value.offsetWidth - 25;
      ninepostion.value[2].y = 0;

      ninepostion.value[3].x = 0;
      ninepostion.value[3].y = div.value.offsetHeight / 2 - 8;

      ninepostion.value[4].x = div.value.offsetWidth / 2 - 25;
      ninepostion.value[4].y = div.value.offsetHeight / 2 - 8;

      ninepostion.value[5].x = div.value.offsetWidth - 25;
      ninepostion.value[5].y = div.value.offsetHeight / 2;

      ninepostion.value[6].x = 0;
      ninepostion.value[6].y = div.value.offsetHeight - 25;

      ninepostion.value[7].x = div.value.offsetWidth / 2 - 8;
      ninepostion.value[7].y = div.value.offsetHeight - 25;

      ninepostion.value[8].x = div.value.offsetWidth - 25;
      ninepostion.value[8].y = div.value.offsetHeight - 25;

      Proportion.value.x = config.width / (div.value.offsetWidth - 25);
      Proportion.value.y = config.height / (div.value.offsetHeight - 25);

      centor.value.x = (config.width * 2) / (div.value.offsetWidth + 25);
      centor.value.y = (config.height * 2) / (div.value.offsetHeight + 25);

      for (let index = 0; index < defaultninepostion.value.length; index++) {
        defaultninepostion.value[index].x = ninepostion.value[index].x;
        defaultninepostion.value[index].y = ninepostion.value[index].y;
        defaultnine.value[index].x = nine[index].x;
        defaultnine.value[index].y = nine[index].y;
      }
      if (sessionStorage.SurfaceCorrection) {
        set_cache.value = JSON.parse(sessionStorage.SurfaceCorrection);
        use_set_cache();
      } else {
      }
      syncpoint();
    };
    const use_server_config = () => {
      for (let index = 0; index < defaultninepostion.value.length; index++) {
        defaultninepostion.value[index].x = ninepostion.value[index].x;
        defaultninepostion.value[index].y = ninepostion.value[index].y;
        defaultnine.value[index].x = nine[index].x;
        defaultnine.value[index].y = nine[index].y;
        nine[index].x = config.point9[index].x;
        nine[index].y = config.point9[index].y;
      }
    };
    const reset = (index: number) => {
      ninepostion.value[index].x = defaultninepostion.value[index].x;
      ninepostion.value[index].y = defaultninepostion.value[index].y;

      nine[index].x = config.point9[index].def_x;
      nine[index].y = config.point9[index].def_y;

      set?.setBlendingCorrection(
        $store.getters.GetTheCurrentlySelectedCamera[0],
        $store.getters.GetTheCurrentlySelectedCamera[1],
        9,
        index + 1,
        Number(config.point9[index].def_x),
        Number(config.point9[index].def_y)
      );

      isshowarray.value[index] = false;
      setTimeout(() => {
        isshowarray.value[index] = true;
      }, 100);
    };
    const resetall = () => {
      for (let index = 0; index < nine.length; index++) {
        reset(index);
      }
    };
    watch(
      () => nine[0],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            1,
            Number(newVal.x),
            Number(newVal.y)
          );

        if (!isactivearray.value[0]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(0, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[1],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            2,
            Number(newVal.x),
            Number(newVal.y)
          );

        if (!isactivearray.value[1]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(1, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[2],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            3,
            Number(newVal.x),
            Number(newVal.y)
          );
        if (!isactivearray.value[2]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(2, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[3],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            4,
            Number(newVal.x),
            Number(newVal.y)
          );
        if (!isactivearray.value[3]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(3, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[4],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            5,
            Number(newVal.x),
            Number(newVal.y)
          );
        if (!isactivearray.value[4]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(4, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[5],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            6,
            Number(newVal.x),
            Number(newVal.y)
          );
        if (!isactivearray.value[5]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(5, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[6],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            7,
            Number(newVal.x),
            Number(newVal.y)
          );
        if (!isactivearray.value[6]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(6, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[7],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            8,
            Number(newVal.x),
            Number(newVal.y)
          );
        if (!isactivearray.value[7]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(7, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    watch(
      () => nine[8],
      (newVal, oldVal) => {
        if ($store.state.enablefusion && ste_status.value == 0)
          set?.setBlendingCorrection(
            $store.getters.GetTheCurrentlySelectedCamera[0],
            $store.getters.GetTheCurrentlySelectedCamera[1],
            9,
            9,
            Number(newVal.x),
            Number(newVal.y)
          );
        if (!isactivearray.value[8]) {
          let x = Math.ceil(newVal.x / Proportion.value.x);
          let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
          setdianposin(8, x, y);
        }
        save_set_cache();
      },
      { deep: true }
    );
    let model = ref(null);
    let set = GlobalData.getInstance().getCurrentClient();
    const setdianposin = (index: number, x: number, y: number) => {
      ninepostion.value[index].x = x;
      ninepostion.value[index].y = y;
      isshowarray.value[index] = false;
      isactivearray.value[index] = false;
      setTimeout(() => {
        isshowarray.value[index] = true;
      }, 100);
    };
    const save = () => {
      set?.SaveBlendingConfig("");
      setTimeout(() => {
        set?.GetBlendingConfig("").then((res) => {
          $store.commit("setfusion_configuration", res?.config);
        });
      }, 1000);
    };
    return {
      model,
      save,
      nine,
      moveHandler_1,
      moveHandler_2,
      moveHandler_3,
      moveHandler_4,
      moveHandler_5,
      moveHandler_6,
      moveHandler_7,
      moveHandler_8,
      moveHandler_9,
      div,
      resetall,
      ninepostion,
      reset,
      isshowarray,
      isactivearray,
      activeMouseDown,
      set_cache,
    };
  },
});
</script>
