<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
				prop="id"
				label="编号"
			>
			</el-table-column>
			<el-table-column
				prop="level"
				label="经纪人等级"
			>
			</el-table-column>
			<el-table-column
				prop="peopleNumber"
				label="邀请技师人数"
			>
			</el-table-column>
			<el-table-column label="提成比例" prop="rate">
				<template slot-scope="scope">
					{{ scope.row.rate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="createTime"
				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="handleView(scope.row)"
					>查看
					</el-button>
					<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="dialogFormViewVisible" center>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">经纪人等级：</span>
				<el-input
					style="width: 50%"
					v-model="level"
					type="text"
					placeholder="请输入经纪人等级"
					:disabled="true"
				>
				</el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">最小邀请技师人数：</span>
				<el-input
					style="width: 50%"
					v-model="minNumber"
					type="text"
					placeholder="请输入最小邀请技师人数"
					:disabled="true"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">最大邀请技师人数：</span>
				<el-input
					style="width: 50%"
					v-model="maxNumber"
					type="text"
					placeholder="请输入最大邀请技师人数"
					:disabled="true"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">提成比例(%)：</span>
				<el-input
					style="width: 50%"
					v-model="rate"
					type="text"
					placeholder="请输入提成比例%"
					:disabled="true"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormViewVisible = false">关 闭</el-button>
			</div>
		</el-dialog>
		<!-- 添加、修改 -->
		<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
					style="width: 50%"
					v-model="level"
					type="text"
					placeholder="请输入经纪人等级"
				>
				</el-input>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right">最小邀请技师人数：</span>
				<el-input
					style="width: 50%"
					v-model="minNumber"
					placeholder="请输入最小邀请技师人数"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">最大邀请技师人数：</span>
				<el-input
					style="width: 50%"
					v-model="maxNumber"
					placeholder="请输入最大邀请技师人数"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">提成比例(%)：</span>
				<el-input-number v-model="rate" controls-position="right" :precision="2" :min="0" :step="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: "",
			level: "",
			minNumber: "",
			maxNumber: "",
			peopleNumber: "",
			rate: "",
			dialogFormVisible: false,
			dialogFormViewVisible: false,
		};
	},
	methods: {
		// 获取服务包列表数据
		handleSelect() {
			this.tableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("commission/jjrConfigLevel/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;
			});
		},

		handleView(row){
			this.titles = "查看";
			this.id = row.id;
			this.level = row.level;
			this.peopleNumber = row.peopleNumber;
			this.minNumber = row.minNumber;
			this.maxNumber = row.maxNumber;
			this.rate = row.rate;
			this.dialogFormViewVisible = true;
		},

		// 添加服务包
		handleEdit(row) {
			if (row != 0) {
				this.titles = "修改";
				this.id = row.id;
				this.level = row.level;
				this.peopleNumber = row.peopleNumber;
				this.minNumber = row.minNumber;
				this.maxNumber = row.maxNumber;
				this.rate = row.rate;
			} else {
				this.titles = "添加";
				this.id = "";
				this.level = "";
				this.peopleNumber = "";
				this.minNumber = "";
				this.maxNumber = "";
				this.rate = "";
			}
			this.dialogFormVisible = true;
		},

		// 提交添加、修改
		handleSubmit() {
			if (this.level == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入经纪人等级",
					type: "warning",
				});
				return;
			}
			if (this.minNumber == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入最小邀请技师人数",
					type: "warning",
				});
				return;
			}
			if (this.maxNumber == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入最大邀请技师人数",
					type: "warning",
				});
				return;
			}
			if (this.rate == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入提成比例",
					type: "warning",
				});
				return;
			}
			if (this.titles == "添加") {
				this.apiUrl = "commission/jjrConfigLevel/add";
			} else {
				this.apiUrl = "commission/jjrConfigLevel/update";
			}
			this.$http({
				url: this.$http.adornUrl(this.apiUrl),
				method: "post",
				params: this.$http.adornParams({
					id: this.id,
					level: this.level,
					minNumber: this.minNumber,
					maxNumber: this.maxNumber,
					rate: this.rate,
				}),
			}).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("commission/jjrConfigLevel/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>
