<template>
<el-dialog :title="titleMap[mode]" v-model="visible" size="50%" destroy-on-close @closed="$emit('closed')">
	<el-main>
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="名称" prop="title">
				<el-input v-model="form.title" placeholder="请输入名称" clearable />
			</el-form-item>
			<el-form-item label="编号" prop="code">
				<el-input v-model="form.code" placeholder="请输入编号" clearable />
			</el-form-item>
			<el-form-item label="上级编号" prop="parent_code">
				<el-input v-model="form.parent_code" placeholder="请输入上级编号" clearable />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="form.status" placeholder="请选择状态" clearable>
					<el-option v-for="item in config_status" :key="item.value" :value="item.value" :label="item.label" />
				</el-select>
			</el-form-item>
		</el-form>
	</el-main>
	<template #footer>
		<el-button type="primary" @click="onSubmit" :loading="isSaveing">确人提交</el-button>
		<el-button @click="visible = false;isSaveing = false">取消</el-button>
	</template>
</el-dialog>
</template>

<script>
export default{
	data(){
		return {
			visible: false,
			isSaveing: false,
			mode: 'add',
			titleMap: {
				add: '添加',
				edit: '编辑',
				show: '显示'
			},
			config_status: [
				{label: '启用', value: 1},
				{label: '禁用', value: 0}
			],
			form: {},
			rules: {
				title: [{required: true, message: '请输入配置标题', trigger: 'blur'}],
			}
		}
	},
	mounted(){
	},
	methods: {
		//显示
		open(mode = 'add'){
			this.mode = mode
			this.visible = true;
			return this
		},
		async onSubmit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if(valid){
					this.isSaveing = true;
					let res = null
					if(this.mode == 'add'){
						res = await this.$API.system.area.add.post(this.form)
					}else{
						res = await this.$API.system.area.edit.post(this.form)
					}
					if(res.code == 1){
						this.$message.success(res.message);
						this.visible = false;
						this.$emit('success')
					}else{
						this.$message.error(res.message);
					}
					this.isSaveing = false;
				}
			})
		},
		setData(data) {
			this.form = data
			this.form.status = data.status || 1
		}
	}
}
</script>
