<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" :width="500" @closed="$emit('closed')">
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="90px">
			<el-form-item label="上级类别:" prop="pid">
				<el-tree-select v-model="form.pid" :data="treeSelect" lazy :load="loadNode" :props="props" check-strictly></el-tree-select>
			</el-form-item>
			<el-form-item label="类别名称:" prop="name">
				<el-input v-model="form.name" placeholder="类别名称"></el-input>
			</el-form-item>
			<el-form-item label="类别编号:" prop="number">
				<el-input v-model="form.number" placeholder="类别编号"></el-input>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
	export default {
		emits: ["success", "closed"],
		props: {
			treeRefreshTool: { type: Object, default: () => {} }
		},

		data() {
			return {
				mode: "add",
				titleMap: {
					add: "新增类别",
					edit: "编辑类别"
				},
				visible: false,
				isSaveing: false,

				props: {
					label: "name",
					value: "id",
					isLeaf: data => data.id == this.form.id || !data.hasChildren,
					disabled: data => data.id == this.form.id
				},
				treeSelect: [],

				form: {
					id: null,
					pid: "0",
					name: null,
					number: null
				},
				rules: {
					pid: [{ required: true, message: "请选择上级类别" }],
					name: [{ required: true, message: "请输入类别名称" }],
					number: [{ required: true, message: "请输入类别编号" }]
				}
			}
		},

		mounted() {
			this.getSupplierType();
		},

		methods: {
			// 显示
			open(mode = "add") {
				this.mode = mode;
				this.visible = true;
				return this;
			},

			// 表单注入数据
			setData(data) {
				this.form.id = data.id;
				this.form.pid = data.pid;
				this.form.name = data.name;
				this.form.number = data.number;
			},

			async getSupplierType() {
				try {
					const res = await this.$API.supplier.type.get({ pid: 0 });
					this.treeSelect = [{ id: "0", name: "顶级类别", hasChildren: true, children: this.setTypeChild(res) }];
				} catch (error) {
					this.treeSelect = [{ id: "0", name: "顶级类别", hasChildren: true, children: [] }];
				}
			},

			setTypeChild(array) {
				return array.map(item => {
					if (this.treeRefreshTool[item.id]) {
						item.children = this.setTypeChild(this.treeRefreshTool[item.id].res);
					}
					return item;
				});
			},

			async loadNode({ level, data }, resolve) {
				try {
					if (level > 0) {
						const res = await this.$API.supplier.type.get({ pid: data.id });
						resolve(res);
					}
				} catch (error) {
					resolve([]);
				}
			},
			
			// 表单提交方法
			submit() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
						this.isSaveing = true;
						this.$API.supplier.type[this.mode](this.form).then(() => {
							this.isSaveing = false;
							this.$message.success("操作成功");
							this.visible = false;
							this.$emit("success", this.mode);
						}).catch(() => this.isSaveing = false);
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.el-form {
  padding: 10px 30px;
}

@media (max-width: 992px) {
  .el-form {
    padding: 10px;
  }
}
</style>