<template>
	<div>
		<el-drawer class="edit-drawer" :title="isEdit ? '修改阶梯奖励' : '新增阶梯奖励'" size="650px" :visible.sync="visible"
			direction="rtl" :modal="modal" :wrapper-closable="false" @close="close">
			<el-form ref="form" :rules="rules" size="small" :model="form" label-width="120px">
				<el-form-item label="奖励名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入班次名称"></el-input>
				</el-form-item>
				<el-form-item label="销售金额" prop="number">
					<el-input-number v-model="form.number" controls-position="right" :min="1"></el-input-number>
				</el-form-item>
				<el-form-item label="奖励股权" prop="stock">
					<el-input-number v-model="form.stock" controls-position="right" :min="1"></el-input-number>
				</el-form-item>
				<el-form-item style="text-align: right; padding-right: 10px">
					<el-button type="primary" @click="confirm">确 定</el-button>
					<el-button @click="close">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	import {
		StaffLadderDetails,
		StaffLadderAdd,
		StaffLadderUpdate
	} from "@/api/Department";
	export default {
		name: "AddLadder",
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: false,
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
			id: {
				type: [String, Number],
				default: '',
			}
		},
		data() {
			return {
				form: {
					//奖励名称
					name: '',
					//奖励股权
					stock: 0,
					// 销售总金额
					number: 0,
				},
				rules: {
					name: [{
						required: true,
						message: "请输入奖励名称",
						trigger: "blur"
					}],
					number: [{
						required: true,
						message: "请输入销售总结",
						trigger: "blur"
					}],
					stock: [{
						required: true,
						message: "请输入奖励股权",
						trigger: "blur"
					}],
				}
			};
		},
		created() {
			if (this.id) {
				this.form.id = this.id;
				this.StaffLadderDetails();
			}
		},
		methods: {
			close() {
				this.$emit("close");
			},
			//  详情 StaffLadderDetails
			async StaffLadderDetails() {
				if (!this.id) return;
				const {
					data
				} = await StaffLadderDetails({
					id: this.id
				});
				this.form = Object.assign(this.form, data)
			},
			async confirm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						let data;
						if (this.isEdit) {
							data = await StaffLadderUpdate(this.form);
						} else {
							data = await StaffLadderAdd(this.form);
						}
						this.$message({
							message: data.data,
							type: "success",
						});

						this.close();
						this.$emit("confirm");
					}
				});
			},
		},
	};
</script>

<style scoped>
	.btn-up {
		position: relative;
	}

	.btn-department {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.btn-role-up {
		position: relative;
	}

	.add-role {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.creat-shop {
		color: #1890ff;
		font-size: 12px;
	}
</style>
