<template>
	<div class="app-content auto-price-wrap">
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="100px"
			class="demo-ruleForm"
		>
			<el-form-item label="开启自动涨价" prop="name">
				<el-switch v-model="ruleForm.delivery"></el-switch>
			</el-form-item>
			<el-form-item label="要涨价节日" prop="name">
				<el-checkbox
					v-model="ruleForm.status"
					label="七夕节"
					border
					v-for="(item, index) in 4"
					:key="index"
					size="small"
				></el-checkbox>
			</el-form-item>
			<el-form-item label="涨价方式" prop="resource">
				<el-radio-group v-model="ruleForm.resource">
					<el-radio label="按百分比"></el-radio>
					<el-radio label="按金额"></el-radio>
				</el-radio-group>
			</el-form-item>
			<template v-if="true">
				<el-form-item label="比例" prop="resource">
					<el-input v-model="ruleForm.name" placeholder="涨价10%，请输入10"></el-input>
				</el-form-item>
			</template>
			<template v-else>
				<el-form-item label="金额" prop="resource">
					<el-input v-model="ruleForm.name" placeholder="涨价80元请输入80"></el-input>
				</el-form-item>
			</template>
			<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: 'auto-price',
	data() {
		return {
			ruleForm: {},
			rules: {}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					alert('submit!');
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>
<style lang="scss">
.auto-price-wrap {
	.el-checkbox.is-bordered.el-checkbox--small {
		margin-left: 0;
		margin-right: 10px;
		&:nth-child(4n + 4) {
			margin-right: 0;
		}
	}
}
</style>
