<template>
    <div class="person">
        <!-- 输入区域 -->
        <div class="operate-container">
            <div class="operate">
                <label>id<input type="text" name="id" v-model="queryId"></label>
                <label>姓名<input type="text" name="name" v-model="queryName"></label>
                <label>密码<input type="text" name="password" v-model="queryPassword"></label>
                <label>邮箱<input type="text" name="email" v-model="queryEmail"></label>
                <button @click="findList(queryId, queryName, queryPassword, queryEmail)">查询</button>
            </div>
            <div class="operate">
                <label>姓名<input type="text" name="addName" v-model="addName"></label>
                <label>密码<input type="text" name="addPassword" v-model="addPassword"></label>
                <label>邮箱<input type="text" name="addEmail" v-model="addEmail"></label>
                <button @click="addList(addName, addPassword, addEmail)">添加</button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="list-container">
            <table border="1">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>password</th>
                        <th>email</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <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="openModal(g)">修改</button>
                            <button @click="deleteItem(g.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 模态框 -->
        <div v-if="showModal" class="modal-overlay" @click="closeModal">
            <div class="modal" @click.stop>
                <h3>修改信息</h3>
                <label>姓名<input type="text" v-model="editingItem.name"></label>
                <label>密码<input type="text" v-model="editingItem.password"></label>
                <label>邮箱<input type="text" v-model="editingItem.email"></label>
                <button @click="updateItemConfirm">确认修改</button>
                <button @click="closeModal">取消</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'

let people = reactive([])

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

// 定义查找数据
let queryId = ref('')
let queryName = ref('')
let queryPassword = ref('')
let queryEmail = ref('')

// 定义编辑数据
let editingItem = ref(null)
let showModal = ref(false)

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

// 部分查找
function findList(queryId, queryName, queryPassword, queryEmail) {
    axios.get(`http://localhost:8080/select?id=${queryId}&name=${queryName}&password=${queryPassword}&email=${queryEmail}`)
        .then(res => {
            console.log(res)
            people.splice(0, people.length)
            people.push(...res.data)
            if (res.data.length === 0) {
                alert("没有该数据")
                getAll()
            }
        })
}

// 添加元素
// 添加元素
function addList() {
    if (!addName.value || !addPassword.value || !addEmail.value) {
        alert("请输入完整的姓名、密码和邮箱");
        return;
    }

    axios.get(`http://localhost:8080/insert?name=${addName.value}&password=${addPassword.value}&email=${addEmail.value}`)
        .then(res => {
            console.log(res)
            // 清空输入框
            addName.value = '';
            addPassword.value = '';
            addEmail.value = '';
            getAll();
        })
        .catch(error => {
            console.error('There was an error adding the item!', error);
            if (error.response && error.response.status === 500) {
                alert("服务器内部错误，请检查输入数据是否符合要求");
            }
        })
}

// 打开模态框
function openModal(item) {
    editingItem.value = { ...item }
    showModal.value = true
}

// 关闭模态框
function closeModal() {
    showModal.value = false
}

// 确认修改
function updateItemConfirm() {
    const { id, name, password, email } = editingItem.value
    axios.get(`http://localhost:8080/update?id=${id}&name=${name}&password=${password}&email=${email}`)
        .then(res => {
            console.log(res)
            closeModal()
            getAll()
        })
        .catch(error => console.error('There was an error updating the item!', error))
}

// 删除功能：deleteItem(g.id)
function deleteItem(id) {
    console.log(id)
    axios.get(`http://localhost:8080/delete?id=${id}`)
        .then(() => {
            getAll()
        })
        .catch(error => console.error('There was an error deleting the item!', error))
}

onMounted(() => {
    getAll()
})
</script>

<style>
.person {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.operate-container {
    padding: 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.operate {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.list-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* 模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.modal label {
    display: block;
    margin-bottom: 10px;
}

.modal input {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
}

.modal button {
    margin-right: 10px;
}
</style>