<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <el-card>
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handleAdd('department_Form')">新增</el-button>
          <el-button type="warning" icon="el-icon-edit" size="small" @click="handleEdit()">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTable()">删除</el-button>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <span>人员名称:</span>
          <el-input v-model="Name" placeholder="请输入人员名称" class="input-with-select" size="small" style="width: 200px; margin-right: 15px" clearable>
            <el-button slot="append" icon="el-icon-search" @click="fetchPeopleForName"/>
          </el-input>
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addPeople()">新增</el-button>
          <!--<el-button v-popover:popover4 type="success" icon="el-icon-sort" size="small" @click="moveGroup">移动-->
          <!--</el-button>-->
          <!--<el-button size="small" @click="postMaintain()">岗位维护</el-button>-->
          <!--<el-popover-->
          <!--ref="popover4"-->
          <!--width="178"-->
          <!--placement="right"-->
          <!--trigger="click"-->
          <!--@hide="hide()">-->
          <!--<el-dropdown size="small" placement="bottom-start" style="margin-right: 0">-->
          <!--<el-input-->
          <!--v-model="nodeName1"-->
          <!--:disabled="true"-->
          <!--size="small"-->
          <!--placeholder="请选择部门"/>-->
          <!--<el-button type="text" size="small" style="margin-left: 60px; margin-top: 15px" @click="moveGroupConfim">-->
          <!--确认-->
          <!--</el-button>-->
          <!--<el-dropdown-menu slot="dropdown">-->
          <!--<el-tree-->
          <!--ref="treeForm"-->
          <!--:data="departmentData"-->
          <!--:props="defaultProps"-->
          <!--style="width: 150px"-->
          <!--node-key="id"-->
          <!--accordion-->
          <!--@node-click="NodeClick"/>-->
          <!--</el-dropdown-menu>-->
          <!--</el-dropdown>-->
          <!--</el-popover>-->
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <el-card class="box-card" style="min-height: 743px; max-height: 743px">
          <div slot="header" class="clearfix">
            <span>部门维护</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="expandALL()">展开</el-button>
          </div>
          <div style="height: 650px">
            <el-tree
              ref="treeForm"
              :data="departmentData"
              :props="defaultProps"
              show-checkbox
              node-key="id"
              check-strictly
              default-expand-all
              @check-change="handleClick"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-table
            ref="multipleTable"
            :data="List"
            stripe
            tooltip-effect="dark"
            style="width: 100%"
            height="679"
            highlight-current-row
            border
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55"/>
            <el-table-column align="center" label="部门名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.节点名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="考勤编号" width="100">
              <template slot-scope="scope">
                {{ scope.row.考勤编号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="密码" width="100">
              <template slot-scope="scope">
                {{ scope.row.密码 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="姓名" width="100">
              <template slot-scope="scope">
                {{ scope.row.姓名 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="性别" width="100">
              <template slot-scope="scope">
                {{ scope.row.性别 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="身份证号" width="165">
              <template slot-scope="scope">
                {{ scope.row.身份证号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="学历" width="100">
              <template slot-scope="scope">
                {{ scope.row.学历名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="入职时间" width="100">
              <template slot-scope="scope">
                {{ scope.row.入公司时间 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="出生日期" width="100">
              <template slot-scope="scope">
                {{ scope.row.出生日期 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="联系方式" width="110">
              <template slot-scope="scope">
                {{ scope.row.联系电话 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="岗位工种" width="100">
              <template slot-scope="scope">
                {{ scope.row.岗位名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="民族" width="100">
              <template slot-scope="scope">
                {{ scope.row.民族 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="家庭住址" width="200">
              <template slot-scope="scope">
                {{ scope.row.家庭住址 }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEditPeople(scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deletePeopleTable(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 10px;">
            <el-pagination
              :current-page="PageCurrent"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--新增和编辑部门-->
    <el-dialog :title="department_Title" :visible.sync="department_DFV" center style="min-height: 200px" width="400px">
      <el-form ref="department_Form" :model="department_Form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-form-item label="部门名称" prop="DepartmentName">
          <el-input v-model="department_Form.DepartmentName" size="small" style="width:200px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="department_Title==='新增部门'" type="primary" @click="submitAdd('department_Form')">确定</el-button>
        <el-button v-else-if="department_Title==='编辑部门'" type="primary" @click="submitEdit('department_Form')">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="people_title" :visible.sync="people_DFV" center style="min-height: 200px" width="800px">
      <el-form ref="people_form" :rules="rules" :model="people_form" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="考勤编号" prop="AccountNumber">
              <el-input v-model="people_form.AccountNumber" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="Password">
              <el-input v-model="people_form.Password" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="Name">
              <el-input v-model="people_form.Name" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="Sex">
              <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" style="width: 200px" size="small">
                <el-option
                  v-for="item in SexData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="Birthday">
              <el-date-picker
                v-model="people_form.Birthday"
                value-format="yyyy-MM-dd"
                size="small"
                type="date"
                placeholder="请选择出生日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="IDcard">
              <el-input v-model="people_form.IDcard" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职时间" prop="TimeOfEntry">
              <el-date-picker
                v-model="people_form.TimeOfEntry"
                value-format="yyyy-MM-dd"
                size="small"
                type="date"
                placeholder="请选择入职时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="ContactInformation">
              <el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="Education">
              <el-select v-model="people_form.Education" clearable placeholder="请选择学历" style="width: 200px" size="small">
                <el-option
                  v-for="item in EducationDate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址" prop="Address">
              <el-input v-model="people_form.Address" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="Nation">
              <el-input v-model="people_form.Nation" size="small" style="width:200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位" prop="Post">
              <el-select v-model="people_form.Post" clearable placeholder="请选择岗位" style="width: 200px" size="small">
                <el-option
                  v-for="item in PostData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="people_title === '新增人员'" type="primary" @click="submitAddPeople">确定</el-button>
        <el-button v-else-if="people_title === '编辑人员'" type="primary" @click="submitEditPeople">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTree, tree, getTablePeople, getTablePeopleForName, addDepartmentName, delList, editList, delPeopleList, fetchEducationData, fetchPostData, addPeople, editPeople } from '@/api/BasicData/PersonnelManagement'
export default {
  data() {
    return {
      departmentData: [],
      expandAll: true,
      i: 1,
      id: '',
      PageCurrent: 1,
      PageSize: 10,
      List: [],
      total: null,
      nodeName: '',
      department_DFV: false,
      department_Form: {
        DepartmentName: ''
      },
      department_Title: '',
      Name: '',
      people_title: '',
      people_DFV: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      people_form: {
        Name: '',
        AccountNumber: '',
        Password: '',
        Sex: null,
        Birthday: '',
        IDcard: '',
        TimeOfEntry: '',
        ContactInformation: '',
        Address: null,
        Nation: '',
        ForeignLanguageLevel: null,
        Title: null,
        PositionStatus: null,
        Education: null,
        Post: null,
        PeopleID: null
      },
      rules: {
        Name: [{ required: true, message: '请输入', trigger: 'blur' }],
        AccountNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
        Password: [{ required: true, message: '请输入', trigger: 'blur' }],
        Sex: [{ required: true, message: '请输入', trigger: 'change' }],
        Birthday: [{ required: true, message: '请输入', trigger: 'change' }],
        IDcard: [{ required: true, message: '请输入', trigger: 'blur' }],
        TimeOfEntry: [{ required: true, message: '请输入', trigger: 'change' }],
        ContactInformation: [{ required: true, message: '请输入', trigger: 'blur' }],
        Address: [{ required: true, message: '请输入', trigger: 'change' }],
        Nation: [{ required: true, message: '请输入', trigger: 'change' }],
        ForeignLanguageLevel: [{ required: true, message: '请输入', trigger: 'change' }],
        Title: [{ required: true, message: '请输入', trigger: 'change' }],
        PositionStatus: [{ required: true, message: '请输入', trigger: 'change' }],
        Education: [{ required: true, message: '请输入', trigger: 'change' }],
        Post: [{ required: true, message: '请输入', trigger: 'change' }],
        DepartmentName: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      SexData: [{
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      }],
      EducationDate: [],
      PostData: [],
      multipleSelection: [],
      nodeName1: [],
      count1: 0,
      count2: 0
    }
  },
  created() {
    this.getTreeData()
    this.fetchEducationData()
    this.fetchPostData()
  },
  methods: {
    fetchEducationData() {
      this.getSelect(fetchEducationData, ['学历名称', '学历编号'], 'EducationDate')
    },
    fetchPostData() {
      this.people_form.Post = ''
      this.PostData = []
      this.getSelect(fetchPostData, ['岗位名称', '岗位编号'], 'PostData')
    },
    getTreeData() {
      getTree().then(response => {
        const data = response.data
        this.departmentData = tree(data, 0)
      })
    },
    expandALL() {
      this.expandAll = !this.expandAll
      for (let i = 0; i < this.$refs.treeForm.store._getAllNodes().length; i++) {
        this.$refs.treeForm.store._getAllNodes()[i].expanded = this.expandAll
      }
    },
    handleNodeClick() {
      this.getTable(getTablePeople, [this.id, this.PageCurrent, this.PageSize], ['List', 'total'])
    },
    handleClick(data, checked) {
      if (this.$refs.treeForm.getCheckedKeys().length !== 0 && this.$refs.treeForm.getCheckedNodes().length !== 0) {
        const data = this.$refs.treeForm.getCheckedKeys()
        if (data.length === 1) {
          this.id = data[0]
          this.handleNodeClick()
        }
        this.nodeName = this.$refs.treeForm.getCheckedNodes()[0].label
      } else {
        this.id = ''
        this.handleNodeClick()
      }
      this.i++
      if (this.i % 2 === 1) {
        if (checked) {
          this.$refs.treeForm.setCheckedNodes([data])
        } else {
          this.$refs.treeForm.setCheckedNodes([])
        }
      }
    },
    handleAdd(formName) {
      this.department_Title = '新增部门'
      this.department_DFV = true
      this.department_Form.DepartmentName = ''
      this.count1 = this.count1 + 1
      if (this.count1 !== 1) {
        this.$refs[formName].resetFields()
      }
    },
    handleEdit() {
      this.addForm('department_Form')
      if (this.id) {
        this.department_Title = '编辑部门'
        this.department_DFV = true
        this.department_Form.DepartmentName = this.nodeName
      } else {
        this.$message.warning(`请选择要修改的部门`)
      }
    },
    submitAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.department_DFV = false
          if (this.id) {
            addDepartmentName(this.id, this.department_Form.DepartmentName, 0).then(response => {
              if (response.data[0].result === '1') {
                this.getTreeData()
                this.$message.success('添加成功')
              } else {
                this.$message.error('添加失败')
              }
            })
          } else {
            addDepartmentName(0, this.department_Form.DepartmentName, 0).then(response => {
              if (response.data[0].result === '1') {
                this.getTreeData()
                this.$message.success('添加成功')
              } else {
                this.$message.error('添加失败')
              }
            })
          }
        } else {
          return false
        }
      })
    },
    submitEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.department_DFV = false
          editList(this.id, this.department_Form.DepartmentName).then(response => {
            if (response.data[0].result === '1') {
              this.getTreeData()
              this.$message.success('编辑成功')
            } else {
              this.$message.error('编辑失败')
            }
          })
        } else {
          return false
        }
      })
    },
    deleteTable() {
      if (this.id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delList(this.id).then(response => {
            if (response.data[0].result === '1') {
              this.getTreeData()
              this.i = 1
              this.id = ''
              this.$message({
                message: '已被成功删除',
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message.warning(`请选择部门`)
      }
    },
    cancel() {
      this.department_DFV = false
      this.people_DFV = false
    },
    fetchPeopleForName() {
      if (this.Name) {
        getTablePeopleForName(this.Name).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            // let Data = response.data
            if (response.data[i].入公司时间) {
              response.data[i].入公司时间 = response.data[i].入公司时间.split(' ')[0]
            }
            if (response.data[i].出生日期) {
              response.data[i].出生日期 = response.data[i].出生日期.split(' ')[0]
            }
          }
          this.List = response.data
        })
      } else {
        this.$message.warning(`请输入人员姓名`)
        this.List = []
      }
    },
    addPeople() {
      this.people_title = '新增人员'
      this.people_DFV = true
      this.addForm('people_form')
    },
    submitAddPeople() {
      this.people_DFV = false
      if (this.id) {
        addPeople(this.id, this.people_form.Sex, this.people_form.Education, this.people_form.Address, this.people_form.Nation, this.people_form.Post, this.people_form.AccountNumber, this.people_form.Password, this.people_form.Name, this.people_form.IDcard, this.people_form.TimeOfEntry, this.people_form.Birthday, this.people_form.ContactInformation).then(response => {
          if (response.data[0].result === '1') {
            this.i = 1
            this.handleNodeClick()
            this.$message.success('添加成功')
          } else {
            this.$message.error('添加失败')
          }
        })
      } else {
        this.$message.warning(`请选择部门名称`)
      }
    },
    handleEditPeople(row) {
      this.people_title = '编辑人员'
      this.people_DFV = true
      this.addForm('people_form')
      this.people_form.PeopleID = row.人员编号
      this.people_form.Sex = parseInt(row.性别编号)
      this.people_form.Education = parseInt(row.学历编号)
      this.people_form.Address = row.家庭住址
      this.people_form.Nation = row.民族
      this.people_form.Post = parseInt(row.岗位编号)
      this.people_form.AccountNumber = row.考勤编号
      this.people_form.Password = row.密码
      this.people_form.Name = row.姓名
      this.people_form.IDcard = row.身份证号
      this.people_form.TimeOfEntry = row.入公司时间
      this.people_form.Birthday = row.出生日期
      this.people_form.ContactInformation = row.联系电话
    },
    submitEditPeople() {
      this.people_DFV = false
      editPeople(this.people_form.PeopleID, this.people_form.Sex, this.people_form.Education, this.people_form.Address, this.people_form.Nation, this.people_form.Post, this.people_form.AccountNumber, this.people_form.Password, this.people_form.Name, this.people_form.IDcard, this.people_form.TimeOfEntry, this.people_form.Birthday, this.people_form.ContactInformation).then(response => {
        if (response.data[0].result === '1') {
          if (this.id !== '' && this.Name === '') {
            this.handleNodeClick()
          } else {
            this.feathPeopleForName()
          }
          this.$message.success('编辑成功')
        } else {
          this.$message.error('编辑失败')
        }
      })
    },
    deletePeopleTable(row) {
      this.deleteRow(delPeopleList, row.人员编号, function() { this.id ? this.handleNodeClick() : this.feathPeopleForName() })
    },
    postMaintain() {

    },
    handleSizeChange(val) {
      this.PageSize = val
      this.PageCurrent = 1
      getTablePeople(this.id, this.PageCurrent, this.PageSize).then(response => {
        this.List = response.data.rows
        this.total = response.data.total
      })
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      getTablePeople(this.id, this.PageCurrent, this.PageSize).then(response => {
        this.List = response.data.rows
        this.total = response.data.total
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>
