<template>
    <hr style="height: 30px;
    border: 0;
    box-shadow: inset 0 30px 30px -30px darkblue;">
    <h1>
        Tutorial-3-composition
    </h1>
    <br>
    <hr>
    <!-- 内联事件处理器 -->
    <h3>
        <span>内联事件处理器</span>
    </h3>
    <button @click="count++">Add 1</button>
    <p>Count is: {{ count }}</p>
    <br>
    <hr>
    <!-- 函数事件处理器 -->
    <h3>
        <span>函数事件处理器</span>
    </h3>
    <button data-value="buttonGreet" @click="greet">Greet</button>
    <br>
    <hr>
    <!-- 事件修饰符 -->
    <h3>
        <span>事件修饰符</span>
    </h3>
    <button @click.once="handleOnce">只触发一次</button>
    <br>
    <hr>
    <!-- 按键修饰符 -->
    <h3>
        <span>按键修饰符</span>
    </h3>
    <input id="inputKeyboard" @keyup.enter="handleEnter" placeholder="按回车捕获键盘事件"/>
    <br>
    <hr>
    <!-- 表单输入绑定 -->
    <h3>
        <span>表单输入绑定</span>
    </h3>
    <div>
        <input v-model="text"/>
    </div>
    <div>
        <output>{{ text }}</output>
    </div>
    <br>
    <hr class="half-line">
    <br>
    <div>
        <input v-model.lazy="textLazy"/>
    </div>
    <div>
        <output>{{ textLazy }}</output>
    </div>
    <br>
    <hr class="half-line">
    <br>
    <div>复选</div>
    <div>
        <input type="checkbox" id="checkbox" v-model="checked" />
        <label for="checkbox">{{ checked }}</label>
    </div>
    <br>
    <hr class="half-line">
    <br>
    <div>单选</div>
    <div>Picked: {{ picked }}</div>
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    <br>
    <hr class="half-line">
    <br>
    <div>复选框</div>
    <div>Selected: {{ selected }}</div>
    <select v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <hr>

</template>

<script>

import {ref} from "vue";

export default {

    // 固定名称的函数，在生命周期钩子中自动执行
    setup() {

        // 定义变量
        // 内联事件处理器
        const count = ref(0)
        // 函数事件处理器
        const name = ref("Vue.js")
        // 表单输入绑定
        const text = ref("表单输入绑定文字")
        const textLazy = ref("表单输入绑定文字.lazy")
        const checked = ref(false)
        const picked = ref("None")
        const selected = ref([])
        // 定义计算属性
        // 定义函数
        function greet(event) {
            alert(`Hello ${name.value}!`)
            // `event` 是 DOM 原生事件
            if (event) {
                const presetValue = event.target.getAttribute('data-value');
                alert(event.target.tagName + " - " + presetValue)
            }
        }

        function handleOnce() {
            alert("触发了")
        }

        function handleEnter() {
            document.getElementById("inputKeyboard").value = "Enter pressed!"
        }

        // 返回变量和函数，暴露给模板使用
        return {
            // 变量
            count,
            name,
            text,
            textLazy,
            checked,
            picked,
            selected,
            // 函数
            greet,
            handleOnce,
            handleEnter
        }

    }

}

</script>

<style>
.half-line {
    width: 50%; /* 改变宽度为50%，实现半条线的效果 */
    border: none; /* 移除默认边框 */
    height: 0.5px; /* 设置线条的高度 */
    background-color: grey; /* 设置线条颜色 */
    float: left;
}
</style>