<template>
    <div class="person">
        <div class="operate">
            id<input type="text" name="id">
            姓名<input type="text" name="name">
            密码<input type="text" name="password">
            邮箱<input type="text" name="email">
            <button @click="findList">查询</button>
            


        </div>
        <div class="operate">
            <!-- id<input type="text" name="addId" v-model="addId"> -->
            姓名<input type="text" name="addName" v-model="addName">
            密码<input type="text" name="addPassword" v-model="addPassword">
            邮箱<input type="text" name="addEmail" v-model="addEmail">
            <button @click="addList">添加</button>


        </div>

        <div class="list">
            <table border="1">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>password</th>
                <th>email</th>
                <th>操作</th>
            </tr>
            
                <tr v-for="g in people" :key="g.id">
                    <td>{{g.id}}</td>
                    <td>{{g.name}}</td>
                    <td>{{g.password}}</td>
                    <td>{{g.email}}</td>

                    <td>
                        <button @click="updateItem(g.id)">修改</button>
                        <button @click="deleteItem(g.id)">删除</button>
                    </td>

                </tr>
            
        
        </table>
      
        </div>
        
    </div>
</template>

<script setup>
   import { ref,reactive,onMounted} from 'vue'
   import axios from 'axios'    
    let people = reactive([
    { id: 'ahsgdyfa01', name: '英雄联盟' ,password:'23456',email:'123456@qq.com'},
    { id: 'ahsgdyfa02', name: '王者荣耀' ,password:'3456',email:'123456@qq.com'},
    { id: 'ahsgdyfa03', name: '原神',password:'456',email:'123456@qq.com' }
    ])

    
    // 查找全部的方法api
    function getAll() {
    axios.get('http://localhost:8080/selectAll')
         .then(res => {
             // 使用扩展运算符来保持响应性
             people.push(...res.data)
         })
         .catch(error => console.error('There was an error fetching the data!', error))
}


    
// 定义添加表单的数据
let addId = ref('');
let addName = ref('');
let addPassword = ref('');
let addEmail = ref('');

function addList() {
    games.push({
        id: addId.value,
        name: addName.value,
        password: addPassword.value,
        email: addEmail.value
    });
    // 清空输入框
    addId.value = '';
    addName.value = '';
    addPassword.value = '';
    addEmail.value = '';

    console.log(games);
}



onMounted(() => {
    getAll();
});



</script>
 

<style>
.person .list {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使容器高度占满整个视口 */
}
.person .operate {
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    gap: 10px; /* 设置元素之间的间距 */
    align-items: center; /* 垂直居中对齐 */

}
</style>
