<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-punch"></i> 员工系统</el-breadcrumb-item>
				<el-breadcrumb-item>工资管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-tabs :tab-position="tabPosition">
				<el-tab-pane label="工资查询">
					<div class="handle-box">
						<el-date-picker v-model="jzoon.date" type="month" placeholder="选择月" value-format="yyyyMM" @change="serch_Month"></el-date-picker>
					</div>
					<el-table :data="tableData0" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column prop="name" label="姓名"></el-table-column>
						<el-table-column prop="pp.baseprice" label="基本工资">
							<!-- <template slot-scope="scope">
								{{scope.row.pp.baseprice=='0'?'':(scope.row.pp.baseprice!='0'?scope.row.pp.baseprice:'')}}
							</template> -->
						</el-table-column>
						<el-table-column prop="pp.journalprice" label="绩效工资">
							<!-- <template slot-scope="scope">
								{{scope.row.pp.journalprice=='0'?'':(scope.row.pp.journalprice!='0'?scope.row.pp.journalprice:'')}}
							</template> -->
						</el-table-column>
						<el-table-column prop="pp.citeprice" label="引用工资"></el-table-column>
						<el-table-column prop="pp.add_sub" label="其他">
							<!-- <template slot-scope="scope">
								{{parseInt(scope.row.pp.add_price)-parseInt(scope.row.pp.sub_price)}}
							</template> -->
						</el-table-column>
						<el-table-column label="操作" width="120" align="center">
							<template slot-scope="scope">
								<router-link :to="{path:'/wagesper',query: {wages_num: scope.row.name,month_num: jzoon.date}}" style="margin-right: 10px;">
									<el-button type="text" icon="el-icon-view">当月工资</el-button>
								</router-link>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination background layout="total, prev, pager, next" :current-page="jzoon.pageIndex" :page-size="jzoon.pageSize"
						 :total="link_Total_" @current-change="handlePageChange_"></el-pagination>
					</div>
				</el-tab-pane>

				<el-tab-pane label="员工管理">
					<div class="handle-box">
						<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection1">添加员工</el-button>
					</div>
					<el-table :data="tableData1" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column prop="name" label="姓名" width="130px"></el-table-column>
						<el-table-column prop="wages" label="职级">
							<template slot-scope="scope">
								{{scope.row.title}}&nbsp;({{scope.row.wages}})
							</template>
						</el-table-column>
						<el-table-column prop="phone" label="电话" width="150px"></el-table-column>
						<el-table-column prop="email" label="邮箱"></el-table-column>
						<el-table-column label="增加金额">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.add_price!=''" type="success">{{scope.row.add_price}}</el-tag>
								&nbsp;&nbsp;{{scope.row.add_reason}}
							</template>
						</el-table-column>
						<el-table-column label="减少金额">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.sub_price!=''" type="danger">{{scope.row.sub_price}}</el-tag>
								&nbsp;&nbsp;{{scope.row.sub_reason}}
							</template>
						</el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
								<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete1(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
						 :total="link_Total" @current-change="handlePageChange"></el-pagination>
					</div>

					<!-- 添加员工弹出框 -->
					<el-dialog title="添加 - 员工" :visible.sync="addVisible1" width="40%">
						<el-form ref="add_Form1" :model="addForm1" :rules="rules" label-width="85px">
							<el-form-item label="姓名" prop="name">
								<el-input v-model="addForm1.name"></el-input>
							</el-form-item>
							<el-form-item label="职级" prop="staff_level_id">
								<el-select v-model="addForm1.staff_level_id" filterable placeholder="请选择">
									<el-option v-for="item in levelOP" :key="item.staff_level_id" :label="item.title" :value="item.staff_level_id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="工资类型" prop="type">
								<el-radio-group v-model="addForm1.type">
									<el-radio label="0">标准工资</el-radio>
									<el-radio label="1">固定工资</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input v-model="addForm1.password" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="电话" prop="phone">
								<el-input v-model="addForm1.phone"></el-input>
							</el-form-item>
							<el-form-item label="邮箱" prop="email">
								<el-input v-model="addForm1.email"></el-input>
							</el-form-item>
							<el-form-item label="身份证号" prop="ident">
								<el-input v-model="addForm1.ident"></el-input>
							</el-form-item>
							<el-form-item label="银行卡号" prop="bank">
								<el-input v-model="addForm1.bank"></el-input>
							</el-form-item>
							<el-form-item label="增加金额" prop="add_price">
								<el-input-number v-model="addForm1.add_price" :min="0" style="width: 200px;"></el-input-number>
							</el-form-item>
							<el-form-item label="增加原因" prop="add_reason">
								<el-input v-model="addForm1.add_reason"></el-input>
							</el-form-item>
							<el-form-item label="减少金额" prop="sub_price">
								<el-input-number v-model="addForm1.sub_price" :min="0" style="width: 200px;"></el-input-number>
							</el-form-item>
							<el-form-item label="减少原因" prop="sub_reason">
								<el-input v-model="addForm1.sub_reason"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="addVisible1 = false">取 消</el-button>
							<el-button type="primary" @click="saveAdd1(addForm1)">确 定</el-button>
						</span>
					</el-dialog>
					<!-- 编辑员工弹出框 -->
					<el-dialog title="编辑 - 员工" :visible.sync="editVisible1" width="40%">
						<el-form ref="edit_Form1" :model="editForm1" :rules="rules" label-width="85px">
							<el-form-item label="姓名" prop="name">
								<el-input v-model="editForm1.name"></el-input>
							</el-form-item>
							<el-form-item label="职级" prop="staff_level_id">
								<el-select v-model="editForm1.staff_level_id" filterable placeholder="请选择">
									<el-option v-for="item in levelOP" :key="item.staff_level_id" :label="item.title" :value="item.staff_level_id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="工资类型" prop="type">
								<el-radio-group v-model="editForm1.type">
									<el-radio :label="0">标准工资</el-radio>
									<el-radio :label="1">固定工资</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="电话" prop="phone">
								<el-input v-model="editForm1.phone"></el-input>
							</el-form-item>
							<el-form-item label="邮箱" prop="email">
								<el-input v-model="editForm1.email"></el-input>
							</el-form-item>
							<el-form-item label="身份证号" prop="ident">
								<el-input v-model="editForm1.ident"></el-input>
							</el-form-item>
							<el-form-item label="银行卡号" prop="bank">
								<el-input v-model="editForm1.bank"></el-input>
							</el-form-item>
							<el-form-item label="增加金额" prop="add_price">
								<el-input-number v-model="editForm1.add_price" :min="0" style="width: 200px;"></el-input-number>
							</el-form-item>
							<el-form-item label="增加原因" prop="add_reason">
								<el-input v-model="editForm1.add_reason"></el-input>
							</el-form-item>
							<el-form-item label="减少金额" prop="sub_price">
								<el-input-number v-model="editForm1.sub_price" :min="0" style="width: 200px;"></el-input-number>
							</el-form-item>
							<el-form-item label="减少原因" prop="sub_reason">
								<el-input v-model="editForm1.sub_reason"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="editVisible1 = false">取 消</el-button>
							<el-button type="primary" @click="saveEdit1(editForm1)">确 定</el-button>
						</span>
					</el-dialog>
				</el-tab-pane>

				<el-tab-pane label="职级管理">
					<div class="handle-box">
						<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection2">添加职级</el-button>
					</div>
					<el-table :data="tableData2" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column prop="title" label="职级"></el-table-column>
						<el-table-column prop="wages" label="金额"></el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
								<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete2(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 添加职级弹出框 -->
					<el-dialog title="添加 - 职级" :visible.sync="addVisible2" width="30%">
						<el-form ref="add_Form2" :model="addForm2" :rules="rules" label-width="85px">
							<el-form-item label="职级" prop="title">
								<el-input v-model="addForm2.title"></el-input>
							</el-form-item>
							<el-form-item label="金额" prop="wages">
								<el-input-number v-model="addForm2.wages" :min="0" style="width: 200px;"></el-input-number>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="addVisible2 = false">取 消</el-button>
							<el-button type="primary" @click="saveAdd2(addForm2)">确 定</el-button>
						</span>
					</el-dialog>
					<!-- 编辑职级弹出框 -->
					<el-dialog title="编辑 - 职级" :visible.sync="editVisible2" width="30%">
						<el-form ref="edit_Form2" :model="editForm2" :rules="rules" label-width="85px">
							<el-form-item label="职级" prop="title">
								<el-input v-model="editForm2.title"></el-input>
							</el-form-item>
							<el-form-item label="金额" prop="wages">
								<el-input-number v-model="editForm2.wages" :min="0" style="width: 200px;"></el-input-number>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="editVisible2 = false">取 消</el-button>
							<el-button type="primary" @click="saveEdit2(editForm2)">确 定</el-button>
						</span>
					</el-dialog>
				</el-tab-pane>

				<el-tab-pane label="对应关系">
					<el-table :data="tableData3" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column prop="title" label="期刊"></el-table-column>
						<el-table-column prop="staff_name" label="负责人员"></el-table-column>
						<el-table-column prop="jour_num" label="基础稿件量" width="150"></el-table-column>
						<el-table-column label="操作" width="120" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-lx-people" @click="handleEdit3(scope.$index, scope.row)">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 编辑对应关系弹出框 -->
					<el-dialog title="选择 - 负责人员" :visible.sync="editVisible3" width="30%">
						<el-form ref="edit_Form3" :model="editForm3" :rules="rules" label-width="100px">
							<el-form-item label="期刊">
								{{editForm3.title}}
							</el-form-item>
							<el-form-item label="负责人员" prop="staff_id">
								<el-select v-model="editForm3.staff_id" filterable placeholder="请选择">
									<el-option v-for="item in personOP" :key="item.staff_id" :label="item.name" :value="item.staff_id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="基础稿件量" prop="jour_num">
								<el-input-number v-model="editForm3.jour_num" :min="0" style="width: 150px;"></el-input-number>
							</el-form-item>
							<el-form-item label="期刊工资" prop="jour_price">
								<el-input-number v-model="editForm3.jour_price" :min="0" style="width: 200px;"></el-input-number>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="editVisible3 = false">取 消</el-button>
							<el-button type="primary" @click="saveEdit3(editForm3)">确 定</el-button>
						</span>
					</el-dialog>
				</el-tab-pane>

			</el-tabs>

		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				Uw_url: 'special',
				// Uw_url: 'api',
				jzoon: {
					date: new Date(),
					pageIndex: 1,
					pageSize: 100
				},
				query: {
					pageIndex: 1,
					pageSize: 100
				},
				search: {},
				tabPosition: 'left',
				tableData0: [],
				tableData1: [],
				tableData2: [],
				tableData3: [],
				addForm1: {
					type: '0',
					password: '123456',
					phone: '',
					email: '',
					ident: '',
					bank: '',
					add_price: '',
					add_reason: '',
					sub_price: '',
					sub_reason: ''
				},
				editForm1: {},
				addForm2: {},
				editForm2: {},
				editForm3: {},
				levelOP: [],
				personOP: [],
				multipleSelection: [],
				editVisible1: false,
				addVisible1: false,
				editVisible2: false,
				addVisible2: false,
				editVisible3: false,
				link_Total: 0,
				link_Total_: 0,
				aid: -1,
				title_header: "",
				idx: -1,
				id: -1,
				rules: {
					title: [{
						required: true,
						message: '请输入职级',
						trigger: 'blur'
					}],
					wages: [{
						pattern: /^-?\d+\.?\d*$/,
						required: true,
						message: '请输入金额',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入员工名',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择工资类型',
						trigger: 'blur'
					}],
					staff_level_id: [{
						required: true,
						message: '请选择职级',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					staff_id: [{
						required: true,
						message: '请选择负责人员',
						trigger: 'blur'
					}],
					jour_num: [{
						required: true,
						message: '请输入期刊要求数',
						trigger: 'blur'
					}],
					jour_price: [{
						required: true,
						message: '请输入期刊工资',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			// 默认时间换成标准格式
			var date = new Date();
			var year = date.getFullYear();
			var month = String(new Date().getMonth() + 1).padStart(2, 0)
			var toMonth = year + month;
			this.jzoon.date = toMonth;

			this.getData();
		},
		methods: {
			// 获取列表
			getData() {
				// 获取工资列表数据
				this.$api
					.post(this.Uw_url + '/Staff/getAllStaff', this.jzoon)
					.then(res => {
						if (res.code == 0) {
							for (let i = 0; i < res.data.staffs.length; i++) {
								if (res.data.staffs[i].pp == 'error') {
									res.data.staffs[i].pp = {}
									res.data.staffs[i].pp.baseprice = '0'
									res.data.staffs[i].pp.journalprice = '0'
									res.data.staffs[i].pp.citeprice = '0'
									res.data.staffs[i].pp.add_sub = '0'
									res.data.staffs[i].pp.add_price = '0'
									res.data.staffs[i].pp.sub_price = '0'
								} else {
									res.data.staffs[i].pp.add_sub = parseInt(res.data.staffs[i].pp.add_price) - parseInt(res.data.staffs[i].pp.sub_price)
									if (res.data.staffs[i].pp.baseprice == '0' && res.data.staffs[i].pp.journalprice == '0') {
										res.data.staffs.splice(i, 1);
										i -= 1
									}
								}
							}

							this.tableData0 = res.data.staffs;
							this.link_Total_ = res.data.staffs.length || 0;

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				// 获取人员列表数据
				this.$api
					.post(this.Uw_url + '/Staff/getStaffs', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData1 = res.data.staffs;
							this.link_Total = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				// 获取职级列表数据
				this.$api
					.post(this.Uw_url + '/Staff/getStaffLevels')
					.then(res => {
						if (res.code == 0) {
							this.tableData2 = res.data.levels;
							this.levelOP = res.data.levels;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				// 获取对应关系列表数据
				this.$api
					.post(this.Uw_url + '/Staff/getJournals')
					.then(res => {
						if (res.code == 0) {
							for (let i = 0; i < res.data.journals.length; i++) {
								if (res.data.journals[i].staff_id == '0') {
									res.data.journals[i].staff_id = ''
								}
							}
							this.tableData3 = res.data.journals;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post(this.Uw_url + '/Staff/getAllStaffs')
					.then(res => {
						if (res.code == 0) {
							this.personOP = res.data.staffs;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},



			// 工资---月份查询
			serch_Month() {
				this.getData();
			},
			// 分页导航
			handlePageChange_(val) {
				this.$set(this.jzoon, 'pageIndex', val);
				this.getData();
			},


			// 员工---添加操作
			add_Selection1(index, row) {
				this.aid = index;
				this.addVisible1 = true;
			},
			// 员工---保存添加
			saveAdd1(addFor1) {
				this.$refs.add_Form1.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Staff/addStaff', this.addForm1)
							.then(res => {
								if (res.code == 0) {
									this.addVisible1 = false;
									this.$refs.add_Form1.resetFields();
									this.$message.success(`添加成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 员工---编辑操作
			handleEdit1(index, row) {
				this.idx = index;
				this.editForm1 = Object.assign({}, row);
				this.editVisible1 = true;
			},
			// 员工---保存编辑
			saveEdit1(editForm1) {
				this.$refs.edit_Form1.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Staff/editStaff', this.editForm1)
							.then(res => {
								if (res.code == 0) {
									this.editVisible1 = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 员工---删除操作
			handleDelete1(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post(this.Uw_url + '/Staff/delStaff', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},


			// 职级---添加操作
			add_Selection2(index, row) {
				this.aid = index;
				this.addVisible2 = true;
			},
			// 职级---保存添加
			saveAdd2(addForm2) {
				this.$refs.add_Form2.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Staff/addStaffLevel', this.addForm2)
							.then(res => {
								if (res.code == 0) {
									this.addVisible2 = false;
									this.$refs.add_Form2.resetFields();
									this.$message.success(`添加成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 职级---编辑操作
			handleEdit2(index, row) {
				this.idx = index;
				this.editForm2 = Object.assign({}, row);
				this.editVisible2 = true;
			},
			// 职级---保存编辑
			saveEdit2(editForm2) {
				this.$refs.edit_Form2.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Staff/editStaffLevel', this.editForm2)
							.then(res => {
								if (res.code == 0) {
									this.editVisible2 = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 职级---删除操作
			handleDelete2(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post(this.Uw_url + '/Staff/delStaffLevel', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},



			// 对应关系---编辑操作
			handleEdit3(index, row) {
				this.idx = index;
				this.editForm3 = Object.assign({}, row);
				this.editVisible3 = true;
			},
			// 对应关系---保存编辑
			saveEdit3(editForm3) {
				this.$refs.edit_Form3.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Staff/editJournalStaff', this.editForm3)
							.then(res => {
								if (res.code == 0) {
									this.editVisible3 = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			}

		}
	};
</script>

<style>
	.handle-box {
		margin-bottom: 20px;
	}

	.el-tabs--left .el-tabs__header.is-left {
		margin-right: 30px;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.handle-input {
		width: 220px;
		display: inline-block;
	}

	.mr10 {
		margin-right: 10px;
	}
</style>
