<template>
	<el-container>
		<el-aside width="300px" v-loading="showGrouploading">
			<el-container>
				<el-header style="border-bottom: none">
					<el-input
						placeholder="输入关键字进行过滤"
						v-model="groupFilterText"
						clearable
					></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree
						ref="group"
						class="menu"
						node-key="id"
						:data="group"
						:current-node-key="''"
						default-expand-all
						:highlight-current="true"
						:expand-on-click-node="false"
						:filter-node-method="groupFilterNode"
						@node-click="groupClick"
					></el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button
						type="primary"
						icon="el-icon-plus"
						v-auth="'user.create'"
						@click="add"
					></el-button>
					<!-- <el-button
						type="danger"
						plain
						icon="el-icon-delete"
						:disabled="selection.length == 0"
						@click="batch_del"
					></el-button> -->
					<!-- <el-button
						type="primary"
						plain
						:disabled="selection.length == 0"
					>密码重置
					</el-button> -->
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input
							v-model="query.search"
							placeholder="登录账号 / 姓名"
							clearable
						></el-input>
						<el-button
							type="primary"
							icon="el-icon-search"
							@click="handleQuery"
						></el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable
					ref="table"
					:apiObj="apiObj"
					stripe
					remoteSort
					remoteFilter
					@selection-change="selectionChange"
				>
					<!-- <el-table-column
						type="selection"
						width="50"
					></el-table-column> -->
					<el-table-column
						label="ID"
						prop="id"
					></el-table-column>
					<el-table-column
						label="姓名"
						prop="name"
					></el-table-column>
					<el-table-column
						label="登录账号"
						prop="username"
					></el-table-column>
					<el-table-column
						label="是否启用"
						prop="is_active"
					>
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.is_active">启用</el-tag>
						<el-tag v-else type="danger">禁用</el-tag>
					</template>
					</el-table-column>
					<!--sortable="custom"-->
					<el-table-column
						label="加入时间"
						prop="create_time"
						min-width="100"
						sortable="custom"
					></el-table-column>
					<el-table-column
						label="操作"
						fixed="right"
						align="center"
						width="200"
					>
						<template #default="scope">
							<el-button
								type="primary"
								link
								size="small"
								@click="formSetting(scope.row)"
								v-auth="'user.create'"
							>
								设置
							</el-button>
						
							
							<el-button
								link
								size="small"
								@click="formEdit(scope.row, '2')"
								v-auth="'user.update'"
							>
								编辑
							</el-button>
						
							<el-popconfirm
								title="确定删除吗？"
								@confirm="table_del(scope.row, scope.$index)"
							>
								<template #reference>
									<el-button link type="danger" size="small" v-auth="'user.delete'">
										删除
									</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>
	<el-dialog
		:title="titleMap[type]"
		v-model="limitedVisible"
		:width="600"
	>
		<el-form
			:model="addForm"
			:rules="rules"
			ref="addForm"
			label-width="100px"
			label-position="left"
		>
			<el-form-item label="登录账号" prop="username">
				<el-input
					v-model="addForm.username"
					placeholder="用于登录系统"
					clearable
				></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input
					v-model="addForm.name"
					placeholder="请输入完整的真实姓名"
					clearable
				></el-input>
			</el-form-item>
			<el-form-item label="手机">
				<el-input
					v-model="addForm.phone"
					placeholder="请输入手机号码"
					clearable
				></el-input>
			</el-form-item>
			<el-form-item label="是否在用">
				<el-switch v-model="addForm.is_active" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="limitedVisible = false">取 消</el-button>
			<el-button
				v-if="type !== 'show'"
				type="primary"
				:loading="isSaveing"
				@click="submit()"
			>保 存
			</el-button
			>
		</template>
	</el-dialog>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
 
</template>

<script>
	import baseUrl from "@/config";
	import {genTree} from "@/utils/verificate";
	import saveDialog from './user_form.vue'
//	import certDialog from './cert_form.vue'
	export default {
		name: "user",
		components: {
			saveDialog,
		//	certDialog,
		},
		data() {
			return {
				dialog: {
					save: false,
				//	certSave:false,
				},
				query: {},
				baseUrl : baseUrl.API_URL,
				type: "add",
				titleMap: {
					add: "新增用户",
					edit: "编辑用户",
					show: "查看",
				},
				//表单数据
				addForm: {
					id: "",
					username: "",
					name: "",
					// email: "",
					phone: "",
					// belong_dept: [],
					is_active:true
				},
				//验证规则
				rules: {
					username: [{required: true, message: "请输入登录账号"}],
					name: [{required: true, message: "请输入真实姓名"}],
					group: [{required: true, message: "请选择所属角色"}],
				},
				//所需数据选项
				groups: [],
				groupsProps: {
					value: "id",
					multiple: false,
					checkStrictly: true,
				},
				isSaveing: false,
				limitedVisible: false,
				showGrouploading: false,
				groupFilterText: "",
				group: [],
				userList: [],
				selection: [],
				search: {
					name: null,
				},
				imageUrl: "",
				filterParams: {},
				tableParams: {},
				apiObj: this.$API.system.user.list,
				temp:[],
				postList:[],
			};
		},
		watch: {
			groupFilterText(val) {
				this.$refs.group.filter(val);
			},
		},
		mounted() {
			this.getGroup();
		},
		methods: {
			//加载树数据
			async getGroup() {
				let res = await this.$API.system.dept.list.req({page: 0});
				this.group = genTree(res);
			},
			getImgUrl (img) {
				return 'http://49.232.14.174:2226'+ img;
			},
			//添加
			add() {
				this.type = "add";
				this.limitedVisible = true;
				this.addForm = {};
			},
			//编辑
			formEdit(row,index) {
				console.log(row);
				this.limitedVisible = true;
				if(index==='1'){
					this.type = "show";
				}else{
					this.type = "edit";
				}
				this.addForm.id = row.id;
				this.addForm.name = row.name;
				this.addForm.username = row.username;
				this.addForm.phone = row.phone;
				this.addForm.is_active = row.is_active;
			},
			formSetting(row){
				this.dialog.save = true;
				this.$nextTick(() => {
					this.$refs.saveDialog.open().setData(row)

				})
			},
			//添加证书
			//Addcertificate(row){
          //  this.dialog.certSave = true;
			//	this.$nextTick(() => {
			//		this.$refs.certDialog.open().setData(row)

			//	})

		//	},
			//查看
			table_show(row) {
				this.limitedVisible = true;
				this.type = "show";
				this.addForm.id = row.id;
			},
			//删除
			async table_del(row) {
				let res = await this.$API.system.user.delete.req(row.id);
				if (res.err_msg) {
					this.$message.error(res.err_msg);
				} else {
					this.$refs.table.refresh();
					this.$message.success("删除成功");
				}
			},
			//表格选择后回调事件
			selectionChange(selection) {
				this.selection = selection;
			},

			//树过滤
			groupFilterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//树点击事件
			groupClick(data) {
				console.log(data);
			//	debugger;
				let params = {belong_dept: data.id};
				this.$refs.table.reload(params);
			},
			//搜索
			handleQuery() {
				this.$refs.table.queryData(this.query)
			},
			//表单提交方法
			submit(){
			//	debugger;
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						let res;
						if(this.type==='add'){
							res = await this.$API.system.user.create.req(this.addForm);
						}else if(this.type==='edit'){
							res = await this.$API.system.user.update.req(this.addForm.id,this.addForm);
						}
						this.isSaveing = false;
						if(res.err_msg){
							this.$message(res.err_msg);
						}else{
							this.limitedVisible = false;
							this.$message.success("操作成功")
						}
					}else{
						return false;
					}
				})
			},

			//本地更新数据
			handleSaveSuccess(){
				this.$refs.table.refresh()
			},
		},
	};
</script>

<style></style>
