<template>

<div class="manage tc">
    <button class="btn-add" @click="add">新增</button>
    <div class="input-area" v-show="showAdd">
        <input type="text" placeholder="请输入管理人员姓名" v-model="nameValue" />
        <button class="btn-confirm" @click="addName">确定</button>
    </div>
    <div class="input-area">
        <input type="text" placeholder="请输入搜索内容" v-model="search" />
        <!--<button class="btn-search" @click="search">搜索</button>-->
    </div>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody v-if="peoples.length">
            <tr v-for="(item,index) in searchName(peoples)">
                <td>{{item.name}}</td>
                <td :id="index">
                    <span @click="edit">编辑</span>
                    <span @click="del">删除</span>
                </td>
            </tr>
        </tbody>
        <tbody v-else>
            <tr>
                <td>No data available in table</td>
            </tr>
        </tbody>
    </table>

    <div class="model" v-show="showModel">
        <div class="model-content">
            <input type="text" placeholder="请输入新姓名" v-model="newName" />
            <button class="btn-concel" @click="concel">取消</button>
            <button class="btn-confirm-new" @click="changeName">确定</button>
        </div>
    </div>
    <footer-nav :class="{'isManage':isNowPage}"></footer-nav>
</div>

</template>

<script>

import FooterNav from '../../components/footer.vue';
export default {
    components: {
        FooterNav
    },
    data() {
        return {
            isNowPage: true,
            showAdd: false,
            showModel: false,
            peoples: [],
            nameValue: '',
            newName: '',
            search: '',
            noResult: false,
            editId: 0
        }
    },
    methods: {
        add() {
            this.showAdd = true
        },
        addName() {
            var v = this.nameValue;
            if(v.trim() == "") {
                alert('请输入管理人员姓名')
            } else {
                var data = {};
                data.name = v;
                this.peoples.push(data);
                this.nameValue = "";
            }
        },
        del(e) {
            var id = e.target.offsetParent.id;
            this.peoples.splice(id, 1)
        },
        edit(e) {
            var id = e.target.offsetParent.id;
            this.showModel = true;
            this.editId = id;
            this.newName = this.peoples[id].name;
        },
        concel() {
            this.showModel = false;
        },
        changeName() {
            var v = this.newName;
            if(v.trim() == "") {
                alert('请输入新姓名')
            } else {
                this.peoples[this.editId].name = this.newName;
                this.showModel = false;
            }
        },
        searchName: function(peoples) {
            var v = this.search;
            console.log(peoples)
            if(v) {
                return peoples.filter(function(item) {
                    return Object.keys(item).some(function(name) {
                        return String(item[name]).toLowerCase().indexOf(v) > -1;
                    })
                });
                //this.peoples=[];
            }
            return this.peoples;
        }
    }
}

</script>