<template>
  <div class="row">
    <div class="col-12">
      <!-- <p class="text-center">{{ $t('Set the fusion band width') }}</p> -->
      <div style="height: 1rem;"></div>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4 offset-4">
              <div class="row">
                <div class="col-3">
                  <q-toggle class="float-right" v-model="array[0].isshow" label="" />
                </div>
                <div class="col-6">
                  <q-input filled type="number" :bg-color="group == 0 ? 'cyan-1' : ''" @focus="group = 0"
                    v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 1080) || $t('Please enter 0-100'),
                    ]" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-6">
              <div class="row">
                <div class="col-3">
                  <q-toggle class="float-right" v-model="array[1].isshow" label="" />
                </div>
                <div class="col-6">
                  <q-input filled type="number" :bg-color="group == 1 ? 'cyan-1' : ''" @focus="group = 1"
                    v-model="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 1920) || $t('Please enter 0-100'),
                    ]" />
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="row">
                <div class="col-3">
                  <q-toggle class="float-right" v-model="array[2].isshow" label="" />
                </div>
                <div class="col-6">
                  <q-input filled type="number" :bg-color="group == 2 ? 'cyan-1' : ''" @focus="group = 2"
                    v-model="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 1920) || $t('Please enter 0-100'),
                    ]" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 offset-4">
              <div class="row">
                <div class="col-3">
                  <q-toggle class="float-right" v-model="array[3].isshow" label="" />
                </div>
                <div class="col-6">
                  <q-input filled type="number" :bg-color="group == 3 ? 'cyan-1' : ''" @focus="group = 3"
                    v-model="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 1080) || $t('Please enter 0-100'),
                    ]" />
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="col-4 offset-4" v-if="group != 4">
      <p class="text-center">{{ $t('Set Fusion Band Parameters') }}</p>
      <div style="display: flex; justify-content: space-evenly">
        <div>
          <q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
            vertical reverse label-always />
          <p class="text-center">alpha</p>
        </div>

        <div>
          <q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="2.5" :step="0.01" color="green"
            vertical reverse label-always />
          <p class="text-center">p</p>
        </div>

        <div>
          <q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="2.5" :step="0.01" color="green"
            vertical reverse label-always />
          <p class="text-center">gamma</p>
        </div>
      </div>
      <!-- <q-btn color="white" @click="save" text-color="black" :label="$t('save config')" /> -->
    </div>
  </div>
</template>

<style>
.boder {
  border: 2px solid #0000;
}
</style>

<script lang="ts">
import {
  defineComponent,
  ref,
  watch,
  computed,
  defineProps,
  withDefaults,
  onBeforeUnmount,
  reactive,
} from "vue";
import { useStore } from "src/store";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import { number } from "@intlify/core-base";

export default defineComponent({
  name: "ComponentFusionLocale",
  setup() {
    let set = GlobalData.getInstance().getCurrentClient();
    let $store = useStore();
    let $t = useI18n();
    const group = ref(4);
    const set_cache: any = ref([]);
    const enablefusion = ref(false);
    let array: any = reactive([
      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
    ]);
    let serverconfig = JSON.parse($store.state.fusion_configuration);
    const selectedprojector = computed(() => {
      return $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col + $store.getters.GetTheCurrentlySelectedCamera[1]
    })
    const ste_status = ref(0);
    const use_set_cache = () => {
      if (set_cache.value[selectedprojector.value] != null) {
        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
        deepcopy(array, tmp)
      }
    };
    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(array);
    }
    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
    const configselsect = computed(() => { return $store.state.selected_projector })
    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);
      setnowindex()
    }, { deep: true })
    const chang = (type: string) => {
      if (type == "alpha") {
        if ($store.state.enablefusion) set?.setBlendingAlphaParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array[group.value].alpha
        );
      }
      if (type == "p") {
        if ($store.state.enablefusion) set?.setBlendingPowerParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array[group.value].p
        );
      }
      if (type == "gamma") {
        if ($store.state.enablefusion) set?.setBlendingGammaParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array[group.value].gamma
        );
      }
      save_set_cache();
    };

    const setnowindex = () => {
      let sum = 0;
      let indexx = 4;
      for (let index = 0; index < array.length - 1; index++) {
        if (array[index].isshow && Number(array[index].value) > 0) {
          sum++;
          indexx = index;
        }
      }
      if (sum == 1) {
        group.value = indexx
      } else {
        group.value = 4
      }
    }

    const getconfig = () => {
      try {
        set?.GetBlendingConfig("").then((res) => {  })
        set?.GetBlendingConfig("").then((res) => { let tmp = JSON.parse(res ? res.config : ""); $store.commit("setEnablefusion", tmp.enable); $store.commit("setfusion_configuration", res?.config); })
      } catch (error) {

      }

    }
    const startconfig = () => {
      for (let index = 0; index < array.length - 1; index++) {
        array[index].gamma = config.params[index].gamma.toFixed(2)
        array[index].alpha = config.params[index].alpha.toFixed(2)
        array[index].p = config.params[index].power.toFixed(2)
        array[index].isshow = config.params[index].enable
        array[index].value = Number(config.params[index].size)
      }
      if (sessionStorage.FusionLocale) set_cache.value = JSON.parse(sessionStorage.FusionLocale); use_set_cache()

    }
    const use_server_config = () => {

      for (let index = 0; index < array.length - 1; index++) {
        array[index].gamma = config.params[index].gamma.toFixed(2)
        array[index].alpha = config.params[index].alpha.toFixed(2)
        array[index].p = config.params[index].power.toFixed(2)
        array[index].isshow = config.params[index].enable
        array[index].value = Number(config.params[index].size)
      }
    }
    startconfig()
    onBeforeUnmount(() => {
      sessionStorage.FusionLocale = JSON.stringify(set_cache.value)
    })

    watch(
      () => array[0],
      (newVal, oldVal) => {
        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 1, array[0].isshow, Number(array[0].value));
        save_set_cache()
      },
      { deep: true }
    );
    watch(
      () => array[1],
      (newVal, oldVal) => {
        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 0, array[1].isshow, Number(array[1].value));
        save_set_cache()
      },
      { deep: true }
    );
    watch(
      () => array[2],
      (newVal, oldVal) => {
        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 2, array[2].isshow, Number(array[2].value));
        save_set_cache()
      },
      { deep: true }
    );
    watch(
      () => array[3],
      (newVal, oldVal) => {
        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 3, array[3].isshow, Number(array[3].value));
        save_set_cache()
      },
      { deep: true }
    );

    watch(
      () => enablefusion,
      (newVal, oldVal) => {
        $store.commit('setenablefusion', newVal.value);
        set?.EnableBlending(newVal.value);
      }, { deep: true }
    );
    const changenablefusion = () => {
      $store.commit('setenablefusion', enablefusion.value);
    }
    const save = () => {
      set?.SaveBlendingConfig("")
      setTimeout(() => {
        set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
      }, 1000);
    }
    return {
      group,
      array,
      chang,
      enablefusion,
      changenablefusion,
      selectedprojector,
      save,
      set_cache
    };
  },
});
</script>
