<template>
    <div class="row">
        <div class="col-2">
            <q-input filled type="number" class="q-pt-md" style="text-align: center;" :dense="true" @focus="isactivearray[0] = false"
                v-model="four[0].x" label="x" lazy-rules />
            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[0] = false"
                v-model="four[0].y" label="y" lazy-rules />
            <q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
        </div>
        <div class="col-8">

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

        <div class="col-2"></div>
        <div class="col-8">            <div ref="div" style="background-color: #7fffd4;height: 40vh;">
                <div style="position:absolute;">
                    <vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)"
                        @mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="x1" :y="y1" :isResizable="false"
                        @moveHandler="moveHandler_1"><span>{{$t('point')}}1</span>
                    </vue3ResizeDrag>
                    <vue3ResizeDrag v-if="isshowarray[1]" :isActive="isactivearray[1]" @mousedown="activeMouseDown(1)"
                        @mouseUpHandler="mouseUpHandler(1)" :w="30" :h="20" :x="point2.x" :y="point2.y"
                        :isResizable="false" @moveHandler="moveHandler_2"><span>{{$t('point')}}2</span> </vue3ResizeDrag>
                    <vue3ResizeDrag v-if="isshowarray[2]" :isActive="isactivearray[2]" @mousedown="activeMouseDown(2)"
                        @mouseUpHandler="mouseUpHandler(2)" :w="30" :h="20" :x="point3.x" :y="point3.y"
                        :isResizable="false" @moveHandler="moveHandler_3"><span>{{$t('point')}}3</span> </vue3ResizeDrag>
                    <vue3ResizeDrag v-if="isshowarray[3]" :isActive="isactivearray[3]" @mousedown="activeMouseDown(3)"
                        @mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="point4.x" :y="point4.y"
                        :isResizable="false" @moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
                </div>
            </div></div>
        <div class="col-2"></div>

        <div class="col-2">
            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
                v-model="four[2].x" label="x" lazy-rules />
            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
                v-model="four[2].y" label="y" lazy-rules />
            <q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
        </div>
        <div class="col-8">
            <q-btn color="white"  @click="resetall" text-color="black" :label="$t('resetall')" /><q-btn color="white" @click="save" text-color="black" :label="$t('save config')" />
        </div>
        <div class="col-2">
            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
                v-model="four[3].x" label="x" lazy-rules />
            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
                v-model="four[3].y" label="y" lazy-rules />
            <q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
        </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 { dom } from 'quasar'

import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted, reactive } from "vue";
import { useStore } from "src/store";
import { useI18n } from "vue-i18n";
import ClientConnection from "src/common/ClientConnection"
import GlobalData from "src/common/GlobalData";

export default defineComponent({
    name: "ComponentFourPointCalibration",
    components: {
        vue3ResizeDrag
    },
    setup() {
        let $store = useStore();
        let $t = useI18n();
        const setIndexProjector = () => {
            console.log($store.state.selected_projector);
        };
        let set = GlobalData.getInstance().getCurrentClient();
        const for_1 = computed(() => { })
        let four = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
        let defaultfour = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
        let defaultfourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
        let fourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
        let div: any = ref(null);
        let div2: any = ref(null);
        let options = ref(['10', '20', '30', '40', '50']);
        let Proportion = ref({ x: 0, y: 0 });
        let point1 = reactive({ x: 0, y: 0 });
        let point2 = ref({ x: 0, y: 0 });
        let point3 = ref({ x: 0, y: 0 });
        let point4 = ref({ x: 0, y: 0 });
        const isshowarray = ref([true, true, true, true])
        const isactivearray = ref([true, true, true, true])
        const x1 = ref(0);
        const y1 = ref(0);
        const { offset } = dom

        const save=()=>{

        }

        const activeMouseDown = (index: number) => {
            isactivearray.value[index] = true
        }
        const mouseUpHandler = (index: number) => {
            isactivearray.value[index] = false
        }
        onMounted(() => {
            setpoa();

        })

        const setpoa = () => {
            point1.x = 0
            point1.y = 0

            x1.value = 0
            y1.value = 0

            point2.value.x = div.value.offsetWidth - 25
            point2.value.y = 0

            point3.value.x = 0
            point3.value.y = div.value.offsetHeight - 25

            point4.value.x = div.value.offsetWidth - 25
            point4.value.y = div.value.offsetHeight - 25


            fourpostion.value[0].x = 0
            fourpostion.value[0].y = 0

            fourpostion.value[1].x = div.value.offsetWidth - 25
            fourpostion.value[1].y = 0

            fourpostion.value[2].x = 0
            fourpostion.value[2].y = div.value.offsetHeight - 25

            fourpostion.value[3].x = div.value.offsetWidth - 25
            fourpostion.value[3].y = div.value.offsetHeight - 25

            Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
            Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
            for (let index = 0; index < fourpostion.value.length; index++) {
                defaultfourpostion.value[index].x = fourpostion.value[index].x ;
                defaultfourpostion.value[index].y = fourpostion.value[index].y;
                defaultfour.value[index].x=four.value[index].x
                defaultfour.value[index].y=four.value[index].y
            }
        }
        watch(() => four.value[0], (newVal, oldVal) => {
            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
            ///
            if (!isactivearray.value[0]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                x1.value = x
                y1.value = y
                isshowarray.value[0] = false
                isactivearray.value[0] = false
                setTimeout(() => {
                    isshowarray.value[0] = true
                }, 100);
                ///
            }
        }, { deep: true })
        watch(() => four.value[1], (newVal, oldVal) => {
            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
            ///
            if (!isactivearray.value[1]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                point2.value.x = x
                point2.value.y = y
                isshowarray.value[1] = false
                isactivearray.value[1] = false
                setTimeout(() => {
                    isshowarray.value[1] = true
                }, 100);
            }
            ///
        }, { deep: true })
        watch(() => four.value[2], (newVal, oldVal) => {
            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
            ///
            if (!isactivearray.value[2]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
                
                point3.value.x = x
                point3.value.y = y
                isshowarray.value[2] = false
                setTimeout(() => {
                    isshowarray.value[2] = true
                }, 100);
            }
            ///
        }, { deep: true })
        watch(() => four.value[3], (newVal, oldVal) => {
            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
            ///
            if (!isactivearray.value[3]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
                
                point4.value.x = x
                point4.value.y = y
                isshowarray.value[3] = false
                setTimeout(() => {
                    isshowarray.value[3] = true
                }, 100);
            }
            ///
        }, { deep: true })

        ///
        const reset = (index: number) => {
            if (index == 0) {
                console.log(x1.value + "," + y1.value)
                four.value[0].x = 0
                four.value[0].y = 1080
                point1.x = 0
                point1.y = 0
                x1.value = 0
                y1.value = 0
            }
            if (index == 1) {
                four.value[1].x = 1920
                four.value[1].y = 1080
                fourpostion.value[1].x = div.value.offsetWidth - 25
                fourpostion.value[1].y = 0
            }
            if (index == 2) {
                four.value[2].x = 0
                four.value[2].y = 0
                fourpostion.value[2].x = 0
                fourpostion.value[2].y = div.value.offsetHeight - 25
            }
            if (index == 3) {
                four.value[3].x = 1920
                four.value[3].y = 0
                fourpostion.value[3].x = div.value.offsetWidth - 25
                fourpostion.value[3].y = div.value.offsetHeight - 25
            }
            isshowarray.value[index] = false
            setTimeout(() => {
                isshowarray.value[index] = true
            }, 100);
        }

        const resetall=()=>{
            
            for (let index = 0; index < fourpostion.value.length; index++) {
                fourpostion.value[index].x=defaultfourpostion.value[index].x 
                fourpostion.value[index].y=defaultfourpostion.value[index].y 
                console.log("ok");
                four.value[index].x=defaultfour.value[index].x
                four.value[index].y=defaultfour.value[index].y

                isshowarray.value[index] = false
                setTimeout(() => {
                isshowarray.value[index] = true
                }, 100);
            }
        }

        const moveHandler_1 = (data: any) => {
            let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
            let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[0].y));

            four.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            four.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
            isactivearray.value[0] = true
        }
        const moveHandler_2 = (data: any) => {
            //y0 x1920
            let x = Math.ceil((data.left - fourpostion.value[1].x) * Proportion.value.x + 1920);
            let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[1].y));
            four.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            four.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
            //console.log("x :"+x+" y:"+y)
        }
        const moveHandler_3 = (data: any) => {
            let x = Math.ceil((data.left - fourpostion.value[2].x) * Proportion.value.x);
            let y = Math.abs(Math.ceil((data.top - fourpostion.value[2].y) * Proportion.value.y));
            four.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            four.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
            console.log("x :" + x + " y:" + y)
            //console.log("x :" + data.left + " y:" + (1370-data.top));
        }
        const moveHandler_4 = (data: any) => {
            let x = Math.ceil((data.left - fourpostion.value[3].x) * Proportion.value.x + 1920);
            let y = Math.abs(Math.ceil((data.top - fourpostion.value[3].y) * Proportion.value.y));
            four.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            four.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
            //console.log("x :"+x+" y:"+y)
        }
        return {
            div,
            div2,
            options,
            fourpostion,
            reset,
            resetall,
            moveHandler_1,
            moveHandler_2,
            moveHandler_3,
            moveHandler_4,
            four,
            save,
            point1,
            point2,
            point3,
            point4,
            x1,
            y1,
            isshowarray,
            isactivearray,
            activeMouseDown,
            mouseUpHandler
        };
    },
});
</script>