<template>
<el-dialog :title="titleMap[mode]" v-model="visible" size="50%" destroy-on-close @closed="$emit('closed')">
	<el-main>
		<scForm v-model="form" :config="config" :apiObj="apiObj" @onSuccess="onSuccess"></scForm>
	</el-main>
</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data(){
		return {
			mode: 'add',
			titleMap: { add: '添加', edit: '编辑', show: '查看' },
			form: {status: 1},
			config: {
				labelWidth: '120px',
				formItems: [
					{ name: 'title', label: '名称', type: 'string', options: {} },
					{ name: 'parent_id', label: '上级菜单', type: 'scSelectTree', options: {apiObj: this.$API.system.client.menu.list, props: {label: 'title', value: 'id'}} },
					{ name: 'url', label: '链接', type: 'string' },
					{ name: 'position', label: '所属位置', type: 'scSelect', options: {dic: 'client_menu_position'} },
					{ name: 'icon', label: '图标', type: 'scIconSelect' },
					{ name: 'sort', label: '排序', type: 'number', options: {} },
					{ name: 'is_show', label: '是否显示', type: 'boolean', options: {} },
					{ name: 'is_blank', label: '是否新窗口', type: 'boolean', options: {} },
					{ name: 'status', label: '状态', type: 'boolean', options: {} }
				]
			},
			rules: {
				title: [{ required: true, message: '请输入模型标题' }]
			},
			apiObj: this.$API.system.client.menu.add,
			visible: false,
			isSaveing: false
		}
	},
	mounted(){
	},
	methods:{
		open(mode){
			this.mode = mode
			this.visible = true
			this.isSaveing = false
			return this;
		},
		setData(data){
			if(this.mode == 'edit'){
				this.form.id = data.id
				this.apiObj = this.$API.system.client.menu.edit
			}else{
				this.apiObj = this.$API.system.client.menu.add
			}
			this.isSaveing = false
			this.config.formItems.map(item => {
				this.form[item.name] = data[item.name]
			})
		},
		onSuccess(res){
			if(res.code == 1){
				this.$emit('success', res)
				this.visible = false
				this.isSaveing = false
				this.$message.success("操作成功！")
			}else{
				this.$message.error(res.message)
				this.isSaveing = false
			}
		},
	}
}
</script>

<style scoped>
</style>
