<template>
	<div class="app-content reward-set-wrap">
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="150px"
			class="demo-ruleForm"
		>
			<el-form-item label="开启状态" prop="name">
				<el-switch
					v-model="ruleForm.switch"
					active-value="1"
					inactive-value="0"
				></el-switch>
			</el-form-item>
			<el-form-item label="邀请成功下单奖励" prop="resource">
				<el-input v-model="ruleForm.prize"></el-input>
			</el-form-item>
			<el-form-item label="新人可领取" prop="name">
				<div class="flex-center flex-wrap">
					<el-input v-model="ruleForm.amount" style="width: 150px"></el-input>
					<div class="prompt-text">元优惠券，满</div>
					<el-input v-model="ruleForm.miniCost" style="width: 150px"></el-input>
					<div class="prompt-text">元可以使用，领取后</div>
					<el-input v-model="ruleForm.duration" style="width: 150px"></el-input>
					<div class="prompt-text">天内有效。</div>
				</div>
			</el-form-item>
			<el-form-item>
				<div class="app-color-3">
					提示：奖励额度可以比新人领券高一此，这样可以吸引老客户邀请新人，新人也更愿意到店消费。
				</div>
			</el-form-item>
			<el-form-item>
				<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'reward-set',
	data() {
		return {
			ruleForm: {
				switch: '0',
				prize: '',
				amount: '',
				miniCost: '',
				duration: ''
			},
			rules: {}
		};
	},
	created() {
		this._getDet();
	},
	methods: {
		_getDet() {
			this.$service.invite.assetDetail().then(res => {
				if (this.$util.isEmpty(res)) return;
				Object.keys(this.ruleForm).forEach((i, index) => {
					this.ruleForm[i] = res[i];
				});
			});
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$service.invite.assetDetail(this.ruleForm).then(res => {
						this.$message.success('设置成功!');
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>
<style lang="scss">
.reward-set-wrap {
	.prompt-text {
		margin: 0 10px;
	}
	.el-checkbox.is-bordered.el-checkbox--small {
		margin-left: 0;
		margin-right: 10px;
		&:nth-child(4n + 4) {
			margin-right: 0;
		}
	}
}
</style>
