<template>
    <supplier-save v-if="dialog" ref="supplierSave" @success="reloadTable" @closed="dialog = false"></supplier-save>
	
	<el-container v-else class="aminui-main-container">
		<el-aside v-loading="aside.loading" width="310px">
			<el-container>
				<el-header class="aminui-main-container__query-header">
					<scTitle>服务类别</scTitle>
					<el-form @submit.prevent>
						<el-form-item>
							<el-input v-model="aside.filterText" clearable placeholder="输入要检索的类别名称"></el-input>
						</el-form-item>
					</el-form>
				</el-header>
				<el-main class="nopadding">
					<el-scrollbar>
						<el-tree ref="aside" node-key="id" :props="aside.props" lazy :load="loadNode" highlight-current :expand-on-click-node="false" :filter-node-method="asideFilterNode" @node-click="data => asideNodeClick(data)">
							<template #default="{ node, data }">
								<span :id="data.id" class="custom-tree-node">
									<scTooltip :content="node.label"></scTooltip>
								</span>
							</template>
						</el-tree>
					</el-scrollbar>
				</el-main>
			</el-container>
		</el-aside>

		<el-container>
			<el-header class="aminui-main-container__query-header">
				<scTitle>供应商列表</scTitle>
				<el-form :model="table.params">
					<el-row :gutter="30">
						<el-col :lg="10" :xs="24">
							<el-form-item label="企业编码:">
								<el-input v-model="table.params.supplierNoLike" clearable placeholder="请输入企业编码"></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="10" :xs="24">
							<el-form-item label="供应商名称:">
								<el-input v-model="table.params.supplierNameLike" clearable placeholder="请输入供应商名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="10" :xs="24">
							<el-form-item label="主要联系人:">
								<el-input v-model="table.params.contactNameLike" clearable placeholder="请输入联系人关键字"></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="10" :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="table.api" :params="table.params" :column="table.column" tableName="supplierTable" pageParams="current">
						<el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                    	<template #supplierType="scope">{{ formatType(scope.row.supplierTypeId) }}</template>
                    	<template #supplierName="scope">
                            <el-link type="blue" @click="table_edit(scope.row, 'detail')">{{ scope.row.supplierName }}</el-link>
                        </template>
						<el-table-column label="操作" fixed="right" align="center" width="200">
							<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>
		</el-container>
	</el-container>
</template>

<script>
	import { column } from "./main";
	import supplierSave from "./save";

	export default {
		components: {
			supplierSave
		},

		data() {
			return {
				aside: {
					loading: false,
					list: [],
					props: {
						label: "name",
						isLeaf: data => !data.hasChildren
					},
					filterText: null
				},

				table: {
					column,
					api: this.$API.supplier.list,
					params: {
                		orderBy: "createTime_desc",
						supplierTypeId: null,
						supplierNoLike: null,
						supplierNameLike: null,
						contactNameLike: null
					}
				},

				dialog: false
			}
		},

		watch: {
			"aside.filterText"(val) {
				this.$refs.aside.filter(val);
			}
		},

		methods: {
			formatType(value) {
				return this.aside.list.find(l => l.id == value) && this.aside.list.find(l => l.id == value).name || "";
			},

			async loadNode({ level, data }, resolve) {
				const pid = level > 0 && data.id || 0;
				if (level == 0) {
					this.aside.loading = true;
					this.aside.list = await this.$API.supplier.type.get();
					this.aside.loading = false;
				}
				resolve(this.aside.list.filter(r => r.pid == pid));
			},

			asideFilterNode(value, data) {
				if (!value) return true;
				return data.name.indexOf(value) !== -1;
			},

			asideNodeClick(data, scroll = false) {
				if (this.table.params.supplierTypeId == data.id) {
					this.table.params.supplierTypeId = null;
					this.$refs.aside.setCurrentKey(null);
				} else this.table.params.supplierTypeId = data.id;

				scroll && document.getElementById(data.id) && document.getElementById(data.id).scrollIntoView({ block: "center" });
				this.reloadTable();
			},

			// 本地更新数据
			reloadTable(mode = "add") {
				const page = mode == "edit" && this.$refs.table.currentPage || 1;
				this.$refs.table.reload(this.table.params, page);
			},

			reset() {
				this.table.params.supplierNoLike = null;
				this.table.params.supplierNameLike = null;
				this.table.params.contactNameLike = null;
				this.reloadTable();
			},

			// 添加供应商
			table_add() {
				this.dialog = true;
				this.$nextTick(() => this.$refs.supplierSave.open());
			},

			// 编辑供应商
			table_edit(row, mode = "edit") {
				this.dialog = true;
				this.$nextTick(() => this.$refs.supplierSave.open(mode).setData(row));
			},

			// 删除供应商
			table_del({ id }) {
				this.$confirm("确认删除当前供应商吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.supplier.list.del({ id }).then(() => {
						this.$message.success("操作成功");
						this.reloadTable();
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>

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

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

      &::before {
        display: none;
      }
    }

    .el-button-group {
      margin-left: 0;
    }
  }

  .el-aside {
    margin-right: 15px;

    .aminui-main-container__query-header {
      margin-bottom: 0;
    }

    .el-main {
      padding-left: 10px;
      padding-bottom: 20px;

      .el-tree .el-tree-node .el-tree-node__content {
        .folder-icon {
          color: var(--el-color-blue);
        }

        .custom-tree-node {
          width: calc(100% - 44px);
          margin-left: 6px;
        }
      }
    }
  }

  .el-link.el-link--blue {
    --el-link-text-color: var(--el-color-blue);
    --el-link-hover-text-color: var(--el-color-blue-light-3);
    --el-link-disabled-text-color: var(--el-color-blue-light-5);
  }
}

@media (max-width: 992px) {
  .aminui-main-container {
    .el-aside {
      margin-right: 0;

      .el-main {
        padding-left: 15px;
        padding-right: 15px;
      }
    }
  }
}
</style>