<template>
	<div class="app-content setting-freight-wrap">
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="10px"
			class="demo-ruleForm"
		>
			<el-form-item>
				<div class="flex-center">
					<el-input v-model="ruleForm.name" 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="ruleForm.name" style="width: 150px"></el-input>
				</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: 'setting-freight',
	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">
.setting-freight-wrap {
	.prompt-text {
		margin: 0 10px;
	}
}
</style>
