<template>
	<el-container 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" :data="aside.list" :props="aside.props" highlight-current :filter-node-method="asideFilterNode" @node-click="data => asideNodeClick(data)">
							<template #default="{ node, data }">
								<span :id="data.id" class="custom-tree-node">
									<scTooltip :content="data.description" :spacing="112"></scTooltip>
									<span class="code overflow-ellipsis">{{ node.label }}</span>
									<el-button-group class="do">
										<el-button size="small" icon="el-icon-edit" @click.stop="aside_edit(data)"></el-button>
										<el-button size="small" icon="el-icon-delete" @click.stop="aside_del(data)"></el-button>
									</el-button-group>
								</span>
							</template>
						</el-tree>
					</el-scrollbar>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="aside_add">新增</el-button>
				</el-footer>
			</el-container>
		</el-aside>

        <el-container class="is-vertical">
			<!-- 供应商规则 -->
			<evaluate-rules v-if="table.dictId == 1" :title="table.dictDesc" ref="evaluateRules"></evaluate-rules>
			<!-- 供应商类型 -->
			<supplier-type v-else-if="table.dictId == 15" :title="table.dictDesc" ref="supplierType"></supplier-type>
			<!-- 业务审批流程code ==> formId -->
			<approve-info v-else-if="table.dictId == 21" :title="table.dictDesc" ref="approveInfo"></approve-info>
			
			<template v-else>
				<el-header class="aminui-main-container__query-header">
					<scTitle border>{{ table.dictDesc || "字典详情" }}</scTitle>
				</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="dictDetailTable">
							<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>
			</template>
		</el-container>
	</el-container>

    <dist-dialog v-if="dialog.dist" ref="distDialog" @success="getAsideNode" @closed="dialog.dist = false"></dist-dialog>
    <detail-dialog v-if="dialog.detail" ref="detailDialog" @success="reloadTable" @closed="dialog.detail = false"></detail-dialog>
</template>

<script>
	import distDialog from "./dialog";
	import detailDialog from "./detail";
	import evaluateRules from "./components/rules";
	import supplierType from "./components/type";
	import approveInfo from "./components/approveInfo";

	export default {
		components: {
			distDialog,
			detailDialog,
			evaluateRules,
			supplierType,
			approveInfo
		},

		data() {
			return {
				aside: {
					loading: false,
					list: [],
					props: {
						label: "name",
						isLeaf: true
					},
					filterText: null
				},

				table: {
					column: [
						{ label: "字典标签", prop: "label", width: "400", align: "center" },
						{ label: "字典值", prop: "value", width: "200", align: "center" },
						{ label: "排序", prop: "dictSort", width: "150", align: "center", sortable: true }
					],
					api: null,
					params: {
						dictName: null
					},
					list: [],
					dictId: null,
					dictDesc: null
				},

				dialog: {
					dist: false,
					detail: false
				}
			}
		},

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

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

		methods: {
			async getAsideNode() {
				try {
					this.aside.loading = true;
					const res = await this.$API.system.dict.all();
					this.aside.loading = false;
					this.aside.list = res.slice();
				} catch (error) {
					this.aside.loading = false;
					this.aside.list = [];
				}
			},

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

			asideNodeClick(data, scroll = false) {
				this.table.params.dictName = data.name;
				this.table.dictId = data.id;
				this.table.dictDesc = data.description;
				
				this.$refs.aside.setCurrentKey(data.id);
				scroll && document.getElementById(data.id) && document.getElementById(data.id).scrollIntoView({ block: "center" });

				this.$nextTick(() => {
					if (data.id == 1) this.$refs.evaluateRules.reloadData();
					else if (data.id == 15) this.$refs.supplierType.api = this.$API.supplier.type;
					else if (data.id == 21) this.$refs.approveInfo.api = this.$API.system.approveInfo;
                    else {
						if (!this.table.api) this.table.api = this.$API.system.dictDetail;
						else this.reloadTable();
					}
				});
			},

			// 新增字典
			aside_add() {
				this.dialog.dist = true;
				this.$nextTick(() => this.$refs.distDialog.open());
			},

			// 编辑字典
			aside_edit(row) {
				this.dialog.dist = true;
				this.$nextTick(() => this.$refs.distDialog.open("edit").setData(row));
			},

			// 删除字典
		 	aside_del({ id }) {
				this.$confirm("确认删除当前字典吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.system.dict.del([id]).then(() => {
						this.$message.success("操作成功");
						this.getAsideNode();
					}).catch(() => {});
				}).catch(() => {});
			},

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

			// 添加字典项
			table_add() {
				if (!this.table.dictId) return this.$message.warning("请选择左侧字典");

				this.dialog.detail = true;
				this.$nextTick(() => this.$refs.detailDialog.open().setData({ dict: { id: this.table.dictId } }));
			},

			// 编辑字典项
			table_edit(row) {
				this.dialog.detail  = true;
				this.$nextTick(() => this.$refs.detailDialog.open("edit").setData(row));
			},

			// 删除字典项
			table_del({ id }) {
				this.$confirm(`确认删除当前${this.table.dictDesc}吗？`, "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.system.dictDetail.del(id).then(() => {
						this.$message.success("操作成功");
						this.reloadTable();
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container {
  .aminui-main-container__query-header {
    margin-bottom: 0;

    .sc-title {
      flex-basis: 100%;
      margin-bottom: 15px;
      padding-left: 0;

      &::before {
        display: none;
      }
    }
  }

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

    .aminui-main-container__query-header {
      flex-direction: column;
    }

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

      .el-tree {
        .el-tree-node .el-tree-node__content {
          .custom-tree-node {
            justify-content: space-between;
            width: calc(100% - 20px);
            padding-left: 10px;
            padding-right: 0;

            :deep(span.sc-tooltip-content) {
              max-width: calc(100% - 112px) !important;
            }

            .code {
              max-width: 100px;
              font-size: 12px;
              color: #999;
            }

            .do {
              display: none;

              i {
                margin-left: 5px;
                color: #999;

                &:hover {
                  color: #333;
                }
              }
            }
          }

          &:hover .custom-tree-node {
            padding-right: 6px;

            .code {
              display: none;
            }

            .do {
              display: flex;
            }
          }
        }

        :deep(.el-tree-node .el-tree-node__expand-icon.is-leaf) {
          display: none;
        }
      }
    }
  }

  .aminui-main-container__table-main {
    padding-top: 0;
  }
}

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

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