<template>
  <div class="app-container mes-admin-page">
    <el-row class="personnel-shell">
      <el-col :span="6">
        <el-card class="actionCard">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="small"
            type="distribution"
            @click="handleAdd('department_Form')"
          >{{ $t('personnelManagement.add') }}
          </el-button>
          <el-button icon="el-icon-edit" plain size="small" type="warning" @click="handleEdit()">{{ $t('personnelManagement.edit') }}</el-button>
          <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteTable()">{{ $t('personnelManagement.delete') }}</el-button>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="actionCard searchCard">
          <span>{{ $t('personnelManagement.peopleName') }}</span>
          <el-input
            v-model="Name"
            class="input-with-select"
            clearable
            :placeholder="$t('personnelManagement.peopleNamePlaceholder')"
            size="small"
            style="width: 200px; margin-right: 15px"
          >
            <el-button slot="append" icon="el-icon-search" @click="fetchPeopleForName"/>
          </el-input>
          <el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addPeople()">{{ $t('personnelManagement.add') }}
          </el-button>
          <el-button icon="el-icon-circle-close-outline" plain size="small" type="danger" @click="Quit()">{{ $t('personnelManagement.resign') }}
          </el-button>
          <el-button plain size="small" style="float: right" type="text" @click="searchLeavingList">{{ $t('personnelManagement.resignedList') }}</el-button>
          <el-button
            v-popover:popover4
            :disabled="disabledMove"
            icon="el-icon-sort"
            plain
            size="small"
            type="success"
            @click="moveGroup"
          >{{ $t('personnelManagement.move') }}
          </el-button>
          <!--<el-button size="small" @click="postMaintain()">岗位维护</el-button>-->
          <el-popover
            ref="popover4"
            height="400"
            placement="bottom"
            trigger="click"
            width="178"
            @hide="hide()"
          >
            <el-dropdown placement="right-start" size="small" style="margin-right: 0">
              <el-input
                v-model="nodeName1"
                :disabled="true"
                :placeholder="$t('personnelManagement.selectDepartmentPlaceholder')"
                size="small"
              />
              <el-button size="small" style="margin-left: 50px; margin-top: 15px" type="text" @click="moveGroupConfim">
                {{ $t('common.confirm') }}
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-tree
                  ref="treeForm"
                  :data="departmentData"
                  :props="defaultProps"
                  accordion
                  node-key="id"
                  style="width: 200px;margin: 10px"
                  @node-click="NodeClick"
                />
              </el-dropdown-menu>
            </el-dropdown>
          </el-popover>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="personnel-shell contentRow">
      <el-col :span="6">
        <el-card class="box-card departmentCard" style="min-height: 600px; max-height: 700px">
          <div slot="header" style="display: flex; align-items: center;justify-content: space-between;width: 100%;padding: 0 10px;">
            <span>{{ $t('personnelManagement.departmentMaintenance') }}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="expandALL()">{{ $t('personnelManagement.expand') }}</el-button>
          </div>
          <div style="height: 600px">
            <el-tree
              ref="treeForm"
              :data="departmentData"
              :props="defaultProps"
              check-strictly
              default-expand-all
              node-key="id"
              show-checkbox
              @check-change="handleClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="tableCard">
          <el-table
            ref="multipleTable"
            :data="List"
            border
            height="590"
            size="mini"
            style="width: 100%"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              align="center"
              type="selection"
              width="50"
            />
            <el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
            <!--<el-table-column align="center" label="照片" width="200">-->
            <!--  <template slot-scope="scope">-->
            <!--    <el-popover-->
            <!--      v-if="scope.row.文件名称 && scope.row.文件名称 !== 'null'"-->
            <!--      placement="top-start"-->
            <!--      trigger="hover"-->
            <!--      width="200">-->
            <!--      <el-button style="float:right" type="text" @click="deletePhoto(scope.row)">删除</el-button>-->
            <!--      <el-image :src="getPersonnelImage(scope.row)">-->
            <!--        <div slot="error" class="image-slot">-->
            <!--          <i class="el-icon-picture-outline"/>-->
            <!--        </div>-->
            <!--      </el-image>-->
            <!--      <el-image slot="reference" :src="getPersonnelImage(scope.row)" style="width:100px;">-->
            <!--        <div slot="error" class="image-slot">-->
            <!--          <i class="el-icon-picture-outline"/>-->
            <!--        </div>-->
            <!--      </el-image>-->
            <!--    </el-popover>-->
            <!--    <span v-else>-->
            <!--      <el-button-->
            <!--        icon="el-icon-circle-plus-outline"-->
            <!--        size="small"-->
            <!--        type="distribution"-->
            <!--        @click="handlePicture(scope.row)">上传</el-button>-->
            <!--    </span>-->
            <!--  </template>-->
            <!--</el-table-column>-->
            <el-table-column align="center" :label="$t('personnelManagement.departmentName')" width="150">
              <template slot-scope="scope">
                {{ scope.row.节点名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('personnelManagement.attendanceNo')" width="150">
              <template slot-scope="scope">
                {{ scope.row.考勤编号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('personnelManagement.password')" width="150">
              <template slot-scope="scope">
                {{ scope.row.密码 }}
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('personnelManagement.employeeName')" width="120">
              <template slot-scope="scope">
                {{ scope.row.姓名 }}
              </template>
            </el-table-column>
            <!--<el-table-column align="center" label="职称名称" width="100">-->
            <!--  <template slot-scope="scope">-->
            <!--    {{ scope.row.职称名称2 }}-->
            <!--  </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.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间-->
            <!--                }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column align="center" label="出生日期" width="100">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{-->
            <!--                  scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : 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="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="200">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{ scope.row.家庭住址 }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column align="center" :label="$t('personnelManagement.operation')" width="150">
              <template slot-scope="scope">
                <!--                <el-button-->
                <!--                  :disabled="scope.row.文件标识 && scope.row.文件标识 !== 'null'"-->
                <!--                  size="mini"-->
                <!--                  type="primary"-->
                <!--                  icon="el-icon-picture"-->
                <!--                  @click="handlePicture(scope.row)">上传图片</el-button>-->
                <el-button
                  icon="el-icon-edit"
                  size="mini"
                  type="primary"
                  @click="handleEditPeople(scope.row)"
                >{{ $t('personnelManagement.edit') }}
                </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">
            <el-pagination
              :current-page="PageCurrent"
              :page-size="PageSize"
              :page-sizes="[10, 20, 30, 40, 50]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--新增和编辑部门-->
    <el-dialog
      v-el-drag-dialog
      :title="departmentDialogTitle"
      :visible.sync="department_DFV"
      center
      style="min-height: 200px"
      width="400px"
    >
      <el-form
        ref="department_Form"
        :model="department_Form"
        :rules="rules"
        class="demo-ruleForm"
        label-position="left"
        label-width="110px"
      >
        <el-form-item :label="$t('personnelManagement.departmentName')" 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">{{ $t('common.cancel') }}</el-button>
        <el-button
          v-if="department_Title==='add'"
          :disabled="handleAdd_disable"
          type="primary"
          @click="submitAdd('department_Form')"
        >{{ $t('common.confirm') }}
        </el-button>
        <el-button
          v-else-if="department_Title==='edit'"
          :disabled="handleAdd_disable"
          type="primary"
          @click="submitEdit('department_Form')"
        >{{ $t('common.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-el-drag-dialog
      :title="peopleDialogTitle"
      :visible.sync="people_DFV"
      center
      style="min-height: 200px"
      width="400px"
    >
      <el-form
        ref="people_form"
        :model="people_form"
        :rules="rules"
        class="demo-ruleForm"
        label-position="left"
        label-width="110px"
      >
        <el-row>
          <el-form-item :label="$t('personnelManagement.employeeName')" prop="Name">
            <el-input v-model="people_form.Name" size="small" style="width:200px"/>
          </el-form-item>
          <el-form-item :label="$t('personnelManagement.jobNo')" prop="AccountNumber">
            <el-input v-model="people_form.AccountNumber" size="small" style="width:200px"/>
          </el-form-item>
          <el-form-item :label="$t('personnelManagement.password')" prop="Password">
            <el-input v-model="people_form.Password" size="small" style="width:200px"/>
          </el-form-item>

          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="性别" prop="Sex">-->
          <!--              <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" size="small" style="width: 200px">-->
          <!--                <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"-->
          <!--                placeholder="请选择出生日期"-->
          <!--                size="small"-->
          <!--                style="width: 200px"-->
          <!--                type="date"-->
          <!--                value-format="yyyy-MM-dd"/>-->
          <!--            </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"-->
          <!--                placeholder="请选择入职时间"-->
          <!--                size="small"-->
          <!--                style="width: 200px"-->
          <!--                type="date"-->
          <!--                value-format="yyyy-MM-dd"/>-->
          <!--            </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="请选择学历"-->
          <!--                size="small"-->
          <!--                style="width: 200px">-->
          <!--                <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.TeamValue"-->
          <!--      clearable-->
          <!--      placeholder="请选择职称"-->
          <!--      size="small"-->
          <!--      style="width: 200px">-->
          <!--      <el-option-->
          <!--        v-for="item in JobTitleList"-->
          <!--        :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="Post">-->
          <!--    <el-select v-model="people_form.TeamValue" clearable placeholder="请选择班组" style="width: 200px" size="small">-->
          <!--      <el-option-->
          <!--        v-for="item in Team"-->
          <!--        :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 :loading="btnLoading" @click="cancel">{{ $t('common.cancel') }}</el-button>
        <el-button
          v-if="people_title === 'add'"
          :disabled="addPeople_disable"
          :loading="btnLoading"
          type="primary"
          @click="submitAddPeople"
        >{{ $t('common.confirm') }}
        </el-button>
        <el-button
          v-else-if="people_title === 'edit'"
          :disabled="addPeople_disable"
          :loading="btnLoading"
          type="primary"
          @click="submitEditPeople"
        >{{ $t('common.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <!--离职名单-->
    <el-dialog
      v-el-drag-dialog
      :visible.sync="LeavingListVisiable"
      center
      style="height: 800px"
      :title="$t('personnelManagement.resignedList')"
      width="40%"
    >
      <el-table
        :data="LeavingList"
        border
        height="420"
        highlight-current-row
        size="mini"
        stripe
        style="width: 100%"
        tooltip-effect="dark"
      >
        <el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
        <el-table-column align="center" :label="$t('personnelManagement.departmentName')" width="100">
          <template slot-scope="scope">
            {{ scope.row.节点名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('personnelManagement.jobNo')" width="100">
          <template slot-scope="scope">
            {{ scope.row.考勤编号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('personnelManagement.password')" width="100">
          <template slot-scope="scope">
            {{ scope.row.密码 }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('personnelManagement.employeeName')" >
          <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.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间-->
        <!--            }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column align="center" label="出生日期" width="100">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{-->
        <!--              scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : 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="家庭住址">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.家庭住址 }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" :label="$t('personnelManagement.operation')" width="100">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="text"
              @click="deletePeople(scope.row)"
              style="color: red"
            >{{ $t('personnelManagement.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="PageCurrentN"
          :page-size="PageSizeN"
          :page-sizes="[10, 20, 30, 40]"
          :total="totalN"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChangeN"
          @current-change="handleCurrentChangeN"
        />
      </div>
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogFormVisible"
      center
      style="height: 800px"
      :title="$t('personnelManagement.uploadPicture')"
      width="300px"
    >
      <el-upload
        id="invoiceScan"
        ref="upload"
        :action="upload"
        :auto-upload="false"
        :before-upload="beforeUpload"
        :data="Data"
        :limit="limit"
        :multiple="true"
        :on-change="handelLimit"
        :on-exceed="warningExceed"
        :on-preview="handlePictureCardPreview"
        :on-remove="handelLimitStyle"
        :on-success="uploadSuccess"
        list-type="picture-card"
        style="margin-left: 60px"
      >
        <i class="el-icon-plus"/>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">{{ $t('common.cancel') }}</el-button>
        <el-button style="width: 70px" type="primary" @click="submitPerson()">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addDepartmentName,
  addPeople,
  delList,
  editList,
  editPeople,
  fetchEducationData,
  fetchPostData,
  fetchteamviwer,
  getTablePeopleForName,
  getTree,
  moveGroups,
  quit,
  searchLeavingList,
  tree
} from '@/api/BasicData/PersonnelManagement'
import request, { readFile, url } from '@/utils/request'
// import { base64ImgtoFile } from '../../../utils/tool'

export default {
  name: 'PersonnelManagement',
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!isvalidUsername(value)) {
    //     callback(new Error('请输入4-5位工号'))
    //   } else {
    //     callback()
    //   }
    // }
    // const checkIDCard = (rule, value, callback) => {
    //   const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
    //   // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    //   if (value) {
    //     if (IDCardReg.test(value)) {
    //       callback()
    //     } else {
    //       callback(new Error('身份证号格式不正确'))
    //     }
    //   } else {
    //     callback(new Error('请输入身份证号'))
    //   }
    // }
    return {
      Team: [],
      JobTitleList: [],
      handleAdd_disable: false,
      addPeople_disable: false,
      limit: 1,
      readFile: readFile,
      disabledMove: true,
      dialogImageUrl: '',
      dialogVisiblePictureCard: false,
      PageCurrentN: 1,
      PageSizeN: 10,
      totalN: null,
      LeavingList: [],
      LeavingListVisiable: false,
      departmentData: [],
      expandAll: true,
      i: 1,
      id: '',
      PageCurrent: 1,
      PageSize: 50,
      List: [],
      total: null,
      nodeName: '',
      btnLoading: false,
      department_DFV: false,
      upload: url,
      dialogFormVisible: false,
      PersonId: '',
      department_Form: {
        DepartmentName: ''
      },
      Data: {},
      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,
        TeamValue: ''
      },
      SexData: [{
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      }],
      EducationDate: [],
      PostData: [],
      multipleSelection: [],
      nodeName1: '',
      count1: 0,
      count2: 0,
      isShowPersonnelUpLoad: false
    }
  },
  computed: {
    departmentDialogTitle() {
      return this.department_Title === 'edit'
        ? this.$t('personnelManagement.editDepartment')
        : this.$t('personnelManagement.addDepartment')
    },
    peopleDialogTitle() {
      return this.people_title === 'edit'
        ? this.$t('personnelManagement.editEmployeeTitle')
        : this.$t('personnelManagement.addEmployee')
    },
    rules() {
      return {
        Name: [{ required: true, message: this.$t('personnelManagement.requiredInput'), trigger: 'blur' }],
        AccountNumber: [{ required: true, message: this.$t('personnelManagement.requiredInput'), trigger: 'blur' }],
        // AccountNumber: [{ required: true, trigger: 'blur', validator: validateUsername }],
        Password: [{ required: true, message: this.$t('personnelManagement.requiredInput'), trigger: 'blur' }]
        // Sex: [{ required: true, message: '请输入', trigger: 'change' }],
        // Birthday: [{ required: true, message: '请输入', trigger: 'change' }],
        // IDcard: [{ required: true, message: '请输入', trigger: 'blur' }, {
        //   validator: checkIDCard,
        //   trigger: 'blur'
        // }],
        // TimeOfEntry: [{ required: true, message: '请输入', trigger: 'change' }],
        // ContactInformation: [{ required: true, message: '请输入', trigger: 'blur' }, { type: 'number',
        //   message: '手机号格式不正确',
        //   trigger: 'blur',
        //   transform(value) {
        //     var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
        //     if (!phonereg.test(value)) {
        //       return false
        //     } else {
        //       return Number(value)
        //     }
        //   }
        // }],
        // 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' }],
        // DepartmentName: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getTreeData()
    this.fetchEducationData()
    this.fetchPostData()
    this.fetchTeamViwer()
    // this.getJobTitleList()
  },
  methods: {
    // 获取班组信息
    fetchTeamViwer() {
      fetchteamviwer().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Team.push({
            label: response.data[i].班组名称,
            value: response.data[i].班组流水号
          })
        }
      })
    },
    // 获取班组信息
    getJobTitleList() {
      this.JobTitleList = []
      var param = []
      var Data = this.CreateData('11', '人事档案管理_基础表_职称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.JobTitleList.push({
            label: response.data[i].职称名称,
            value: response.data[i].职称编号
          })
        }
      })
    },
    // 删除离职人员信息
    deletePeople(row) {
      this.$confirm(this.$t('personnelManagement.confirmDeleteResignedEmployee'), this.$t('personnelManagement.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['考勤编号', row.考勤编号]
        var Data = this.CreateData('12', '人事档案管理_离职人员_删除数据', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success(this.$t('personnelManagement.deleteSuccess'))
            this.searchLeavingList()
          } else {
            this.$message.error(this.$t('personnelManagement.deleteFailed'))
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('personnelManagement.deleteCanceled')
        })
      })
    },
    // 删除人员照片
    deletePhoto(row) {
      this.$confirm(this.$t('personnelManagement.confirmDeleteImage'), this.$t('personnelManagement.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        request({
          url: '',
          method: 'post',
          data: {
            type: '4',
            name: `delete from 人员管理_图片 where 人员编号 = ${row.人员编号}`
          }
        }).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success(this.$t('personnelManagement.deleteSuccess'))
            this.handleNodeClick()
          } else {
            this.$message.error(this.$t('personnelManagement.deleteFailed'))
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('personnelManagement.cancelDelete')
        })
      })
    },
    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.getTableData()
      // this.getTable(getTablePeople, [this.id, this.PageCurrent, this.PageSize], ['List', 'total'])
    },
    getTableData() {
      var param = []
      param[0] = ['考核部门编号', this.id]
      param[1] = ['PageCurrent', this.PageCurrent]
      param[2] = ['PageSize', this.PageSize]
      param[3] = ['PageCount', '1111', 'int', '1']
      param[4] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '人事档案管理_人员_部门与人员_查询数据_根据部门编号_New', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.result.length !== 0) {
          this.List = response.data.result
          this.tableData = response.data.result
        } else {
          this.List = []
          this.tableData = []
        }
        this.total = parseInt(response.data.output[0].ItemCount)
      })
    },
    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([])
        }
      }
    },
    uploadSuccess(res) { // 上传成功回调
      this.$message.success(this.$t('personnelManagement.uploadSuccess'))
      this.getTableData()
      this.dialogFormVisible = false
      this.$refs.upload.clearFiles()
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    beforeUpload(file) { // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message.error(this.$t('personnelManagement.imageOnly'))
      }
      return isJPG
    },
    warningExceed() {
      this.$message.error(this.$t('personnelManagement.uploadLimitOne'))
    },
    handlePicture(row) {
      this.dialogFormVisible = true
      this.PersonId = row.人员编号
      console.log(row, this.PersonId)
    },
    submitPerson() {
      var param1 = []
      param1[0] = ['人员编号', this.PersonId]
      param1[1] = ['文件名称', '']
      param1[2] = ['文件后缀', '']
      param1[3] = ['文件内容', null]
      // console.log(param1)
      var Data1 = this.CreateData('15', '人员管理_图片_保存图片', param1)
      this.Data.param = Data1
      this.$refs.upload.submit()
      this.dialogFormVisible = false

      // setTimeout(() => {
      //   this.$message.success("上传成功！")
      //   this.getTableData()
      // },1000)
    },
    handleAdd(formName) {
      this.department_Form.DepartmentName = ''
      this.count1 = this.count1 + 1
      if (this.count1 !== 1) {
        this.$refs[formName].resetFields()
      }
      this.department_Title = 'add'
      this.handleAdd_disable = false
      this.department_DFV = true
    },
    addTo() {
      this.isShowPersonnelUpLoad = true
    },
    handleEdit() {
      this.addForm('department_Form')
      if (this.id) {
        this.department_Title = 'edit'
        this.department_Form.DepartmentName = this.nodeName
        this.handleAdd_disable = false
        this.department_DFV = true
      } else {
        this.$message.warning(this.$t('personnelManagement.selectDepartmentToEdit'))
      }
    },
    submitAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAdd_disable = true
          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(this.$t('personnelManagement.addSuccess'))
                this.i = 0
              } else {
                this.$message.error(this.$t('personnelManagement.addFailed'))
              }
            })
          } else {
            addDepartmentName(0, this.department_Form.DepartmentName, 0).then(response => {
              if (response.data[0].result === '1') {
                this.getTreeData()
                this.$message.success(this.$t('personnelManagement.addSuccess'))
                this.i = 1
              } else {
                this.$message.error(this.$t('personnelManagement.addFailed'))
              }
            })
          }
        } else {
          return false
        }
      })
    },
    submitEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAdd_disable = true
          this.department_DFV = false
          editList(this.id, this.department_Form.DepartmentName).then(response => {
            if (response.data[0].result === '1') {
              this.getTreeData()
              this.$message.success(this.$t('personnelManagement.editSuccess'))
            } else {
              this.$message.error(this.$t('personnelManagement.editFailed'))
            }
          })
        } else {
          return false
        }
      })
    },
    deleteTable() {
      if (this.id) {
        this.$confirm(this.$t('personnelManagement.confirmDeleteDepartment'), this.$t('personnelManagement.prompt'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          delList(this.id).then(response => {
            if (response.data[0].result === '1') {
              this.getTreeData()
              this.i = 1
              this.id = ''
              this.$message({
                message: this.$t('personnelManagement.deleteCompleted'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('personnelManagement.deleteCanceled')
          })
        })
      } else {
        this.$message.warning(this.$t('personnelManagement.selectDepartment'))
      }
    },
    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.$t('personnelManagement.enterPeopleName'))
        this.List = []
      }
    },
    addPeople() {
      if (this.id) {
        this.people_title = 'add'
        this.addPeople_disable = false
        this.people_DFV = true
        this.addForm('people_form')
      } else {
        this.$message.warning(this.$t('personnelManagement.selectDepartmentName'))
      }
    },
    submitAddPeople() {
      this.addPeople_disable = true
      this.btnLoading = true
      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, this.people_form.TeamValue).then(response => {
        this.btnLoading = false
        if (response.data[0].result === '1') {
          this.people_DFV = false
          this.i = 0
          this.handleNodeClick()
          this.$message.success(this.$t('personnelManagement.addSuccess'))
        } else {
          this.$message.error(this.$t('personnelManagement.addFailed'))
          this.addPeople_disable = false
        }
      })
    },
    handleEditPeople(row) {
      console.log(row, 'roworowowow')
      this.people_title = 'edit'
      this.people_DFV = true
      this.addPeople_disable = false
      this.addForm('people_form')
      this.people_form.PeopleID = row.人员编号
      this.people_form.Sex = row.性别编号 ? parseInt(row.性别编号) : ''
      this.people_form.Education = row.性别编号 ? parseInt(row.学历编号) : ''
      this.people_form.Address = row.家庭住址
      this.people_form.Nation = row.民族
      if (row.岗位编号) {
        this.people_form.Post = row.性别编号 ? parseInt(row.岗位编号) : ''
      } else {
        this.people_form.Post = ''
      }
      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.联系电话
      this.people_form.TeamValue = row.性别编号 ? parseInt(row.职称编号) : ''
      // if (row.班组流水号) {
      //   this.people_form.TeamValue = parseInt(row.班组流水号)
      // } else {
      //   this.people_form.TeamValue = ''
      // }
    },
    submitEditPeople() {
      this.addPeople_disable = true
      this.btnLoading = true
      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, this.people_form.TeamValue).then(response => {
        this.btnLoading = false
        if (response.data[0].result === '1') {
          if (this.id !== '' && this.Name === '') {
            this.handleNodeClick()
          } else {
            this.feathPeopleForName()
          }
          this.$message.success(this.$t('personnelManagement.editSuccess'))
          this.people_DFV = false
        } else {
          this.$message.error(this.$t('personnelManagement.editFailed'))
          this.addPeople_disable = false
        }
      })
    },
    handleSizeChange(val) {
      this.PageSize = val
      this.PageCurrent = 1
      this.getTableData()
      // getTablePeople(this.id, this.PageCurrent, this.PageSize).then(response => {
      //   this.List = response.data.rows
      //   this.total = response.data.total
      // })
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.getTableData()
      // getTablePeople(this.id, this.PageCurrent, this.PageSize).then(response => {
      //   this.List = response.data.rows
      //   this.total = response.data.total
      // })
    },
    handleSizeChangeN(val) {
      this.PageSizeN = val
      this.PageCurrentN = 1
      this.getTable(searchLeavingList, [this.PageCurrentN, this.PageSizeN], ['LeavingList', 'totalN'])
    },
    handleCurrentChangeN(val) {
      this.PageCurrentN = val
      this.getTable(searchLeavingList, [this.PageCurrentN, this.PageSizeN], ['LeavingList', 'totalN'])
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.multipleSelection.length === 0 ? this.disabledMove = true : this.disabledMove = false
    },
    Quit() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t('personnelManagement.selectEmployeesForResign'))
      } else {
        this.$confirm(this.$t('personnelManagement.confirmResign'), this.$t('personnelManagement.prompt'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            quit(this.multipleSelection[i].人员编号).then(response => {
              if (response.data[0].result === '1') {
                this.$message.success(this.$t('personnelManagement.resignSuccess'))
                this.getTableData()
                // getTablePeople(this.id, this.PageCurrent, this.PageSize).then(response => {
                //   this.List = response.data.rows
                //   this.total = response.data.total
                // })
              } else {
                this.$message.error(this.$t('personnelManagement.resignFailed'))
              }
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('personnelManagement.resignCanceled')
          })
        })
      }
    },
    searchLeavingList() {
      this.LeavingListVisiable = true
      this.getTable(searchLeavingList, [this.PageCurrentN, this.PageSizeN], ['LeavingList', 'totalN'])
    },
    moveGroupConfim() {
      this.id = this.node
      for (let i = 0; i < this.multipleSelection.length; i++) {
        moveGroups(this.multipleSelection[i].人员编号, this.node).then(response => {
          if (response.data[0].result === '1') {
            this.handleNodeClick()
            if (i === this.multipleSelection.length - 1) {
              this.$message.success(this.$t('personnelManagement.moveGroupSuccess'))
            }
          } else {
            this.$message.error(this.$t('personnelManagement.updateFailed'))
          }
        })
      }
    },
    hide() {
      this.nodeName1 = ''
      this.node = ''
    },
    moveGroup() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t('personnelManagement.selectAtLeastOnePerson'))
      }
    },
    NodeClick(data) {
      this.node = data.id
      this.nodeName1 = data.label
    },
    handelLimitStyle() {
      console.log(12345678)
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    handelLimit() {
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === '') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'none'
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisiblePictureCard = true
    },
    getPersonnelImage(row) {
      console.log(row)
      // const url = 'data:image/png;base64,' + row.人员图片
      // const picFile = base64ImgtoFile(url)
      // const imgUrl = window.webkitURL.createObjectURL(picFile) || window.URL.createObjectURL(picFile)
      // this.urls.push({
      //   url: imgUrl,
      //   id: response.data[i].id
      // })
      return ''
    }
  }
}
</script>

<style scoped>
.personnel-shell {
  margin-bottom: 0;
}

.actionCard,
.departmentCard,
.tableCard {
  border-radius: 14px;
}

.searchCard {
  min-height: 64px;
}

.contentRow ::v-deep .el-card__body {
  padding: 14px !important;
}

.departmentCard {
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%);
}

.tableCard {
  min-height: 650px;
}

::v-deep .departmentCard .el-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .departmentCard .el-tree {
  padding: 4px 2px;
  background: transparent;
}

::v-deep .departmentCard .el-tree-node__content,
::v-deep .departmentCard .el-tree-node__label {
  font-size: 13px;
}

::v-deep .tableCard .el-table {
  margin-top: 0;
}
</style>
