<template>
	<div class="app-content setting-coupon-wrap">
		<el-form :model="form" :rules="rules" ref="form" label-width="140px" class="demo-form">
			<el-form-item label="是否启用" prop="name">
				<el-switch v-model="form.switch" active-value="1" inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item label="新客户送" prop="name">
				<div class="flex-center flex-wrap">
					<el-input v-model="form.amount" style="width:60px"></el-input>
					<div class="prompt-text">元优惠券，满</div>
					<el-input v-model="form.miniCost" style="width:60px"></el-input>
					<div class="prompt-text">元可用，领取后</div>
					<el-input v-model="form.duration" style="width:60px"></el-input>
					<div class="prompt-text">天内有效。</div>
				</div>
			</el-form-item>
			<el-form-item>
				<!-- <el-button @click="resetForm('form')">重置</el-button> -->
				<el-button type="primary" @click="submitForm('form')">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'setting-freight',
	data() {
		return {
			form: {
				switch: 1,
				amount: 0,
				miniCost: 0,
				duration: 0
			},
			rules: {}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.$service.coupon.assetDet().then(res => {
				if (this.$util.isEmpty(res)) return;
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = res[i];
				});
			});
		},
		_updateFn() {
			this.$service.coupon.assetUpdate(this.form).then(res => {
				this.$store.dispatch('shopInfo');
				this.$message.success('更新成功！');
			});
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this._updateFn();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

<style lang="scss" scoped>
.setting-coupon-wrap {
	.prompt-text {
		margin: 0 10px;
	}
}
</style>
