<template>
	<div>
		<!-- 列表 -->
		<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="handleSelect">刷新
		</el-button>
		<el-button
			style="margin-left: 10px"
			size="mini"
			type="primary"
			icon="document"
			@click="handleEdit(0)"
		>新增分成明细配置
		</el-button>
		<el-table v-loading="tableDataLoading" :data="tableData">
			<el-table-column fixed prop="id" label="编号" align="center" width="80">
			</el-table-column>
			<el-table-column fixed prop="grade" label="技师等级" align="center">
			</el-table-column>
			<el-table-column prop="durationOnline" label="最低在线时长(小时)">
			</el-table-column>
			<el-table-column prop="outstandingAchievement" label="最低业绩">
			</el-table-column>
<!--			<el-table-column prop="clockRate" label="加钟率">-->
<!--			</el-table-column>-->
<!--			<el-table-column prop="depositRate" label="充值率">-->
<!--			</el-table-column>-->
			<el-table-column prop="integral" label="最低积分" width="180">
			</el-table-column>
			<el-table-column prop="proportionalSharing" label="分成比例">
			</el-table-column>
			<el-table-column label="操作" prop="id" width="360" fixed="right">
				<template slot-scope="scope">
					<el-button
							   size="mini"
							   type="primary"
							   style="margin: 5px"
							   @click="handleEdit(scope.row)"
					>修改
					</el-button>
					<el-button
							   size="mini"
							   type="primary"
							   style="margin: 5px"
							   @click="handleDelete(scope.row)"
					>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 添加、修改 -->
		<el-dialog :title="titles" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">技师等级：</span>
				<el-input v-model="grade" controls-position="right" placeholder="请输入技师等级" type="text" style="width: 50%"/>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">最低在线时长(小时)：</span>
				<el-input-number v-model="durationOnline" controls-position="right" :precision="0" :min="0" :step="1" placeholder="请输入在线时长"/>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">最低业绩：</span>
				<el-input-number v-model="outstandingAchievement" controls-position="right" :precision="2" :min="0" :step="1" placeholder="请输入最低业绩"/>
			</div>
<!--			<div style="margin-bottom: 10px">-->
<!--				<span style="width: 200px; display: inline-block; text-align: right">加钟率：</span>-->
<!--				<el-input-number v-model="clockRate" controls-position="right" :precision="2" :min="0" :max="1" :step="0.1" placeholder="请输入加钟率"/>-->
<!--			</div>-->
<!--			<div style="margin-bottom: 10px">-->
<!--				<span style="width: 200px; display: inline-block; text-align: right">充值率：</span>-->
<!--				<el-input-number v-model="depositRate" controls-position="right" :precision="2" :min="0" :max="1" :step="0.1" placeholder="请输入充值率"/>-->
<!--			</div>-->

			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">最低积分：</span>
				<el-input-number v-model="integral" controls-position="right" :precision="0" :min="0" :step="1" placeholder="请输入积分"/>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">分成比例：</span>
				<el-input-number v-model="proportionalSharing" controls-position="right" :precision="2" :min="0" :max="1" :step="0.1" placeholder="请输入分成比例"/>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>

export default {
	data() {
		return {
			apiUrl: "",
			titles: "",
			tableDataLoading: false,
			tableData: [],
			id: "",
			grade: "",
			outstandingAchievement: "",
			clockRate: "",
			durationOnline: "",
			integral: "",
			proportionalSharing: "",
			depositRate: "",
			dialogFormVisible: false,
		};
	},
	methods: {
		handleSelect() {
			this.tableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("artificer/partitioningDetails/findList"),
				method: "get",
				params: this.$http.adornParams({}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.tableData = data.data;
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
				this.tableDataLoading = false;
			});
		},

		// 添加修改
		handleEdit(row) {
			if (row != 0) {
				this.titles = "修改";
				this.id = row.id;
				this.grade = row.grade;
				this.outstandingAchievement = row.outstandingAchievement;
				this.clockRate = row.clockRate;
				this.durationOnline = row.durationOnline;
				this.integral = row.integral;
				this.proportionalSharing = row.proportionalSharing;
				this.depositRate = row.depositRate;
			} else {
				this.titles = "添加";
				this.id = "";
				this.grade = "";
				this.outstandingAchievement = "";
				this.clockRate = "";
				this.durationOnline = "";
				this.integral = "";
				this.proportionalSharing = "";
				this.depositRate = "";
			}
			this.dialogFormVisible = true;
		},

		// 提交添加、修改
		handleSubmit() {
			if (this.grade == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入技师等级",
					type: "warning",
				});
				return;
			}
			// if (this.outstandingAchievement == "") {
			// 	this.$notify({
			// 		title: "提示",
			// 		duration: 1800,
			// 		message: "请输入最低业绩",
			// 		type: "warning",
			// 	});
			// 	return;
			// }
			// if (this.clockRate == "") {
			// 	this.$notify({
			// 		title: "提示",
			// 		duration: 1800,
			// 		message: "请输入加钟率",
			// 		type: "warning",
			// 	});
			// 	return;
			// }
			// if (this.depositRate == "") {
			// 	this.$notify({
			// 		title: "提示",
			// 		duration: 1800,
			// 		message: "请输入充值率",
			// 		type: "warning",
			// 	});
			// 	return;
			// }
			// if (this.durationOnline == "") {
			// 	this.$notify({
			// 		title: "提示",
			// 		duration: 1800,
			// 		message: "请输入在线时长",
			// 		type: "warning",
			// 	});
			// 	return;
			// }
			// if (this.integral == "") {
			// 	this.$notify({
			// 		title: "提示",
			// 		duration: 1800,
			// 		message: "请输入积分",
			// 		type: "warning",
			// 	});
			// 	return;
			// }
			if (this.proportionalSharing == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入分成比例",
					type: "warning",
				});
				return;
			}
			if (this.titles == "添加") {
				this.apiUrl = "artificer/partitioningDetails/add";
			} else {
				this.apiUrl = "artificer/partitioningDetails/update";
			}
			let params = {
				id: this.id,
				grade: this.grade,
				outstandingAchievement: this.outstandingAchievement,
				clockRate: this.clockRate,
				durationOnline: this.durationOnline,
				integral: this.integral,
				proportionalSharing: this.proportionalSharing,
				depositRate: this.depositRate,
			}
			console.log(params);
			this.$http({
				url: this.$http.adornUrl(this.apiUrl),
				method: "post",
				params: this.$http.adornParams({
					id: this.id,
					grade: this.grade,
					outstandingAchievement: this.outstandingAchievement,
					clockRate: this.clockRate,
					durationOnline: this.durationOnline,
					integral: this.integral,
					proportionalSharing: this.proportionalSharing,
					depositRate: this.depositRate,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.dialogFormVisible = false;
					this.$message({
						message: "操作成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelect();
						},
					});
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},
		handleDelete(row){
			this.$confirm(`确定删除此条信息?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				let id = row.id;
				this.$http({
					url: this.$http.adornUrl("artificer/partitioningDetails/delete"),
					method: "post",
					params: this.$http.adornParams({
						id: id
					}),
				}).then(({data}) => {
					if (data.code == 0) {
						this.$message({
							message: "删除成功",
							type: "success",
							duration: 1500,
							onClose: () => {
								this.handleSelect();
							},
						});
					} else {
						this.$message({
							message: data.msg,
							type: "warning",
							duration: 1500,
							onClose: () => {
							},
						});
					}
				});
			}).catch(() => {});
		},
	},
	mounted() {
		this.handleSelect();
	},
};
</script>

<style>
.customWidth {
	width: 80% !important;
}
.el-dialog--center {
	text-align: center;
 	margin-top: 1vh !important;
}

.el-tooltip__popper {
width: 200px;
padding: 10px;
color: #000 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
background-color: #fff !important;
}

.adver_main.box a {
display: flex;
justify-content: center;
height: 150px;
line-height: 150px;
text-decoration: none;
}

.bannerManin span {
display: inline-block;
margin-left: 5px;
}

.bannerManin img {
width: 48px;
height: 48px;
border-radius: 50%;
}

.bannerbtn a {
flex: 1;
text-align: center;
color: #3e8ef7 !important;
text-decoration: none;
}

.imgs {
position: relative;
border-radius: 6px;
width: 148px;
height: 148px;
margin-right: 10px;
display: inline-block;
}

.dels {
position: absolute;
top: 0;
left: 0;
display: none;
}

.dels .el-icon-delete {
line-height: 148px;
padding-left: 58px;
font-size: 25px;
color: #fff;
}

.imgs:hover .dels {
width: 100%;
height: 100%;
background: #000;
display: block;
opacity: 0.5;
}

.bqList {
padding: 4px 14px;
margin: 4px;
border: 1px solid #efefef;
font-size: 12px;
color: #999;
border-radius: 4px;
margin-right: 15px;
}

.delss {
display: none;
position: relative;
}

.delss .el-icon-delete {
position: absolute;
top: 0;
}

.bqList:hover .delss {
display: initial;
opacity: 0.5;
}

.tj {
padding: 6px !important;
margin: 4px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
