<template>
  <div class="row">
    <div class="col-12">
      <p class="text-center">{{$t('Set the fusion band width')}}</p>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4 offset-4">
              <div class="row">
                <div class="col-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[selectedprojector][0].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 0"
                    v-model="array2[selectedprojector][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-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[selectedprojector][1].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 1"
                    v-model="array2[selectedprojector][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-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[selectedprojector][2].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 2"
                    v-model="array2[selectedprojector][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-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[selectedprojector][3].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 3"
                    v-model="array2[selectedprojector][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 v-if="!(group == 4) && array2[selectedprojector][group].isshow" class="col-4 offset-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>
    </div>
  </div>
</template>

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

<script lang="ts">
import {
  defineComponent,
  ref,
  watch,
  computed,
  defineProps,
  withDefaults,
  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 age = ref(0);
    const standard = ref(0);
    const group = ref(4);
    const EnableBlending=ref(false);
    let array: any = ref([
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
    ]);
    let array2: any = reactive([[
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
    ],[
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
    ]]);
    const selectedprojector=computed(()=>{
      return $store.state.selected_projector=="0/0"?0:1
    })
    const options = ref([
      {
        label: "上融合带参数",
        value: 0,
      },
      {
        label: "左融合带参数",
        value: 1,
      },
      {
        label: "右融合带参数",
        value: 2,
      },
      {
        label: "下融合带参数",
        value: 3,
      },
    ]);
    const accept = ref(false);
    const text = ref("");
    const model = computed({
      get() {
        return $store.state.selected_projector;
      },
      set(newValue) {
        $store.commit("setSelectedProjector", newValue);
      },
    });
    const chang = (type: string) => {
      if (type == "alpha") {
        if($store.state.EnableBlending)set?.setBlendingAlphaParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array.value[group.value].alpha
        );
      }
      if (type == "p") {
        if($store.state.EnableBlending)set?.setBlendingPowerParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array.value[group.value].p
        );
      }
      if($store.state.EnableBlending)if (type == "gamma") {
        set?.setBlendingGammaParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array.value[group.value].gamma
        );
      }
      //console.log("giao")
    };
     //0：左融合带，1：上融合带，2：右融合带，3：下融合带
    watch(
      () => array2[0][0],
      (newVal, oldVal) => {
        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[0][0].isshow,Number(array2[0][0].value));
        if(!array2[0][0].isshow){
          array2[0][0].value=0
        }
      },
      { deep: true }
    );
    watch(
      () => array2[0][1],
      (newVal, oldVal) => {
        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[0][1].isshow,Number(array2[0][1].value));
        if(!array2[0][1].isshow){
          array2[0][1].value=0
        }
      },
      { deep: true }
    );
    watch(
      () => array2[0][2],
      (newVal, oldVal) => {
        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[0][2].isshow,Number(array2[0][2].value));
        if(!array2[0][2].isshow){
          array2[0][2].value=0
        }
      },
      { deep: true }
    );
    watch(
      () => array2[0][3],
      (newVal, oldVal) => {
        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[0][3].isshow,Number(array2[0][3].value));
        if(!array2[0][3].isshow){
          array2[0][3].value=0
        }
      },
      { deep: true }
    );

///

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

    watch(
      () => EnableBlending,
      (newVal, oldVal) => {
        $store.commit('setEnableBlending',newVal.value);
        set?.EnableBlending(newVal.value);
      },{ deep: true }
    );
    const changEnableBlending=()=>{
      $store.commit('setEnableBlending',EnableBlending.value);
    }
    return {
      model,
      age,
      accept,
      standard,
      options,
      group,
      text,
      array,
      chang,
      EnableBlending,
      array2,
      changEnableBlending,
      selectedprojector
    };
  },
});
</script>
