<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container" v-loading="loading">
			<el-form ref="queryForm" :model="listQuery" label-width="100px">
				<el-row>
					<el-col :span="4">
						<el-form-item label="姓名">
							<el-input v-model="listQuery.name" placeholder="请输入姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="手机号">
							<el-input v-model="listQuery.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<!-- <el-form-item label="分公司">
							<el-autocomplete
								class="inline-input"
								v-model="listQuery.companyName"
								:fetch-suggestions="querySearch"
								placeholder="请选择分公司"
								@select="handleSelectPark"
							></el-autocomplete>
						</el-form-item>-->

						<el-form-item label="分公司">
							<el-select
								v-model="listQuery.companyId"
								clearable
								filterable
								placeholder="请选择"
								@change="handleSelectPark"
							>
								<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="身份">
							<el-select
								class="filter-item"
								v-model="listQuery.positionId"
								filterable
								placeholder="请选员工身份"
							>
								<el-option :key="undefined" label="全部" :value="undefined"></el-option>
								<el-option
									v-for="(item,index) in statusList"
									:key="index"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" type="primary" v-waves icon="delete" @click="cleaningQuery">清除搜索条件</el-button>

			<el-button class="filter-item" type="primary" v-waves @click="addStaff">新增员工</el-button>
			<el-button class="filter-item" type="primary" v-waves @click="toLoad">批量导入员工</el-button>

			<el-table
				:key="tableKey"
				:data="list"
				v-loading="listLoading"
				border
				fit
				highlight-current-row
				style="width: 100%"
			>
				<el-table-column label="序号" align="center" width="70">
					<template slot-scope="scope">
						<span>{{scope.$index+(listQuery.page - 1) * listQuery.limit + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
				<el-table-column prop="phone" label="手机号" align="center"></el-table-column>
				<el-table-column prop="companyName" label="所属公司" align="center"></el-table-column>
				<el-table-column prop="jobName" label="职位" align="center"></el-table-column>
				<el-table-column prop="positionName" label="身份" align="center"></el-table-column>
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.isQuit == 1" style="color:#20a0ff">离职</span>
						<span v-else style="color:red">在职</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" fixed="right">
					<template slot-scope="scope">
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="infoStaff(scope.row)"
						>详情</el-button>
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="editorStaff(scope.row)"
						>编辑</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="listQuery.page"
				:page-sizes="[10,20,30, 50]"
				:page-size="listQuery.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				style="margin-top:20px"
			></el-pagination>

			<!-- 新增编辑员工 -->
			<el-dialog :title="staffTitle" :visible.sync="bulkUploadMember" class="member" @close="closeAdd">
				<el-form :model="staffTitleFrom" ref="userMembership" :rules="rules" label-width="100px">
					<el-form-item label="员工姓名">
						<el-input v-model="staffTitleFrom.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="staffTitleFrom.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="入职日期" v-show="staffTitle == '新增员工'">
						<el-date-picker
							v-model="staffTitleFrom.relTime"
							type="date"
							placeholder="选择日期"
							style="width:100%"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="所属公司">
						<el-autocomplete
							class="inline-input"
							v-model="staffTitleFrom.companyName"
							:fetch-suggestions="querySearch"
							placeholder="请选择分公司"
							:disabled="whether == 1 ? false:true"
							:style="{width:whether==1?'100%':'90%'}"
							@select="handleSelectParks"
						></el-autocomplete>
						<el-button type="text" v-show="whether == 2" @click="amend(4)">修改</el-button>
					</el-form-item>
					<el-form-item label="身份">
						<el-select
							class="filter-item"
							v-model="staffTitleFrom.positionId"
							placeholder="请选择身份"
							filterable
							:disabled="whether == 1 ? false:true"
							:style="{width:whether==1?'100%':'90%'}"
						>
							<el-option :key="undefined" label="全部" :value="undefined"></el-option>
							<el-option
								v-for="(item,index) in postionsList "
								:key="index"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
						<el-button type="text" v-show="whether == 2" @click="amend(3)">修改</el-button>
					</el-form-item>
					<el-form-item label="状态" v-show="whether == 2">
						<el-input v-model="staffTitleFrom.isQuit" disabled style="width:90%"></el-input>
						<el-button type="text" @click="amend(5)">修改</el-button>
					</el-form-item>
					<el-form-item label="职位">
						<el-select
							class="filter-item"
							v-model="staffTitleFrom.jobId"
							placeholder="请选择职位"
							:disabled="whether == 1 ? false:true"
							:style="{width:whether==1?'100%':'90%'}"
						>
							<el-option :key="undefined" label="全部" :value="undefined"></el-option>
							<el-option
								v-for="(item,index) in jobsList "
								:key="index"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
						<el-button type="text" v-show="whether == 2" @click="amend(2)">修改</el-button>
					</el-form-item>

					<div style="text-align:center">
						<el-button type="primary" @click="confirm">确 定</el-button>
						<el-button type="primary" @click="bulkUploadMember = false">取消</el-button>
					</div>
				</el-form>
			</el-dialog>

			<!--批量导入会员窗口-->
			<el-dialog title="导入员工" :visible.sync="tolead">
				<el-form :model="fileForm">
					<el-form-item label="上传文件" label-width="80px">
						<el-button type="primary" icon="el-icon-download">
							<a class="el-icon-download" href="https://mgmt.dfangche.com/axshare/userposition.xlsx">下载模板</a>
						</el-button>

						<el-upload
							ref="uploadExcel"
							:limit="limitNum"
							action="1111"
							:headers="getHeaderWithToken"
							accept=".xlsx"
							:http-request="upLoad"
							:on-remove="handleRemove"
							:before-remove="beforeRemove"
							:before-upload="beforeUploadFile"
							:on-change="fileChange"
							:on-exceed="exceedFile"
							:file-list="fileList"
						>
							<el-button size="small" type="primary" icon="el-icon-edit">
								上传文件
								<i class="el-icon-upload el-icon--right"></i>
							</el-button>
							<div slot="tip" class="el-upload__tip">只能上传xlsx(Excel2007以上版本)文件，且不超过10M</div>
						</el-upload>
						<el-button size="small" class="filter-item" type="primary" @click="cancelNotDeleteForm">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>

			<!-- 员工详情 S -->
			<el-dialog title="员工信息详情" :visible.sync="infoPop" class="member">
				<p class="title">基础信息</p>
				<p class="staff-info">
					<span>
						<b>姓名：</b>
						{{staffInfo.info.name}}
					</span>
					<span>
						<b>手机号：</b>
						{{staffInfo.info.phone}}
					</span>
					<span>
						<b>状态：</b>
						{{staffInfo.info.isQuit == 1?"离职":'在职'}}
					</span>
					<span>
						<b>当前所属分公司：</b>
						{{staffInfo.info.companyName}}
					</span>
					<span>
						<b>身份：</b>
						{{staffInfo.info.positionName}}
					</span>
					<span>
						<b>职位：</b>
						{{staffInfo.info.jobName}}
					</span>
				</p>
				<p class="title" style="margin-top:20px">人事变动记录</p>

				<p v-for="(item,index) in staffInfo.record" :key="index">
					<b v-show="!!item.jobRemark">{{item.relTime}}</b>
					<span v-if="item.jobRemark == 1" v-show="!!item.relTime">入职</span>
					<span v-else-if="item.jobRemark == 4">(人事调动) {{item.oldCompanyName}} => {{item.newCompanyName}}</span>
					<span v-else-if="item.jobRemark == 2">(职位变更) {{item.oldJobName}} => {{item.newJobName}}</span>
					<span
						v-else-if="item.jobRemark == 3"
					>(身份变更) {{item.oldPositionName}} => {{item.newPositionName}}</span>
					<span v-else-if="item.jobRemark == 5">离职</span>
					<span v-else-if="item.jobRemark == 6">复职</span>
					<!-- <span v-else></span> -->
				</p>
			</el-dialog>
			<!-- 员工详情 E -->

			<!-- 修改 S -->
			<el-dialog :title="amendContent" :visible.sync="amendPop" class="member" @click="closeAmend">
				<!-- 修改分公司 -->
				<div v-if="isShow == 4">
					<el-form :model="amendCompany" ref="amendCompany" label-width="80px">
						<el-form-item label="修改原因" style="width:80%">
							<el-radio-group v-model="amendStatus" prop="changeStatus">
								<el-radio-button label="0">人事调动</el-radio-button>
								<el-radio-button label="1">信息修改</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="调动日期" v-show="amendStatus == 0" prop="relTime">
							<el-date-picker v-model="amendCompany.relTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
						</el-form-item>
						<el-form-item label="分公司" prop="companyId">
							<el-select v-model="amendCompany.companyId" clearable filterable placeholder="请选择">
								<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-button type="primary" @click="compantBtn">确定</el-button>
						<el-button type="primary" @click="amendPop = false">取消</el-button>
					</el-form>
				</div>
				<div v-else-if="isShow == 3">
					<el-form :model="amendIdentity" label-width="80px">
						<el-form-item label="身份">
							<el-select
								class="filter-item"
								v-model="amendIdentity.positionId"
								filterable
								placeholder="请选择身份"
								style="width:250px"
							>
								<el-option :key="undefined" label="全部" :value="undefined"></el-option>
								<el-option
									v-for="(item,index) in postionsList "
									:key="index"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="变更日期">
							<el-date-picker
								v-model="amendIdentity.relTime"
								type="datetime"
								placeholder="选择日期时间"
								style="width:250px"
							></el-date-picker>
						</el-form-item>
						<el-button type="primary" @click="amendIdentityBtn">确定</el-button>
						<el-button type="primary" @click="amendPop = false">取消</el-button>
					</el-form>
				</div>
				<div v-else-if="isShow == 5">
					<el-form :model="isJobForm" label-width="80px">
						<el-form-item :label="amendContent">
							<el-date-picker
								v-model="isJobForm.relTime"
								type="datetime"
								placeholder="选择日期时间"
								style="width:250px"
							></el-date-picker>
						</el-form-item>
						<el-button type="primary" @click="isJobBtn(amendContent)">确定</el-button>
						<el-button type="primary" @click="amendPop = false">取消</el-button>
					</el-form>
				</div>
				<div v-else-if="isShow == 2">
					<el-form :model="position" label-width="80px">
						<el-form-item label="职位">
							<el-select class="filter-item" v-model="position.jobId" placeholder="请选择职位">
								<el-option :key="undefined" label="全部" :value="undefined"></el-option>
								<el-option
									v-for="(item,index) in jobsList "
									:key="index"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="变更日期">
							<el-date-picker
								v-model="position.relTime"
								type="datetime"
								placeholder="选择日期时间"
								style="width:250px"
							></el-date-picker>
						</el-form-item>
						<el-button type="primary" @click="positionBtn()">确定</el-button>
						<el-button type="primary" @click="amendPop = false">取消</el-button>
					</el-form>
				</div>
			</el-dialog>
			<!-- 修改 E -->

			<!-- 提示 -->
			<el-dialog title="上传提示" :visible.sync="uploadHiut">
				<p>
					上传成功:
					<b>{{uploadListHiut.success}}</b>条,上传失败:
					<b>{{uploadListHiut.error}}</b>条
				</p>
				<ul class="defeated">
					<li v-for="(item,index) in uploadListHiut.uploadList" :key="index">
						<p>
							失败行数:
							<span>{{item.num}}</span>,失败原因:
							<span>{{item.msg}}</span>
						</p>
					</li>
				</ul>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import {
	staffList,
	postions,
	addEditor,
	deleteStaffs,
	jobs,
	editorUpd,
	findPositionChangeRecord,
	updUserChange,
	updAddPositionChangeRecord
} from 'src/api/admin/userManagement/index'
import { getToken } from 'src/utils/auth'
import { mapGetters } from 'vuex'
import { staffImport } from 'src/api/admin/UserMember/index'
import { getAll } from 'api/base_info/branch_company'
import { getrewardSetting } from 'api/purseManage'
import { formatDate } from 'utils/dateFormattor'
export default {
	created() {
		let query = localStorage.getItem('employeesInput')
		if (query != 'null' && query) {
			this.listQuery = JSON.parse(query)
		}
		this.getList()
		this.postionsFn()
		this.getAllFn()
		this.jobsFn()
		this.getRank()
	},
	computed: {
		...mapGetters(['elements']),
		/**
		 * 获取token
		 */

		getHeaderWithToken() {
			return { Authorization: getToken() }
		}
	},
	data() {
		return {
			//职位
			position: {
				relTime: null, //修改时间
				jobId: null //职位
			},
			loading: true,
			amendStatus: 0, //0人事调动  1信息修改
			//修改分公司
			amendCompany: {
				companyId: null, //公司id
				relTime: null //修改时间
			},
			amendIdentity: {
				positionId: null, //身份id
				relTime: null //变更日期
			},
			//入职离职
			isJobForm: {
				relTime: null //变更日期
			},
			amendPop: false, //修改弹窗
			amendContent: '', //修改标题
			isShow: '4', //编辑员工弹窗
			infoPop: false,
			jobsList: [],
			activeId: '',
			uploadListHiut: {
				uploadList: [],
				success: '',
				error: ''
			},
			companyList: [],
			uploadHiut: false,
			fileList: [],
			BASE_API: process.env.BASE_API,
			limitNum: 1,
			fileForm: {
				file: ''
			},
			tolead: false,
			listQuery: {
				name: '',
				phone: '',
				positionId: null,
				page: 1,
				limit: 10,
				companyId: '',
				companyName: ''
			},
			total: null,
			tableKey: 0,
			list: [],
			listLoading: true,
			statusList: [],
			postionsList: [],
			staffTitle: '新增员工',
			bulkUploadMember: false,
			whether: 1, //1:新增 2:编辑
			staffTitleFrom: {
				phone: '',
				name: '',
				positionId: '',
				jobId: '',
				companyId: '',
				companyName: '',
				relTime: null //入职日期
			},
			rules: {},
			staffInfo: {
				info: {},
				record: []
			}
		}
	},
	methods: {
		//修改弹窗关闭
		closeAmend() {
			this.$refs.amendCompany.resetFields()
		},
		//修改员工弹窗
		amend(val) {
			this.amendPop = true
			if (val == 4) {
				this.amendContent = '修改所属公司'
				this.isShow = val
				this.amendCompany = {
					companyId: null, //公司id
					relTime: null //修改时间
				}
			} else if (val == 3) {
				this.amendContent = '修改身份'
				this.isShow = val
				this.amendIdentity = {
					positionId: null, //身份id
					relTime: null //变更日期
				}
			} else if (val == 5) {
				this.amendContent =
					this.staffTitleFrom.isQuit == '在职'
						? '离职时间'
						: '入职时间'
				this.isShow = val
				this.isJobForm = {
					relTime: null //变更日期
				}
			} else if (val == 2) {
				this.amendContent = '职位修改'
				this.isShow = val
				this.position = {
					relTime: null, //修改时间
					jobId: null //职位
				}
			}
		},
		//公司修改
		compantBtn() {
			if (!this.amendCompany.companyId) {
				this.$message('分公司不能为空')
				return false
			} else if (this.amendStatus == 0) {
				if (!this.amendCompany.relTime) {
					this.$message('调动日期不能为空')
					return false
				} else {
					this.amendCompany.relTime = formatDate(
						this.amendCompany.relTime,
						'yyyy-MM-dd hh:mm:ss'
					)
					let name = this.companyList.filter(
						item => item.id == this.amendCompany.companyId
					)
					this.amendCompany.companyName = name[0].name
					this.amendCompany.jobId = this.staffTitleFrom.jobId
					this.amendCompany.positionId = this.staffTitleFrom.positionId
					this.amendCompany.changeStatus = 4
					this.amendCompany.isQuit =
						this.staffTitleFrom.isQuit == '在职' ? 0 : 1
					this.setApi(this.amendCompany)
				}
			} else {
				//信息修改
				let params = {}
				let name = this.companyList.filter(
					item => item.id == this.amendCompany.companyId
				)
				params.companyName = name[0].name
				params.companyId = name[0].id
				params.positionId = this.staffTitleFrom.positionId
				params.name = this.staffTitleFrom.name
				params.phone = this.staffTitleFrom.phone
				params.id = this.staffTitleFrom.id
				params.userId = this.staffTitleFrom.userId
				editorUpd(params).then(data => {
					if (data.status == 200) {
						this.$message.success('编辑成功')
						this.amendPop = false
						this.bulkUploadMember = false
						this.getList()
					} else {
						this.$message.error(data.message)
					}
				})
			}
		},
		setApi(params) {
			params.phone = this.staffTitleFrom.phone
			params.id = this.staffTitleFrom.id
			params.name = this.staffTitleFrom.name
			params.userId = this.staffTitleFrom.userId
			updUserChange(params).then(data => {
				if (data.status == 200) {
					this.$message.success('编辑成功')
					this.amendPop = false
					this.bulkUploadMember = false
					this.getList()
				} else {
					this.$message.error(data.message)
				}
			})
		},
		//身份修改
		amendIdentityBtn() {
			this.amendIdentity.changeStatus = 3
			if (!this.amendIdentity.positionId || !this.amendIdentity.relTime) {
				this.$message('身份和变更日期不能为空')
				return false
			} else {
				this.amendIdentity.relTime = formatDate(
					this.amendIdentity.relTime,
					'yyyy-MM-dd hh:mm:ss'
				)
				this.amendIdentity.companyName = this.staffTitleFrom.companyName
				this.amendIdentity.jobId = this.staffTitleFrom.jobId
				this.amendIdentity.companyId = this.staffTitleFrom.companyId
				this.amendIdentity.isQuit =
					this.staffTitleFrom.isQuit == '在职' ? 0 : 1
				this.setApi(this.amendIdentity)
			}
		},
		//离职在职
		isJobBtn(val) {
			if (!this.isJobForm.relTime) {
				this.$message('日期不能为空')
				return false
			} else {
				this.isJobForm.relTime = formatDate(
					this.isJobForm.relTime,
					'yyyy-MM-dd hh:mm:ss'
				)
				// val == '离职时间' ? this.isJobForm.job_remark = 5 :  this.isJobForm.job_remark = 1
				this.isJobForm.companyName = this.staffTitleFrom.companyName
				this.isJobForm.positionId = this.staffTitleFrom.positionId
				this.isJobForm.companyId = this.staffTitleFrom.companyId
				this.isJobForm.isQuit = 1
				this.isJobForm.changeStatus = 5
				this.isJobForm.jobId = this.staffTitleFrom.jobId
				if (val == '离职时间') {
					this.setApi(this.isJobForm)
				} else {
					//复职
					// this.isJobForm.isQuit  = 2
					// this.isJobForm.changeStatus = 6
					// this.setApi(this.isJobForm)
					let params = {}
					params.phone = this.staffTitleFrom.phone
					params.relTime = formatDate(
						new Date(this.isJobForm.relTime),
						'yyyy-MM-dd hh:mm:ss'
					)
					params.id = this.staffTitleFrom.id
					params.companyName = this.staffTitleFrom.companyName
					params.positionId = this.staffTitleFrom.positionId
					params.companyId = this.staffTitleFrom.companyId
					params.isQuit = 0
					params.changeStatus = 6
					params.jobId = this.staffTitleFrom.jobId
					params.name = this.staffTitleFrom.name
					params.userId = this.staffTitleFrom.userId
					updAddPositionChangeRecord(params).then(data => {
						if (data.status == 200) {
							this.$message.success('编辑成功')
							this.amendPop = false
							this.bulkUploadMember = false
							this.getList()
						} else {
							this.$message.error(data.message)
						}
					})
				}
			}
		},
		//职位变更
		positionBtn() {
			if (!this.position.jobId || !this.position.relTime) {
				this.$message('身份和变更日期不能为空')
				return false
			} else {
				this.position.changeStatus = 2
				this.position.relTime = formatDate(
					this.position.relTime,
					'yyyy-MM-dd hh:mm:ss'
				)
				this.position.companyName = this.staffTitleFrom.companyName
				this.position.positionId = this.staffTitleFrom.positionId
				this.position.companyId = this.staffTitleFrom.companyId
				this.position.isQuit =
					this.staffTitleFrom.isQuit == '在职' ? 0 : 1
				this.setApi(this.position)
			}
		},
		handleSelectPark(val) {
			console.log(val)

			this.listQuery.companyName = this.companyList.filter(
				item => item.id == val
			)[0].name
		},
		handleSelectParks(item) {
			this.staffTitleFrom.companyId = item.id
			this.staffTitleFrom.companyName = item.name
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.name.indexOf(queryString.toLowerCase()) != -1
			}
		},
		querySearch(queryString, cb) {
			let selectArry = []
			this.companyList.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			this.selectArry = selectArry
			var results = queryString
				? selectArry.filter(this.createFilter(queryString))
				: selectArry
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		//获取身份
		getRank() {
			getrewardSetting().then(data => {
				if (data.status == 200) {
					this.statusList = data.data
				}
			})
		},
		//分公司
		getAllFn() {
			getAll().then(data => {
				if (data.status == 200) {
					this.companyList = data.data
					this.companyList.unshift({ name: '全部', id: '' })
				}
			})
		},
		//新增,编辑员工弹窗关闭
		closeAdd() {
			this.staffTitleFrom = {
				phone: '',
				name: '',
				positionId: '',
				jobId: '',
				companyId: '',
				companyName: '',
				relTime: null
			}
		},
		upLoad(file) {
			var form = new FormData()
			// 文件对象
			form.append('file', file.file)
			staffImport(form).then(res => {
				console.log(res)
				this.uploadHiut = true
				;(this.uploadListHiut = {
					uploadList: res.data.data,
					success: res.data.success,
					error: res.data.error
				}),
					this.getList()
			})
		},
		//excel上传
		handleRemove(file, fileList) {
			//console.log(file, fileList);
		},
		handlePreview(file) {
			//console.log(file);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`)
		},
		// 文件超出个数限制时的钩子
		exceedFile(files, fileList) {
			this.$notify.warning({
				title: '警告',
				message: `只能选择 ${
					this.limitNum
				} 个文件，当前共选择了 ${files.length + fileList.length} 个`
			})
		},
		// 文件状态改变时的钩子
		fileChange(file, fileList) {
			//console.log("change");
			//console.log(file);
			this.fileForm.file = file.raw
			//console.log(this.fileForm.file);
			// console.log(fileList);
		},
		// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
		beforeUploadFile(file) {
			//console.log("before upload");
			//console.log(file);
			let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
			let size = file.size / 1024 / 1024
			if (extension !== 'xlsx') {
				this.$notify.warning({
					title: '警告',
					message: `只能上传Excel 2007以上版本（即后缀是.xlsx）的文件`
				})
			}
			if (size > 10) {
				this.$notify.warning({
					title: '警告',
					message: `文件大小不得超过10M`
				})
			}
		},
		cancelNotDeleteForm() {
			this.tolead = false
			this.$refs.uploadExcel.clearFiles()
		},
		//员工列表
		getList() {
			this.loading = true
			staffList(this.listQuery).then(data => {
				this.listLoading = true
				if (data.status == 200) {
					this.list = data.data.data
					this.total = data.data.totalCount
					this.listLoading = false
				}
			})
			setTimeout(() => {
				this.loading = false
			}, 300)
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			if (this.listQuery) {
				localStorage.setItem(
					'employeesInput',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			if (this.listQuery) {
				localStorage.setItem(
					'employeesInput',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		//搜索
		handleFilter() {
			this.listQuery.page = 1
			if (this.listQuery) {
				localStorage.setItem(
					'employeesInput',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		//清空搜索条件
		cleaningQuery() {
			this.listQuery = {
				name: '',
				phone: '',
				positionId: null,
				page: 1,
				limit: 10,
				companyId: '',
				companyName: ''
			}
			if (this.listQuery) {
				localStorage.setItem(
					'employeesInput',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		//新增员工
		addStaff() {
			this.staffTitle = '新增员工'
			this.bulkUploadMember = true
			this.whether = 1
		},
		//批量导入员工
		toLoad() {
			this.tolead = true
		},
		//编辑员工
		editorStaff(row) {
			this.activeId = row.id
			this.staffTitle = '编辑员工'
			this.bulkUploadMember = true
			this.whether = 2
			this.staffTitleFrom = {
				phone: row.phone,
				name: row.name,
				positionId: row.positionId,
				companyId: row.companyId,
				companyName: row.companyName,
				relTime: row.relTime,
				id: row.id,
				userId: row.userId,
				jobId: row.jobId == 0 ? null : row.jobId,
				isQuit: row.isQuit == 1 ? '离职' : '在职'
			}
		},
		//员工详情
		infoStaff(row) {
			this.infoPop = true
			this.staffInfo.info = row
			findPositionChangeRecord({ id: row.id }).then(data => {
				if (data.status == 200) {
					this.staffInfo.record = data.data
				}
			})
		},
		//确定
		confirm(formName) {
			if (this.staffTitle == '新增员工') {
				if (!this.staffTitleFrom.jobId) {
					this.$message('职位不能为空')
				} else {
					if (!!this.staffTitleFrom.relTime)
						this.staffTitleFrom.relTime = formatDate(
							new Date(this.staffTitleFrom.relTime),
							'yyyy-MM-dd hh:mm:ss'
						)

					addEditor(this.staffTitleFrom).then(data => {
						if (data.status == 200) {
							this.$notify({
								title: '成功',
								message: '新增成功',
								type: 'success',
								duration: 2000
							})
							this.bulkUploadMember = false
							this.getList()
						} else {
							this.$notify({
								title: '失败',
								message: data.message,
								type: 'error',
								duration: 2000
							})
						}
					})
				}
			} else {
				this.staffTitleFrom.id = this.activeId
				delete this.staffTitleFrom.isQuit
				editorUpd(this.staffTitleFrom).then(data => {
					if (data.status == 200) {
						this.$notify({
							title: '成功',
							message: '编辑成功',
							type: 'success',
							duration: 2000
						})
						this.bulkUploadMember = false
						this.getList()
					} else {
						this.$notify({
							title: '失败',
							message: data.message,
							type: 'failed',
							duration: 2000
						})
					}
				})
			}
		},
		//身份列表
		postionsFn() {
			postions().then(data => {
				//console.log(data);
				if (data.status == 200) {
					this.postionsList = data.data
				}
			})
		},
		jobsFn() {
			jobs().then(data => {
				// console.log(data);
				if (data.status == 200) {
					this.jobsList = data.data
				}
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		}
	}
}
</script>
<style>
.title {
	color: #666;
	border-bottom: 1px solid #d9d9d9;
	padding-bottom: 10px;
}
.staff-info span {
	display: inline-block;
	margin: 10px 20px 0 0;
}
.member .el-dialog--small {
	width: 500px;
}
.defeated {
	padding: 0;
}
.defeated li {
	list-style: none;
}
</style>
