<template>
  <q-dialog persistent v-model="show_dialog" @keydown="
    (evt: any) => {
      if (evt.keyCode == 27) {
        show_dialog = false;
      }
    }
  ">
    <q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh">
      <q-form>
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-auto text-h6">
              {{ $t("fusion settings") }}
            </div>

            <q-space />
            <q-btn flat round icon="close" color="red" v-close-popup>
              <q-tooltip>
                {{ $t("close") }}
              </q-tooltip>
            </q-btn>
            <div></div>
          </div>
        </q-card-section>

        <q-separator />
        <!-- height: 80vh -->
        <q-card-section class="scroll" style="width: 90vw">
          <div class="row" style="border: 1px solid;text-align: center;">
            <div class="col-3" style="border-right: 1px solid;">
              <p class="text-center">{{ $t("Projector") }}</p>
              <!-- row 在前col在后 -->
              <div v-for="(item,index_row) in config.row">
                <projector-item v-for="(item,index_col) in config.col" class="w-100" :llabel="$t('Projector') + (index_row*config.col+index_col+1)" :lvalue="index_row+'/'+index_col"></projector-item>
              </div>
              
              <div class="col-12" style="text-align: center">
                {{ $t('Whether to enable mixing') }}<q-checkbox v-model="EnableBlending" />
              </div>
            </div>
            <div class="col-9">
              <div class="q-ta-md">
                <q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
                  :options="[
                    { label: $t('FusionLocale'), value: 'FusionLocale' },
                    {
                      label: $t('FourPointCalibration'),
                      value: 'FourPointCalibration',
                    },
                    {
                      label: $t('SurfaceCorrection'),
                      value: 'SurfaceCorrection',
                    },
                    {
                      label: $t('DensityCorrection'),
                      value: 'DensityCorrection',
                    },
                    { label: $t('GridSettings'), value: 'GridSettings' },
                  ]" />
              </div>
              <div style="min-height: 72vh">
                <component :is="options" />
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.header_label {
  width: 20%;
}

.w100 {
  width: 100%;
}
</style>

<script lang="ts">
import {
  defineComponent,
  ref,
  Ref,
  watch,
  computed,
  onMounted,
  onBeforeMount,
} from "vue";
import { useStore } from "src/store";
import { useQuasar, copyToClipboard } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import { Protocol } from "src/entities/WSProtocol";
import { EDeviceAttribute } from "src/entities/EDeviceAttribute";

import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue";

import FusionLocale from "src/components/FusionSettings/FusionLocale.vue";
import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration.vue";
import GridSettings from "src/components/FusionSettings/GridSettings.vue";
import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";

export default defineComponent({
  name: "ComponentFusionSettingsDialog",
  components: {
    ProjectorItem,
    FusionLocale,
    FourPointCalibration,
    GridSettings,
    SurfaceCorrection,
    DensityCorrection,
  },
  setup() {
    let set = GlobalData.getInstance().getCurrentClient();
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();
    let show_dialog = ref(false);
    const showDialog = async () => {
      show_dialog.value = true;
    };
    //投影机数量
    const config=ref({col:0,row:0});
    const EnableBlending = ref(false);
    let optionsstr = ref();
    optionsstr.value = "FusionLocale";
    const options = computed({
      get() {
        return optionsstr.value;
      },
      set(newValue) {
        optionsstr.value = newValue;
      },
    });
    watch(
      () => EnableBlending,
      (newVal, oldVal) => {
        $store.commit("setEnablefusion", newVal.value);
        set?.EnableBlending(newVal.value);
      },
      { deep: true }
    );

      const erroe=()=>{
        $q.notify({
              color: "negative",
              icon: "warning",
              message:"数据获取失败!",
              position: "top",
              timeout: 1500,
            });
      }

    onBeforeMount(() => {
      setTimeout(() => {
        
        set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", res?.config);})
        //let textdata="{\"col\":2,\"enable\":true,\"projectors\":[{\"col\":0,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1171,\"y\":712},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920},{\"col\":1,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920}],\"row\":1,\"screen_height\":0,\"screen_width\":0}"
        //let tmp=JSON.parse(textdata);EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", textdata)
      }, 1000);
      })
    return {
      show_dialog,
      options,
      copyToClipboard,
      showDialog,
      EnableBlending,
      config
    };
  },
});
</script>
