<template>
  <div class="total-wrapper">
    <div class="search-wrapper">
      <el-row :gutter="12">
        <el-col :span="6"><el-input v-model="personName" placeholder="请输入人员名称" /></el-col>
        <el-col :span="16"><el-button type="success" icon="el-icon-search" size="mini">搜索</el-button></el-col>
      </el-row>
    </div>
    <div class="tools-btn-wrapper">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addPerson">新增</el-button>
      <el-button type="success" icon="el-icon-edit" size="mini" :disabled="selectedPeo.length !== 1" @click="changePerson">修改</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="selectedPeo.length < 1" @click="deletePerson">删除</el-button>
    </div>
    <div class="table-people-wrapper">
      <el-table
        ref="multipleTable"
        :data="people"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="姓名"
          prop="name"
          width="90"
        />
        <el-table-column
          label="部门"
          prop="department"
          width="120"
        />
        <el-table-column
          label="分组"
          prop="grouping"
          width="120"
        />
        <el-table-column
          label="v网号"
          prop="vnumber"
          width="160"
        />
        <el-table-column
          label="手机号"
          prop="phone"
          width="160"
        />
        <!-- <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="editPeople(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              @click="deletePeople(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="[10, 20, 30]"
        layout="prev, pager, next, jumper"
        :total="people.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="新增人员"
      :visible.sync="adddialogVisible"
      width="30%"
    >
      <el-form :model="personinfo">
        <el-form-item label="姓名" :label-width="80">
          <el-input v-model="personinfo.name" />
        </el-form-item>
        <el-form-item label="部门" :label-width="80">
          <el-input v-model="personinfo.department" />
        </el-form-item>
        <el-form-item label="分组" :label-width="120">
          <el-input v-model="personinfo.grouping" />
        </el-form-item>
        <el-form-item label="v网号" :label-width="150">
          <el-input v-model="personinfo.vnumber" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="120">
          <el-input v-model="personinfo.phone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addPersonConfirm">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改人员信息"
      :visible.sync="changedialogVisible"
      width="30%"
    >
      <el-form :model="personinfo">
        <el-form-item label="姓名" :label-width="80">
          <el-input v-model="personinfo.name" />
        </el-form-item>
        <el-form-item label="部门" :label-width="80">
          <el-input v-model="personinfo.department" />
        </el-form-item>
        <el-form-item label="分组" :label-width="120">
          <el-input v-model="personinfo.grouping" />
        </el-form-item>
        <el-form-item label="v网号" :label-width="150">
          <el-input v-model="personinfo.vnumber" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="120">
          <el-input v-model="personinfo.phone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changedialogVisible = false">取消</el-button>
        <el-button type="primary" @click="changePersonConfirm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      personName: '',
      people: [
        {
          name: '人员1',
          department: 'planet1',
          grouping: '开普勒1号星球',
          vnumber: '神奇的外星人一号',
          phone: '15510791135'
        }
      ],
      selectedPeo: [],
      currentPage: 1,
      pageSize: 10,
      personinfo: {
        name: 'hello world',
        grouping: '蚩尤',
        vnumber: '无敌网号',
        phone: '17610791135'
      },
      adddialogVisible: false,
      changedialogVisible: false
    }
  },
  mounted() {
    // axios调用接口
    // 获取当前部门
    // 获取当前人员数组
  },
  methods: {
    // 选中行的处理
    handleSelectionChange(val) {
      console.log('选中了一些行', val)
      this.selectedPeo = val
    },
    // 编辑人员信息
    editPeople(index, row) {
      console.log(index, row)
    },
    // 删除人员信息
    deletePeople(index, row) {
      console.log(index, row)
    },
    // 大小改变
    handleSizeChange(val) {
      console.log(`每页${val}条`)
      this.pageSize = val
    },
    // 页码改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    // 新增人员界面
    addPerson() {
      this.adddialogVisible = true
    },
    // 修改人员界面
    changePerson() {
      this.changedialogVisible = true
    },
    // 删除人员界面
    deletePerson() {
      // 删除人员
    },
    // 新增人员提交
    addPersonConfirm() {
      // axios调用接口
    },
    // 修改人员信息提交
    changePersonConfirm() {
      // axios调用接口
      // 修改人员信息
    }
  }
}
</script>

<style lang="scss">
  .total-wrapper {
    padding: 20px;
  }
  .tools-btn-wrapper {
    margin: 20px 0;
  }
</style>
