<template>
    <hr style="height: 30px;
    border: 0;
    box-shadow: inset 0 30px 30px -30px darkblue;">
    <h1>
        Tutorial-2-composition
    </h1>
    <br>
    <hr>
    <!-- 计算属性 -->
    <h3>
        <span>计算属性</span>
    </h3>
    <div>
        <span>Has published books:</span>
        <span>{{ publishedBooksMessage }}</span>
    </div>
    <br>
    <hr>
    <!-- 绑定 HTML class -->
    <h3>
        <span>绑定 HTML class</span>
    </h3>
    <div>
        <button @click="toggleActive">
            Toggle Active
        </button>
        <button @click="toggleHasError">
            Toggle Has Error
        </button>
    </div>
    <div class="static" :class="{ active: isActive, 'text-danger': hasError }">
        <span>检查绑定 HTML class结果</span>
    </div>
    <br>
    <hr>
    <!-- 绑定 Style -->
    <h3>
        <span>绑定 Style</span>
    </h3>
    <div>
        <div>
            <label>输入字体大小</label>
            <input id="inputFontSize" type="number" min="10" max="40"/>
            <button @click="changeFontSize">修改字体大小</button>
        </div>
        <div :style="{ 'font-size': fontSize + 'px' }">
            检查绑定style结果
        </div>
    </div>
    <br>
    <hr>
    <!-- v-for 不绑定 id 的问题 -->
    <h3>
        <span>v-for 不绑定 id 的问题</span>
    </h3>
    <div>
        <input type="checkbox" v-model="isChecked.result">
            v-for中是否添加key
        </input>
    </div>
    <div>
        <button @click="shuffle">Shuffle</button>
        <output>不加id，只刷新姓名的顺序，input框中的顺序不刷新</output>
        <ul>
            <li v-for="item in items" :key="isChecked.result? item.id : Undefined">
                <input/>
                {{ item.name }}
            </li>
        </ul>
    </div>
    <br>
    <hr>
    <!-- 数组变化侦测 -->
    <h3>
        <span>数组变化侦测</span>
    </h3>
    <div>
        <input id="npcName"/>
        <button @click="addNpc">添加</button>
    </div>
    <div>
        <div v-for="npc in npcs">
            {{ npc }}
        </div>
    </div>
    <br>
    <hr>
    <!-- 数组过滤和排序 -->
    <h3>
        <span>数组过滤和排序</span>
    </h3>
    <div>
        <span>过滤结果</span>
        <div v-for="filteredNpc in filteredNpcs">
            {{ filteredNpc }}
        </div>
    </div>
    <br>
    <div>
        <span>排序结果</span>
        <div v-for="sortedNpc in sortedNpcs">
            {{ sortedNpc }}
        </div>
    </div>
    <br>

</template>


<script>
import {ref} from "vue"
import {reactive} from "vue"
import {computed} from "vue"

export default {

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

        // 定义变量
        // 用于计算属性
        const author = reactive({
            name: "John Doe",
            books: [
                "Vue 2 - Advanced Guide",
                "Vue 3 - Basic Guide",
                "Vue 4 - The Mystery"
            ]
        })
        // 用于绑定 HTML class
        const isActive = ref(true)
        const hasError = ref(false)
        // 用于绑定 Style
        const fontSize = ref(24)
        // 用于展示v-for 不绑定 id 的问题
        const items = reactive([
            { id: 1, name: 'Alice' },
            { id: 2, name: 'Bob' },
            { id: 3, name: 'Charlie' }
        ])
        const isChecked = reactive({
            result: true
        })
        // 用于数组变化侦测
        const npcs = reactive([
            "张三",
            "李四",
            "王五"
        ])

        // 定义计算属性
        const publishedBooksMessage = computed(() => {
            return author.books.length > 0 ? "Yes" : "No"
        })
        // 用于数组过滤和排序
        const filteredNpcs = computed(() => {
            return npcs.filter((str, index) => index % 2 === 0)
        })
        const sortedNpcs = computed(() => {
            var newArray = filteredNpcs
            return newArray.value.sort()
        })

        // 定义函数
        function toggleActive() {
            isActive.value = !isActive.value
        }

        function toggleHasError() {
            hasError.value = !hasError.value
        }

        function changeFontSize() {
            fontSize.value = document.getElementById("inputFontSize").value
        }

        function shuffle() {
            items = items.sort(() => Math.random() - 0.5);
        }

        function addNpc() {
            if (document.getElementById("npcName").value != "") {
                npcs.push(document.getElementById("npcName").value)
                document.getElementById("npcName").value = ""
            }
        }

        // 返回变量和函数，暴露给模板使用
        return {
            // 变量
            author,
            isActive,
            hasError,
            fontSize,
            items,
            isChecked,
            npcs,
            // 计算属性
            publishedBooksMessage,
            filteredNpcs,
            sortedNpcs,
            // 函数
            toggleActive,
            toggleHasError,
            changeFontSize,
            shuffle,
            addNpc
        }
    }
}

</script>


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

.text-danger {
    color: red; /* 或其他你希望用来表示危险或错误的颜色 */
}

.active {
    /* 你可以在这里定义活动状态下的样式，比如改变背景色、字体颜色等 */
    font-size: 30px;
}
</style>
