<template>
  <div class="AuHiViewBody">

    <span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">人员登记信息表</span>
    <el-button type="primary" @click="formOpen('add')">增加人员</el-button>

    <div class="AuHiBottom">
      <template>
        <el-table :data="PersonRegistrationData" height="700" border style="width: 100%">
          <el-table-column prop="employee_id" label="员工编号" align="center"></el-table-column>
          <el-table-column prop="name" label="员工名" align="center"></el-table-column>
          <el-table-column prop="sex" label="性别" align="center"></el-table-column>
          <el-table-column prop="age" label="年龄" align="center"></el-table-column>
          <el-table-column prop="phone" label="电话" align="center"></el-table-column>
          <el-table-column prop="dept" label="部门" align="center"></el-table-column>
          <el-table-column prop="hat_number" label="帽子编号" align="center"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="formOpen('change',scope.row)" type="text">编辑</el-button>
              <el-button type="text" @click="deleteFormOpen(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="员工编号">
          <el-input v-model="formData.employee_id"></el-input>
        </el-form-item>
        <el-form-item label="员工名">
          <el-input v-model="formData.name" :disabled="inpDisable"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <template>
            <el-radio v-model="formData.sex" label="男">男</el-radio>
            <el-radio v-model="formData.sex" label="女">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formData.age"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="formData.dept"></el-input>
        </el-form-item>
        <el-form-item label="帽子编号">
          <el-input v-model="formData.hat_number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formSave()">确 定</el-button>
        <el-button @click="formcancel()">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="你确定删除吗？" :visible.sync="deleteVisible" width="30%">
      <el-button type="danger" @click="agreeDelete()">删除</el-button>
      <el-button @click="cancelDelete()">取消</el-button>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      formTitle:"",
      formType:"",
      PersonRegistrationData:[{
        employee_id: '20210901',
        name: '王一',
        sex: '男',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      },{
        employee_id: '20210901',
        name: '王二',
        sex: '女',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      },{
        employee_id: '20210901',
        name: '王三',
        sex: '男',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      },{
        employee_id: '20210901',
        name: '王四',
        sex: '女',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      },{
        employee_id: '20210901',
        name: '王五',
        sex: '女',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      },{
        employee_id: '20210901',
        name: '王六',
        sex: '男',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      },{
        employee_id: '20210901',
        name: '王七',
        sex: '男',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      },{
        employee_id: '20210901',
        name: '王八',
        sex: '女',
        age: '22',
        phone: '19919191919',
        dept: '开发',
        hat_number: '01110'
      }],
      formVisible:false,
      formData: {
        employee_id: '',
        name: '',
        sex: '男',
        age: '',
        phone: '',
        dept: '',
        hat_number: ''
      },
      inpDisable:false,
      deleteVisible:false,
    }
  },
  methods:{
    formOpen(type,row){
      this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
      this.formVisible = true;
      this.formType = type;
      if(this.formType === "add"){
        this.formTitle = "增加人员";
        this.inpDisable = false;
      }else if(this.formType === "change"){
        this.formTitle = "修改人员";
        this.inpDisable = true;
        this.formData = {...row};
      }
    },
    formSave(){
      if(this.formType === "add"){
        if(this.formData.name === ""){
          alert("员工名不得为空！");
          return;
        }
        this.PersonRegistrationData.unshift(this.formData);
        this.formVisible = false;
        this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
      }else if(this.formType === "change"){
        const that = this;
        const newData = [];
        this.PersonRegistrationData.forEach(function(item){
          if(item.name === that.formData.name){
            newData.push(that.formData);
          }else{
            newData.push(item);
          }
        })
        this.PersonRegistrationData = newData;
        this.formVisible = false;
        this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
      }
    },
    formcancel(){
      this.formVisible = false;
      this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
    },
    deleteFormOpen(row){
      console.log(row);
      this.deleteVisible = true;
      this.formData = {...row};
    },
    agreeDelete(){
      const that = this;
      const newData = [];
      this.PersonRegistrationData = that.PersonRegistrationData.forEach(function(item){
        if(item.name === that.formData.name){
          return;
        }else{
          newData.push(item);
        }
      })
      this.PersonRegistrationData = newData;
      this.deleteVisible = false;
      this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
    },
    cancelDelete(){
      this.deleteVisible = false;
      this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
    }
  }
}
</script>

<style scoped>
.AuHiViewBody{
  width: 100%;
  height: 100%;
  background-color: rgb(245,246,251);
  padding: 30px;
  box-sizing: border-box;
}
.AuHiTop{
  background-color: white;
  border-radius: 10px;
  padding: 18px 20px;
  box-sizing: border-box;
}
.AuHiBottom{
  width: 100%;
  background-color: white;
  padding: 30px;
  box-sizing: border-box;
  height: 750px;
  margin-top: 20px;
}
.el-input{
  width: 80%;
}
</style>