<template>
	<el-header class="aminui-main-container__query-header">
		<scTitle>供应商类别</scTitle>
		<el-form :model="params" @submit.prevent>
			<el-row :gutter="15">
				<el-col :lg="8" :md="11" :xs="24">
					<el-form-item>
						<el-input v-model="params.nameLike" clearable placeholder="请输入类别名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="8" :xs="24">
					<el-form-item>
						<el-button-group>
							<el-button type="primary" icon="el-icon-search" @click="reloadTable">查询</el-button>
							<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
						</el-button-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-header>

	<el-container class="aminui-main-container__table-main">
		<el-header>
			<div class="left-panel">
				<el-button type="primary" @click="table_add">新增供应商类型</el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable class="scTable" ref="table" row-key="id" :apiObj="api" :params="params" :column="column" tableName="supplierTypeTable" hidePagination lazy :lazyProps="lazyProps" :load="(row, treeNode, resolve) => loadNode(row, resolve)" @expand-change="expandChange">
				<template #createTime="scope"><span v-time="scope.row.createTime"></span></template>
				<el-table-column label="操作" fixed="right" align="center" width="120">
					<template #default="scope">
						<el-button text @click="table_edit(scope.row)">编辑</el-button>
						<el-divider direction="vertical" />
						<el-button text @click="table_del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<type-dialog v-if="dialog" ref="typeDialog" :treeRefreshTool="tableTreeRefreshTool" @success="reloadTable" @closed="dialog = false"></type-dialog>
</template>

<script>
	import config from "@/config/table";
	import typeDialog from "./typeDialog";

	export default {
		props: {
			title: { type: String, default: "" },
		},

		components: {
			typeDialog
		},

		data() {
			return {
				api: null,
				params: {
					pid: "0",
					nameLike: null
				},
				lazyProps: {
                    hasChildren: { key: "hasChildren", value: data => data.hasChildren },
                    children: { key: "children", value: () => [] }
                },
				column: [
					{ label: "类别名称", prop: "name" },
					{ label: "类别编号", prop: "number"}
				],
				tableTreeRefreshTool: {},
				
				dialog: false
			}
		},

		methods: {
			async loadNode(row, resolve) {
				const res = await this.$API.supplier.type.get(Object.assign({}, this.params, { pid: row.id }));
				this.tableTreeRefreshTool[row.id] = { resolve, expandCount: 0, res };
                resolve(config.lazyData(res, this.lazyProps));
            },

			expandChange(row, expanded) {
				const curr = this.tableTreeRefreshTool[row.id];
				curr.expandCount++;
				if (expanded && curr.expandCount > 1 && !curr.prevStatus) {
					this.$API.supplier.type.get(Object.assign({}, this.params, { pid: row.id })).then(res => {
						curr.resolve(config.lazyData(res, this.lazyProps));
					});
				}
				curr.prevStatus = expanded;
			},

			// 本地更新数据
			reloadTable(mode = "add") {
				const page = mode == "edit" ? this.$refs.table.currentPage : 1;
				this.$refs.table.reload(this.params, page);
				for (const id in this.tableTreeRefreshTool) {
					this.$refs.table.toggleRowExpansion({ id }, false);
				}
			},

			reset() {
				this.params.nameLike = null;
				this.reloadTable();
			},

			// 添加类别类别
			table_add() {
				this.dialog = true;
				this.$nextTick(() => this.$refs.typeDialog.open());
			},

			// 编辑类别
			table_edit(row) {
				this.dialog = true;
				this.$nextTick(() => this.$refs.typeDialog.open("edit").setData(row));
			},

			// 删除类别
			table_del({ id, pid }) {
				this.$confirm("确认删除当前供应商类别吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.supplier.type.del({ id }).then(() => {
						this.$message.success("操作成功");
                        if (pid != "0") this.$refs.table.$refs.scTable.store.states.lazyTreeNodeMap.value[pid] = this.$refs.table.$refs.scTable.store.states.lazyTreeNodeMap.value[pid].filter(l => l.id != id);
						this.reloadTable();
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container__query-header {
  flex-direction: column;

  .sc-title {
    margin-bottom: 15px;
    padding-left: 0;

    &::before {
      display: none;
    }
  }
}
</style>