<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />

		<el-table
			:header-cell-style="{
				background: '#F2F4F9',
				color: '#606266',
			}"
			border
			style="width: 100%"
			v-if="refreshTable"
			v-loading="loading"
			:data="deptList"
			row-key="id"
			:default-expand-all="isExpandAll"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column
				prop="name"
				label="部门名称"
				min-width="260"></el-table-column>
			<el-table-column
				prop="leader"
				label="负责人"
				:formatter="userNicknameFormat"
				min-width="120" />
			<el-table-column prop="sort" label="排序" width="200"></el-table-column>
			<el-table-column prop="status" label="状态" width="100">
				<template v-slot="scope">
					<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
				</template>
			</el-table-column>
			<el-table-column
				label="创建时间"
				align="center"
				prop="createTime"
				min-width="200">
				<template v-slot="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				width="160"
				class-name="small-padding fixed-width">
				<template v-slot="scope">
					<el-button
						type="text"
						@click="handleAdd(scope.row)"
						v-hasPermi="['system:dept:create']">
						新增
					</el-button>
					<span
							v-hasPermi="['system:dept:update']"
							style="margin: 0 4px; font-size: 18px; color: #e5e7eb"
							>|</span
						>
					<el-button
						type="text"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['system:dept:update']">
						<svg-icon icon-class="table_edit" style='font-size: 16px;'></svg-icon>
					</el-button>
					<span
						 v-if="scope.row.parentId !== 0"
							v-hasPermi="['system:dept:delete']"
							style="margin: 0 4px; font-size: 18px; color: #e5e7eb"
							>|</span
						>
					<el-button
						v-if="scope.row.parentId !== 0"
						type="text"
						@click="handleDelete(scope.row)"
						v-hasPermi="['system:dept:delete']">
						<svg-icon icon-class="table_delete"></svg-icon>
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加或修改菜单对话框 -->
		<el-dialog :visible.sync="open" width="800px" append-to-body class="dialog">
			<template #title>
				<slot name="title">
					<div class="titleStyle">{{ title }}</div>
				</slot>
			</template>
			<slot />
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="上级部门" prop="parentId">
							<treeselect
								v-model="form.parentId"
								:options="deptOptions"
								:normalizer="normalizer"
								placeholder="选择上级部门" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="部门名称" prop="name">
							<el-input v-model="form.name" placeholder="请输入部门名称" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="显示排序" prop="sort">
							<el-input-number
								v-model="form.sort"
								controls-position="right"
								:min="0" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="负责人" prop="leaderUserId">
							<el-select
								v-model="form.leaderUserId"
								placeholder="请输入负责人"
								clearable
								style="width: 100%">
								<el-option
									v-for="item in users"
									:key="item.id"
									:label="item.nickname"
									:value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="phone">
							<el-input
								v-model="form.phone"
								placeholder="请输入联系电话"
								maxlength="11" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email">
							<el-input
								v-model="form.email"
								placeholder="请输入邮箱"
								maxlength="50" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="部门状态" prop="status">
							<el-radio-group v-model="form.status">
								<el-radio
									v-for="dict in statusDictDatas"
									:key="parseInt(dict.value)"
									:label="parseInt(dict.value)">
									{{ dict.label }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
        <el-button class="btnTextStyle"  @click="cancel">取 消</el-button>
				<el-button type="primary" class="btnTextStyle"  @click="submitForm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	listDept,
	getDept,
	delDept,
	addDept,
	updateDept,
} from '@/api/system/dept';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

import { CommonStatusEnum } from '@/utils/constants';
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import { listSimpleUsers } from '@/api/system/user';

export default {
	name: 'SystemDept',
	components: { Treeselect },
	data() {
		return {
			// 遮罩层
			loading: true,
			// 显示搜索条件
			showSearch: true,
			// 表格树数据
			deptList: [],
			// 部门树选项
			deptOptions: [],
			// 用户下拉列表
			users: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 是否展开，默认全部展开
			isExpandAll: true,
			// 重新渲染表格状态
			refreshTable: true,
			// 是否展开
			expand: false,
			// 查询参数
			queryParams: {
				name: undefined,
				status: undefined,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [
					{ required: true, message: '部门名称不能为空', trigger: 'blur' },
				],
				sort: [
					{ required: true, message: '显示排序不能为空', trigger: 'blur' },
				],
				email: [
					{
						type: 'email',
						message: "'请输入正确的邮箱地址",
						trigger: ['blur', 'change'],
					},
				],
				phone: [
					{
						pattern:
							/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
						message: '请输入正确的手机号码',
						trigger: 'blur',
					},
				],
				status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
			},
			formConfig: [
				{
					type: 'input',
					label: '部门名称',
					placeholder: '部门名称',
					param: 'name',
				},
				{
					type: 'select',
					label: '状态',
					selectOptions: getDictDatas(DICT_TYPE.COMMON_STATUS),
					param: 'status',
					defaultSelect: '',
					valueField: 'value',
					labelField: 'label',
					filterable: true,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: this.$auth.hasPermi('system:dept:create') ? 'separate' : '',
				},
				{
					type: this.$auth.hasPermi('system:dept:create') ? 'button' : '',
					btnName: '新增',
					name: 'add',
					color: 'success',
					plain: true,
				},
			],

			// 枚举
			CommonStatusEnum: CommonStatusEnum,
			// 数据字典
			statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
		};
	},
	created() {
		this.getList();
		// 获得用户列表
		listSimpleUsers().then((response) => {
			this.users = response.data;
		});
	},
	methods: {
		buttonClick(val) {
			if (val.btnName === 'search') {
				this.queryParams.name = val.name;
				this.queryParams.status = val.status;
				this.getList();
			} else {
				this.handleAdd();
			}
		},
		/** 查询部门列表 */
		getList() {
			this.loading = true;
			listDept(this.queryParams).then((response) => {
				this.deptList = this.handleTree(response.data, 'id');
				this.loading = false;
			});
		},
		/** 转换部门数据结构 */
		normalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children;
			}
			return {
				id: node.id,
				label: node.name,
				children: node.children,
			};
		},
		// 用户昵称展示
		userNicknameFormat(row, column) {
			if (!row.leaderUserId) {
				return '未设置';
			}
			for (const user of this.users) {
				if (row.leaderUserId == user.id) {
					return user.nickname;
				}
			}
			return '未知【' + row.leaderUserId + '】';
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				parentId: undefined,
				name: undefined,
				sort: undefined,
				leaderUserId: undefined,
				phone: undefined,
				email: undefined,
				status: CommonStatusEnum.ENABLE,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 新增按钮操作 */
		handleAdd(row) {
			this.reset();
			if (row !== undefined) {
				this.form.parentId = row.id;
			}
			this.open = true;
			this.title = '添加部门';
			listDept().then((response) => {
				this.deptOptions = this.handleTree(response.data, 'id');
			});
		},
		/** 展开/折叠操作 */
		toggleExpandAll() {
			this.refreshTable = false;
			this.isExpandAll = !this.isExpandAll;
			this.$nextTick(() => {
				this.refreshTable = true;
			});
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			getDept(row.id).then((response) => {
				this.form = response.data;
				if (this.form.parentId === 0) {
					// 无父部门时，标记为 undefined，避免展示为 Unknown
					this.form.parentId = undefined;
				}
				this.open = true;
				this.title = '修改部门';
			});
			listDept(row.id).then((response) => {
				this.deptOptions = this.handleTree(response.data, 'id');
			});
		},
		/** 提交按钮 */
		submitForm: function () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id !== undefined) {
						updateDept(this.form).then((response) => {
							this.$modal.msgSuccess('修改成功');
							this.open = false;
							this.getList();
						});
					} else {
						addDept(this.form).then((response) => {
							this.$modal.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.$modal
				.delConfirm(row.name)
				.then(function () {
					return delDept(row.id);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
	},
};
</script>

<style scoped>
.app-container >>> .el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
.dialog >>> .el-dialog__body {
	padding: 30px 24px;
}
.dialog >>> .el-dialog__header {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.85);
	font-weight: 500;
	padding: 13px 24px;
	border-bottom: 1px solid #e9e9e9;
}
.dialog >>> .el-dialog__header .titleStyle::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 16px;
	background-color: #0b58ff;
	border-radius: 1px;
	margin-right: 8px;
	position: relative;
	top: 2px;
}
.dialog >>> .btnTextStyle {
	letter-spacing: 6px;
	padding: 9px 10px 9px 16px;
	font-size: 14px;
}
</style>
