<template>
    <div>
        <h1>Hello, {{title}}</h1>
        <div>
            {{htmlString}}
        </div>
        <div v-html="htmlString">

        </div>

        <p>
            <h2>input 텍스트 </h2>
            <input type="text" v-model="valueModel" />
            {{valueModel}}
        </p>

        <p>
            <h2>input 정수 </h2>
            <input type="number" v-model.number="numberModel" />
        </p>

        <p>
            <h2>텍스트 </h2>
            <textarea v-model="message"></textarea>
        </p>

        <p>
            <h2>선택박스 </h2>
            <select v-model="city" @change="selectChange">
                <option value="02">서울</option>
                <option value="21">부산</option>
                <option value="064">제주</option>
            </select>
        </p>

        <p>
            <h2>체크 박스</h2>
            <label><input type="checkbox" value="서울" v-model="checked">서울</label>
            <label><input type="checkbox" value="부산" v-model="checked">부산</label>
            <label><input type="checkbox" value="제주" v-model="checked">제주</label>

        </p>

        <p>
            {{checked}}
        </p>

        <p>
            <h2>라디오 체크</h2>
            <label>
                <input type="radio" :value="radioValue1" v-model="picked">
            </label>
            <label>
                <input type="radio" v-bind:value="radioValue2" v-model="picked">
            </label>
            <label>
                <input type="radio" v-bind:value="radioValue3" v-model="picked">
            </label>
        </p>
        <p>
            라디오 버튼 결과 값 - {{picked}}
        </p>


        <p>
            <img v-bind:src="imgSrc">
        </p>


        <p>
            <h2>
                button 객체의 disabled
            </h2>
            <input type="text" v-model="textValue" />
            <button type="button" v-bind:disabled="textValue==''">Click</button>
        </p>


        <p>
            <h2>클래스 바인딩</h2>            
            <div v-bind:class="{'active':isAcitve,'text-red':hasError}">
                클래스 바인딩
            </div>
            <br>

            <div class="container" v-bind:class="[activeClass, errorClass]">Class Binding</div>
        </p>

        <p>
            <h2>인라인 스타일 바인딩</h2>
            <div v-bind:style="styleObject">인라인 스타일 바인딩</div>
            <div v-bind:style="[baseStyle, addStyle]">인라인 스탈일 바인딩</div>
        </p>

        <p>
              <h2>for 문</h2> 
              <div class="container"  >
            <table border="1" >
                <thead>
                    <tr>
                        <th>제품명</th>
                        <th>가격</th>
                        <th>카테고리</th>
                        <th>배송료</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(product, i) in productList"   :key="i">
                        <td>{{product.product_name}}</td>
                        <td>{{product.price}}</td>
                        <td>{{product.category}}</td>
                        <td>{{product.delivery_price}}</td>
                    </tr>
                </tbody>
            </table> 
            </div>  
        </p>

        
        <p>
              <h2>v-if 문법</h2> 
              <h1 v-if="type=='A'">A</h1>
              <h1 v-else-if="type=='B'">B</h1>
              <h1 v-else>C</h1>
        </p>

        <p>
            <button type="button" @click="increaseCounter">Add 1</button>
            <p> The counter is : {{counter}}</p>
        </p>

        <p>
            <h2>여러개 함수 호출</h2>
            <button type="button" @click="one(), two()">Click</button>
        </p>    

        <p>
            <h2>Change 이벤트</h2>
            <select v-model="selectValue" @change="changeSelect">
                <option value="서울" >서울</option>
                <option value="부산">부산</option>
                <option value="제주">제주</option>
            </select>
        </p>

          <p>
            <h2>Computed </h2>
            <h1>{{firstName + '' + lastName}}</h1>
            <h1>fullName  : {{fullName}}</h1>
        </p>      

        <p>
            <h2>watch</h2>
            <h1>all : {{all}} </h1>
            <button type="button"  @click="changeName">변경</button>
        </p>



    </div>
</template>

<script>
    export default {
        data() {
            return {
                title: "World",
                htmlString: "<p style='color:red;'>This is a red String </p>",
                valueModel: 'South Korea',
                numberModel: 1,
                message: "여러 줄을 입력할 수 있는 textarea 입니다.",
                city: "064",
                checked: [],
                picked: "",
                radioValue1: "서울",
                radioValue2: "부산",
                radioValue3: "제주",
                imgSrc: "https://w.namu.la/s/c7102363c3bf2ee725fe466b7c0aa9671656895e21d4f7b8d105a730ebed36be6ec5d8746445a430700c83d92408744daadf87f7fc359f0a48c305b25ce39f4a5d25c99f9460b8c5d84455c29cfd292b0ce295c1b771992fd96c261bfa9d02d973fd0081760d3ace622948b47b9b7e11",
                textValue: "",
                isAcitve: true,
                hasError: false,
                activeClass: 'active',
                errorClass: "text-red",
                styleObject: {
                    color: 'red',
                    fontSize: '19px'
                },
                baseStyle: 'background-color:darkblue; width:200px; height:200px; margin:0 auto',
                addStyle: 'color:red; font-weight:bold',
                productList: [{
                        "product_name": "기계식키보드",
                        "price": 25000,
                        "category": "노트북/태블릿",
                        "delivery_price": 5000
                    },
                    {
                        "product_name": "무선마우스",
                        "price": 12000,
                        "category": "노트북/태블릿",
                        "delivery_price": 5000
                    },
                    {
                        "product_name": "아이패드",
                        "price": 725000,
                        "category": "노트북/태블릿",
                        "delivery_price": 5000
                    },
                    {
                        "product_name": "태블릿거치대",
                        "price": 32000,
                        "category": "노트북/태블릿",
                        "delivery_price": 5000
                    },
                    {
                        "product_name": "무선충전기",
                        "price": 42000,
                        "category": "노트북/태블릿",
                        "delivery_price": 5000
                    }
                ],
                type:"B",
                counter:0,
                selectValue:"서울",
                firstName:"홍길동",
                lastName:"66",
                aaa:"aaa",
                bbb:"bbb",
                all:""
            }
        },

        computed:{
            fullName(){
                return this.firstName + '   '  +this.lastName;
            }
        },
        methods: {
            selectChange() {
                alert(this.city);
            },

            increaseCounter(){
                this.counter=this.counter+1;
            },
            one(){
                alert("one");
            },
            two(){
                alert("two");
            },

            changeSelect(){
                alert(this.selectValue);
            },

            changeName(){
                this.aaa ="ccc";
            }
        },
        watch:{
            aaa(){
                const result=this.aaa +  " "  +this.bbb;
                console.log(" aaa()  :"  +result);
                this.bbb="kkk";
            },
            bbb(){
                  const result=this.aaa +  " "  +this.bbb;
                  console.log(" bbb()  :"  +result);
            }
        }
    }
</script>

<style scoped>
    .container {
        width: 500px;
        height: auto;
        margin: 0 auto;
    }
\
    .active {
        background-color: yellow;
        font-weight: bold;
    }

    .text-red {
        color: red;
    }
</style>