<template>
  <div class="manage-note">
    <div class="box" v-if="isrefresh">
      <el-table :data="tableData" style="width: 100%" border> 
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model.trim="scope.row.name" size="small" placeholder="请输入姓名"/>
            <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model.trim="scope.row.phone" size="small" placeholder="请输入手机号码"/>
            <span v-else>{{scope.row.phone}}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱地址" align="center">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model.trim="scope.row.email" size="small" placeholder="请输入邮箱地址"/>
            <span v-else>{{scope.row.email}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.edit">
              <el-button type="text" size="small" @click="save(scope.row)">保存</el-button>
              <el-button type="text" size="small" class="gray" @click="cancel(scope)">取消</el-button>
            </p>
            <p v-else>
              <el-button type="text" size="small" class="red" @click="del(scope)">删除人员</el-button>
              <el-button type="text" size="small" @click="edit(scope.row)">编辑个人信息</el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <p>
        <el-button type="primary" style="margin-top:10px" icon="el-icon-setting" @click="addUser">添加人员</el-button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  components: {

  },

  mixins: [],

  props: {

  },

  data () {
    return {
      tableData: [],
      isrefresh: true,
    }
  },

  computed: {

  },

  mounted() {

  },

  methods: {
    addUser() {
        this.tableData.push(this.initUser());        
    },
    initUser() {
        return {name: "", phone: "", email: "", edit: true};
    },
    save(){},
    // 取消 编辑取消or新建取消
    cancel(scope) {
        if(scope.row.id) {
            scope.row.edit = false;
        } else {
            this.tableData.splice(scope.$index, 1)
        }
    },
    // 编辑
    edit(row) {
        row.edit = true;
    }
  },

}
</script>

<style scoped lang="less" >
.manage-note{

}
</style>
