<template>
	<div class="app-content auto-price-wrap">
		<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
			<el-form-item label="开启自动涨价" prop="riseSwitch">
				<el-switch
					v-model="form.riseSwitch"
					active-value="1"
					inactive-value="0"
				></el-switch>
			</el-form-item>
			<el-form-item label="要涨价节日" prop="festIdList">
				<el-checkbox
					v-model="form.festIdList"
					:label="item.id"
					border
					v-for="(item, index) in festData"
					:key="item.id"
					size="small"
					>{{ item.name }}</el-checkbox
				>
			</el-form-item>
			<el-form-item label="涨价方式" prop="riseType">
				<el-radio-group v-model="form.riseType">
					<el-radio label="0">按百分比</el-radio>
					<el-radio label="1">按金额</el-radio>
				</el-radio-group>
			</el-form-item>
			<template v-if="form.riseType == 0">
				<el-form-item label="比例" prop="riseAmount">
					<el-input
						v-model="form.riseAmount"
						style="width: 250px"
						placeholder="涨价10%，请输入10"
					></el-input>
				</el-form-item>
			</template>
			<template v-else>
				<el-form-item label="金额" prop="riseAmount">
					<el-input
						v-model="form.riseAmount"
						style="width: 250px"
						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('form')">重置</el-button> -->
				<el-button type="primary" @click="submitForm('form')">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'auto-price',
	data() {
		return {
			form: {
				riseSwitch: '0',
				riseType: '0',
				festIdList: [],
				riseAmount: ''
			},
			rules: {}
		};
	},
	computed: {
		...mapGetters({ festData: 'festival' })
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.$store.dispatch('getFestival');
			this._getData();
		},
		_getData() {
			this.$service.goods.getAutoPrice().then(res => {
				if (this.$util.isEmpty(res.data)) return;
				res.data.festIdList = res.data.festIdList.map(e => e + '');
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = res.data[i];
				});
			});
		},
		setPrice() {
			// if (this.form.festIdList.length == 0) {
			// 	this.$message.error('请先选择节日!');
			// 	return false;
			// }
			// if (!this.form.riseAmount) {
			// 	this.$message.error('请先输入比例或者金额!');
			// 	return false;
			// }
			this.$service.goods.setAutoPrice(this.form).then(res => {
				this.$message.error('更新成功!');
			});
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.setPrice();
				} 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>
