<template>
	<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
			<el-form-item prop="paramCode" :label="$t('params.paramCode')">
				<el-input v-model="dataForm.paramCode" :placeholder="$t('params.paramCode')"></el-input>
			</el-form-item>
			<el-form-item prop="paramValue" :label="$t('params.paramValue')">
				<el-input v-model="dataForm.paramValue" :placeholder="$t('params.paramValue')"></el-input>
			</el-form-item>
			<el-form-item prop="remark" :label="$t('params.remark')">
				<el-input v-model="dataForm.remark" :placeholder="$t('params.remark')"></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
	data() {
		return {
			visible: false,
			dataForm: {
				id: '',
				paramCode: '',
				paramValue: '',
				remark: ''
			}
		}
	},
	computed: {
		dataRule() {
			return {
				paramCode: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
				paramValue: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
			}
		}
	},
	methods: {
		// destroy dialog
		handleDestroyDialog() {
			setTimeout(() => {
				this.addOrUpdateVisible= false
			}, /** after dialog animated */ 200);
		},
		init() {
			this.visible = true
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
				if (this.dataForm.id) {
					this.getInfo()
				}
			})
		},
		// 获取信息
		getInfo() {
			this.$http
				.get(this.$http.adornUrl(`/sys/params/${this.dataForm.id}`))
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg)
					}
					this.dataForm = {
						...this.dataForm,
						...res.data
					}
				})
				.catch(() => {})
		},
		// 表单提交
		dataFormSubmitHandle: debounce(
			function() {
				this.$refs['dataForm'].validate(valid => {
					if (!valid) {
						return false
					}
					this.$http[!this.dataForm.id ? 'post' : 'put'](this.$http.adornUrl('/sys/params'), this.dataForm)
						.then(({ data: res }) => {
							if (res.code !== 0) {
								return this.$message.error(res.msg)
							}
							this.$message({
								message: this.$t('prompt.success'),
								type: 'success',
								duration: 500,
								onClose: () => {
									this.visible = false
									this.$emit('refreshDataList')
								}
							})
						})
						.catch(() => {})
				})
			},
			1000,
			{ leading: true, trailing: false }
		)
	}
}
</script>
