let box=document.querySelector(".box");
let dialog=document.querySelector(".dialog");
let submit=document.querySelector(".submit");
let cancel=document.querySelector(".cancel");
let search=document.querySelector(".search");
let ipts=[...document.querySelectorAll(".dialog input")];
function getData(){
    axios.get("/api/list").then(result=>{
        render(result.data);
    })
}
//渲染数据
function render(data){
    box.innerHTML=data.map(item=>{
        return`
        <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex?"男":"女"}</td>
        <td>
            <button class="delete" id="${item.id}">删除</button>
            <button>编辑</button>
        </td>
    </tr>
        `
    }).join("");
}
getData();
//事件委托
document.onclick=e=>{
    let tar=e.target;
    switch(tar.className){
        case "delete":
        let id=tar.id;
        axios.post("/api/delete",{
            id,
        }).then(result=>{
            if(result.data.code){
                getData();
            }
        })
        break;
        case"add":
        dialog.style.display="block";
        break;
        //取消
        case"cancel":
        dialog.style.display="none";
        break;
        //提交
        case"submit":
        dialog.style.display="none";

        axios.post("/api/add",{
            name:ipts[0].value,
            age:ipts[1].value,
            sex:ipts[2].value,
            id:Math.random().toString().slice(2)
        }).then((result)=>{
           if(result.data.code) getData();
        })
        break;
    }
}
//模糊搜索
search.oninput=()=>{
    axios.post("/api/search",{
        val:search.value
    }).then((result)=>{
        render(result.data);
    })
}