<template>
	<div>
		<el-drawer class="edit-drawer" title="股份修改" 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="number">
					<el-input-number v-model="form.number" controls-position="right" :min="1" @change="handleChange" ></el-input-number>
				</el-form-item>
				<el-form-item label="增加减少" prop="pm" style="margin-bottom: 20px">
					<el-radio v-model="form.pm" label="1">增加</el-radio>
					<el-radio v-model="form.pm" label="2">减少</el-radio>
				</el-form-item>
				<el-form-item label="股份类型" prop="type" style="margin-bottom: 20px">
					<el-radio v-model="form.type" label="1">原始股份</el-radio>
					<el-radio v-model="form.type" label="2">分红股份</el-radio>
				</el-form-item>
				<el-form-item label="备注" prop="remarks">
					<el-input v-model="form.remarks" style="width: 300px" size="small" placeholder="备注"></el-input>
				</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 {
		editShares,
	} from "@/api/Holders";
	export default {
		name: "SharesChange",
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: false,
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
			id: {
				type: [Number, String],
				default: 0,
			},
		},
		data() {
			return {
				isserch: true,
				form: {
					type: '1', //1原始股份2分红股份
					// 股份数量
					number: 1,
					// 股份增加减少
					pm: '1',
					//备注
					remarks: '',
				},
				rules: {
					name: [{
						required: true,
						message: "请输入组名称",
						trigger: "blur"
					}]
				}
			};
		},
		created() {},
		methods: {
			close() {
				this.$emit("close");
			},
			async confirm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '提交中',
							spinner: 'el-icon-loading',
						});
						const upData = {
							"id": this.id, //仓库商品id
							"type": this.form.type, //1原始股份2分红股份
							"number": this.form.number, //数量
							"pm": this.form.pm, //1增加2减少
							"remarks": this.form.remarks //备注
						}
						const data = await editShares(upData);
						loading.close();
						this.$message({
							message: data.data,
							type: "success",
						});
						this.close();
						this.$emit("confirm");
					}
				});
			},
		},
	};
</script>

<style scoped>
	.item {
		margin-right: 5px;
		margin-left: 0 !important;
		margin-bottom: 5px;
	}

	.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>
