<template>
	<div class="app-content setting-freight-wrap">
		<el-form :model="form" :rules="rules" ref="form" label-width="10px" class="demo-form">
			<el-form-item>
				<div class="flex-center">
					<el-input v-model="form.first" style="width: 150px"></el-input>
					<div class="prompt-text">
						<!-- <i class="el-icon-warning" style="margin-right: 4px"></i> -->
						<span>公里内免运费，超过 5 公里每增加1公里，运费增加</span>
					</div>
					<el-input v-model="form.add" style="width: 150px"></el-input>
				</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: 'setting-freight',
	data() {
		return {
			form: {
				first: '',
				add: ''
			},
			rules: {}
		};
	},
	computed: {
		...mapGetters({ shopInfo: 'shopInfo' })
	},
	watch: {
		shopInfo() {
			if (!this.$util.isEmpty(this.shopInfo)) {
				this.form.first = this.shopInfo.extend.freightFirst;
				this.form.add = this.shopInfo.extend.freightAdd;
			}
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			if (!this.$util.isEmpty(this.shopInfo)) {
				this.form.first = this.shopInfo.extend.freightFirst;
				this.form.add = this.shopInfo.extend.freightAdd;
			}
		},
		_updateFn() {
			this.$service.single.setFreight(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">
.setting-freight-wrap {
	.prompt-text {
		margin: 0 10px;
	}
}
</style>
