// 4-2. 이벤트 객체
{
    let s1 = document.querySelector(".s2");
    let ul = s1.querySelector("ul");
    let current = null; // ul.querySelectorAll("li.current");
    let lis = ul.querySelectorAll("li");

    for(let li of lis)
        li.onclick = function(e){

            if(current){
                
                // *** 실습 3 : 애니메이션 

                let selected = e.target.parentElement;
                while(selected.tagName !== 'LI')
                    selected = e.parentElement;

                selected.classList.add("selected");

                // onanimationend 애니메이션 끝나고 동작하는 것이 end이다.
                selected.onanimationend = function(){
                    selected.classList.remove("selected");
                    let selectedBefore = selected.previousElementSibling;

                    current.replaceWith(selected);
                    if(selectedBefore)
                        selectedBefore.after(current);
                    else
                        ul.prepend(current);
                    
                    current.classList.remove("current");

                    current = null;
                    
                }


                return;
            }

// .s3 목록을 키보드로 관리!!
{
    let s = document.querySelector(".s3");
    let ul = s.querySelector("ul");
    let current = null;
    let lis = ul.querySelectorAll("li");
    let delButton = s.querySelector(".btn-del");
    s.focus();

    s.onkeydown = function(e){
        console.log("key down");
        console.log(`code:${e.code}, key:${e.key}, keyCode:${e.keyCode}`);
        
        // if(e.code === 'Delete'){

        //     let selectedButtons = [...ul.querySelectorAll("input:checked")]
        //                         .map(a=>a.parentElement);

        //     for(let li of selectedButtons)
        //         li.remove();
        // }
        if(e.code === 'Delete'){
            // Trigger 함수 : 이벤트 !!
            // click 누르는 이벤트에서 가능
            const event = new Event("click");
            delButton.dispatchEvent(event); // 이게 Trigger이다. 이벤트에 방아쇄를 당김.
        }
    }

    delButton.onclick = function(){
        // let selectedButtons = e.target.value;
        // console.log(selectedButtons);
        // let selectedButtons = ul.querySelectorAll(".selected");
        // let selectedButtons = ul.querySelectorAll("input:checked");

        // *** JS Spread Operator(연산자) 문법 ***
        // 개별 요소로 분배 가능!!
        let selectedButtons = [...ul.querySelectorAll("input:checked")]
                                .map(a=>a.parentElement);
        

        // let arr = [1,2,3];

        // ** For Each : for each는 하나씩 꺼내서 사용한다.
        // ** Map : 하나씩 꺼내서 다른 형태로 바꿔줄 때!! map을 이용한다.
        // arr.forEach(a => console.log(a+1));

        // let arr1 = arr.map(a=>`<a id=${a}>`);
        // console.log(arr1);

        for(let li of selectedButtons)
            li.remove();

        
    }

    ul.onclick = function(e){
        // console.log(`clicked: ${e.target}`);
        // console.log(`clicked: ${e.target}`);
        if(e.target.tagName !== 'SPAN')
            return;

        let selected = e.target.parentElement;

        while(selected.tagName !== 'LI'){
            selected = selected.parentElement;
            // 'e.parentElement'가 아니라 'selected.parentElement'이다.
        }

        selected.classList.add("selected");
    }
}

window.addEventListener("load",function(){

// .s4 and drop ai
{
    let s = this.document.querySelector(".s4");
    let dropZone = s.querySelector(".drop-zone");

    dropZone.ondragenter = function(e){
        console.log("enter");


    }
    dropZone.ondragover = function(e){
        e.preventDefault();

        // 드래그한게 '파일'이면 true 아니면 false
        if(e.dataTransfer.types[0]=="Files"){
            dropZone.classList.add("valid");
            dropZone.classList.remove("invalid");
        }
        else{
            dropZone.classList.add("invalid");
            dropZone.classList.remove("valid");
        }   

        // ** Over에서는 초당 이벤트가 발생해서 파일 정보를 가져올 수 없다!!
        // 그래서, Drop으로 이벤트 옮기기!!
        // let file = e.dataTransfer.files  ;
        // if(file.length > 1){
        //     console.log("하나 이상의 파일은 업로드할 수 없습니다.");
        // }

        console.log("over");

        if(e.dataTransfer.files.length > 1){
            console.log("하나 이상의 파일은 업로드할 수 없습니다.");
        }
    }
    dropZone.ondragleave = function(e){
        console.log("leave");
    }
    dropZone.ondrop = function(e){
        // 브라우저가 기본적으로 파일을 읽기 때문에 기본 속성 날리기!
        // over에도 drop처럼 preventDefault로 같이 날려주기!!

        e.preventDefault(); 
        console.log(e.dataTransfer.type);
        // console.log("drop");

        if(e.dataTransfer.files.length > 1){
            console.log("하나 이상의 파일은 업로드할 수 없습니다.");
        }
    }
    
}

window.addEventListener("load",function(){

// .s4 and drop ai
{
    let s = this.document.querySelector(".s4");
    let dropZone = s.querySelector(".drop-zone");

    dropZone.ondragenter = function(e){
        console.log("enter");


    }
    dropZone.ondragover = function(e){
        e.preventDefault();

        // 드래그한게 '파일'이면 true 아니면 false
        if(e.dataTransfer.types[0]=="Files"){
            dropZone.classList.add("valid");
            dropZone.classList.remove("invalid");
        }
        else{
            dropZone.classList.add("invalid");
            dropZone.classList.remove("valid");
        }   

        // ** Over에서는 초당 이벤트가 발생해서 파일 정보를 가져올 수 없다!!
        // 그래서, Drop으로 이벤트 옮기기!!
        // let file = e.dataTransfer.files  ;
        // if(file.length > 1){
        //     console.log("하나 이상의 파일은 업로드할 수 없습니다.");
        // }

        console.log("over");

        if(e.dataTransfer.files.length > 1){
            console.log("하나 이상의 파일은 업로드할 수 없습니다.");
        }
    }
    dropZone.ondragleave = function(e){
        console.log("leave");
    }
    dropZone.ondrop = function(e){
        // 브라우저가 기본적으로 파일을 읽기 때문에 기본 속성 날리기!
        // over에도 drop처럼 preventDefault로 같이 날려주기!!

        e.preventDefault(); 
        // console.log(e.dataTransfer.type);
        // console.log("drop");

        
        // if(e.dataTransfer.files.length > 1){
            //     console.log("하나 이상의 파일은 업로드할 수 없습니다.");
            // }
            
        let file = e.dataTransfer.files[0];
        console.log(file);
        let formData = new FormData();

        formData.append("file",file);
        formData.append("test","hehe");

        let request = new XMLHttpRequest();
        request.onload = function(){
            console.log("done");   
        }

        request.onprogress = function(){
            console.log("progress");   
        }

        request.open("POST","http://localhost:8080/upload");
        // request.setRequestHeader("Content-Type", "multipart/form-data");

        request.send(formData);
    }
    
}

import { onMounted, reactive, ref } from 'vue';
import { computed } from '@vue/reactivity';

// Composition API는 템플릿 분리 시, import도 편하다. 모델에 components에 안 담아도 된다.
import Header from "./components/Header.vue";

// Reactivity : 2-Way 방식이다. 2-Way은 값이 바뀌면 값이 같이 바뀐다.
// 옵션s API에서는 기본 옵션이다.
data(){
    return{
        a:10
    }
},

// 1. ref()
let b = ref(30);

// 2. reactive
// 1) 변수 양방향 바인딩
let menu = reactive({
    id:1,
    name:"아메리카노",
    price:3000
});


// let list = reactive(new Map([['list']]));

// 2) 객체 양방향 바인딩
// ** reactive 그 자체를 바꾸면 안되고 그 속성을 바꿀 수 있어야 한다.
let model = reactive({
    newList:[],
    list:[]
});

// ------------- 3. Life Cycle -----------------------
onMounted(() => {
    console.log("mounted11");
    console.log(`b:${b.value}`);
    console.log(`menu.price:${menu.price}`);
    load();
    console.log(model.list);
});

// ** Fetch API의 새로운 방법!!
async function load(){
    
    // 1) 원래 Fetch API를 이렇게 사용했었다.
    // fetch("")
    // .then()
    // .then()
    // .then()
    // .then()

    // 2) 이제는 비동기 처리로 진행할 수 있다. 
    // 또한, 변수 선언은 위에서 사용할 수 있다.
    let response = await fetch("http://192.168.0.33:8080/menus");
    let json = await response.json();
    model.list = json.list;
    console.log(json);
    console.log(model.list);
}

// function을 애로우 펑션으로 사용? : 이유에 맞게 사용해라!!
// 짧은 것에도 이유가 있어야 한다.   

// 1) 함수 모양
function clickHandler(){
    console.log("cliCk");
    load();
}

// 2) 람다 표현식 : 코드를 다른 쪽으로 '수식'을 쉽게 전달하기 위해서 사용!!
// 그래서, 보통 수식을 많이 다루는 빅데이터에서 람다 표현식이 사용된다.
// 그래서 'const clickHandler = ;' 에서 나머지 코드 부분이 수식이여야 한다.
const clickHandler = () => {
    console.log("cliCk");
}

// Options API에서 computed를 이용하여 계산하는 방법
computed:{
    total(){
        return this.a+2;
    }
}

// *** 이것도 라이브러리 import 시켜야 한다.
// 첫 번째 방법 :
let total1 = computed(()=>b.value+3);

// 두 번째 방법 : JS map 이용
let total2 = computed(() => model.list.map((m) => m.price).reduce((p,c)=>p+c,0));

// 세 번째 방법 :

let total = computed(()=>{
    let result = 0;
    for(let m of model.list)
        result += m.price;

    return result;
});

<script>

// 옵션s API는 객체들의 중첩으로 이루어져 있다.
// export default들에 따라 객체를 반환해준다.
// 무조건 객체들의 중첩이 발생한다.
export default{
    
    // Reactivity : 2-Way 방식이다. 2-Way은 값이 바뀌면 값이 같이 바뀐다.
    // 옵션s API에서는 기본 옵션이다.
    data(){
        return{
            a:10
        }
    },

    // Options API에서 computed를 이용하여 계산하는 방법
    // computed:{
    //     total(){
    //         return this.a+2;
    //     }
    // }
}

</script>

<!-- 옵션s API와 Composition API들이 있기 때문에 
두 가지 블럭을 한번에 같이 사용할 수 있다. -->
<script setup>

    // import도 자동으로 추가해주자!
    import { onMounted, reactive, ref } from 'vue';
    import { computed } from '@vue/reactivity';

    // Composition API는 템플릿 분리 시, import도 편하다. 모델에 components에 안 담아도 된다.
    import Header from "./components/Header.vue";

    // 1. ref()
    // ref() 함수가 양방향 바인딩을 가능하게 해준다.
    // ref() 함수는 값이 1개 사용될 때 사용되며, 그냥 ref() 함수 1개만 쓰면 된다.
    let b = ref(30);

    // 2. reactive
    // ref({})는 Object에서 이렇게 하면 되지만 이상하다. 
    // 객체를 반응형으로 하려면, Reactive를 이용해서 객체의 반응형 프락시(proxy)를 반환합니다.
    let menu = reactive({
        id:1,
        name:"아메리카노",
        price:3000
    });


    // let list = reactive(new Map([['list']]));

    // ** reactive 그자체를 바꾸면 안되고 그 속성을 바꿀 수 있어야 한다.
    let model = reactive({
        newList:[],
        list:[]
    });

    // 5. computed
    // *** 이것도 import 시켜야 한다.
    // 첫 번째 방법 :
    // let total1 = computed(()=>b.value+3);

    // 두 번째 방법 : JS map 이용
    let total2 = computed(() => model.list.map((m) => m.price).reduce((p,c)=>p+c,0));

    // // 세 번째 방법 :
    
    // let total = computed(()=>{
    //     let result = 0;
    //     for(let m of model.list)
    //         result += m.price;

    //     return result;
    // });

    // ------------- 3. Life Cycle -----------------------
    onMounted(() => {
        console.log("mounted11");
        console.log(`b:${b.value}`);
        console.log(`menu.price:${menu.price}`);
        load();
        console.log(model.list);
    });

    // ------------- 4. Event Handlers  ----------------------
    
    // ** Fetch API의 새로운 방법!!
    async function load(){
        
        // 1) 원래 Fetch API를 이렇게 사용했었다.
        // fetch("")
        // .then()
        // .then()
        // .then()
        // .then()

        // 2) 이제는 비동기 처리로 진행할 수 있다. 
        // 또한, 변수 선언은 위에서 사용할 수 있다.
        let response = await fetch("http://192.168.0.33:8080/menus");
        let json = await response.json();
        model.list = json.list;
        console.log(json);
        console.log(model.list);
    }

    // function을 애로우 펑션으로 사용? : 이유에 맞게 사용해라!!
    // 짧은 것에도 이유가 있어야 한다.   

    // 1) 함수 모양
    function clickHandler(){
        console.log("cliCk");
        load();
    }

    // 2) 람다 표현식 : 코드를 다른 쪽으로 '수식'을 쉽게 전달하기 위해서 사용!!
    // 그래서, 보통 수식을 많이 다루는 빅데이터에서 람다 표현식이 사용된다.
    // 그래서 'const clickHandler = ;' 에서 나머지 코드 부분이 수식이여야 한다.
    // const clickHandler = () => {
    //     console.log("cliCk");
    // }
</script>

<!-- 옵션s API와 Composition API들이 있기 때문에 
두 가지 블럭을 한번에 같이 사용할 수 있다. -->
<script setup>

    // import도 자동으로 추가해주자!
    import { onMounted, reactive, ref, watch } from 'vue';
    import { computed } from '@vue/reactivity';

    // Composition API는 템플릿 분리 시, import도 편하다. 모델에 components에 안 담아도 된다.
    import Header from "./components/Header.vue";
    
    // ** reactive 그자체를 바꾸면 안되고 그 속성을 바꿀 수 있어야 한다.
    let model = reactive({
        newList:[],
        list:[]
    });


    // [2] watch 함수 사용
    // 입력값이 바뀔 때, 행위를 취해야할 때, watch를 사용한다! 
    watch(model,()=>{
    console.log("호호호");
    });

    let query = ref("");
    
    watch(query,()=>{
        console.log(query.value);

        if(query.value !== '')
            model.list = model.list.filter(m=>m.name.includes(query.value));
        else
            model.list = model.list.filter(m=>m.name.includes(''));
    });

    let aa = shallowRef({name:'okay'});
    // aa.value.name = "good";
    aa.name = "good";
    
    function inputHandler(){

    // trigger만 호출하면, 값이 리액티브적으로 값이 바뀐다.
    // 매번 적용되지는 않지만, 어느 순간 한번 리액티브로 동작시키고 싶으면, 
    // triggerRef를 이용!!! 피드백 받으면서 만든다?
    triggerRef(aa);
    }

function inputHandler(){

	// trigger만 호출하면, 값이 리액티브적으로 값이 바뀐다.
	// 매번 적용되지는 않지만, 어느 순간 한번 리액티브로 동작시키고 싶으면, 
	// triggerRef를 이용!!! 피드백 받으면서 만든다?
	triggerRef(aa);
}

let aa = shallowRef({name:'okay'});
// aa.value.name = "good";
aa.name = "good";

function inputHandler(){

	// trigger만 호출하면, 값이 리액티브적으로 값이 바뀐다.
	// 매번 적용되지는 않지만, 어느 순간 한번 리액티브로 동작시키고 싶으면, 
	// triggerRef를 이용!!! 피드백 받으면서 만든다?
	triggerRef(aa);
}

<script setup>
	import NewList from "./components/NewMenus.vue";
    
    let model = reactive({
        newList:[],
        list:[]
    });
</script>

<!-- 과거 방식의 부모로부터 자식에게 데이터 넘겨주는 방법!! 
    <script>
    export default(){
        props:['data']
    }
</script> -->

<!-- 현재 방식의 부모로부터 자식에게 데이터 넘겨주는 방법!!  -->
<!-- 컴포넌트와 상호작용하는 방법!! -->
<script setup>
import { reactive } from 'vue';
// import { reactive } from 'vue';

    let props = defineProps({
        list:[]
    });
</script>

<template>
    <div>
        <!-- total price : <span></span> -->
        total price : <span></span><br>
        name : <span></span><input type="text" v-model="aa.name" @input="inputHandler">
    </div>
    <NewList :list="model.newList" title="추천메뉴" :name="aa.name" />
</template>

<!-- 현재 방식의 부모로부터 자식에게 데이터 넘겨주는 방법!!  -->
<!-- 컴포넌트와 상호작용하는 방법!! -->
<script setup>
import { reactive } from 'vue';
// import { reactive } from 'vue';

    let props = defineProps({
        list:[],
        title:"",
        name:{}
    });
</script>

<template>
    <section>
        <h1> </h1>
        <ul>
            <li v-for="m in props.list"></li><br>
        </ul>
    </section>
</template>

<script>

    let showModal = ref(false);

    function showHandler(){
        // showModal.value=!showModal.value;
        showModal.value=true;
    }

</script>

<script setup>

    let props = defineProps({
        title:"",
        // show:"",
        show:false
    });

</script>

<script>
    let showModal = ref(false);

    function showHandler(){
        // showModal.value=!showModal.value;
        showModal.value=true;
    }
    function dlgOkHandler(e){
        console.log("오케이한거지?");
        console.log(e);
        showModal.value=false;
    }
</script>

<template>
    <div>
        <button @click="showHandler">show</button>
    </div>
    
    <!-- 데이터 값을 바인딩하지 않고 속성으로 넣지도 않고 바로 꽂을 때, v-slot 이용한다. -->
    <!-- 모달의 범위를 넓힐 수도 있다. DB의 목록도 포함시킬 수 있다. -->
    <Modal title="공지사항" :show="showModal" @ok="dlgOkHandler">
        <div>
            삭제되었습니다. 
        </div>
    
    </Modal>
</template>

<script setup>

    let props = defineProps({
        title:"",
        // show:"",
        show:false
    });

    // ******** $emit ***********
    // ** defineProps는 readOnly 변수라서 값을 변경할 수 없다.
    // 따라서, $emit을 이용하여 부모에서 자식의 값을 연동하여 사용한다.
    // function okHandler(){

    // }
</script>

<script setup>
    let props = defineProps({
        title:"",
        // show:"",
        show:false
    });
</script>