<template>
	<div>
		<el-drawer
			class="custom-drawer-form"
			title="专题库成员"
			size="1000px"
			:visible.sync="drawer"
			direction="rtl"
			:before-close="close"
			destroy-on-close
			append-to-body
		>
			<el-container class="project-user">
				<el-header>
					<el-form :inline="true" class="project-user-header-form">
						<el-form-item label="账号">
							<el-input
								v-model="queryParams.username"
								size="small"
								placeholder="请输入账号"
							></el-input>
						</el-form-item>
						<el-form-item label="姓名">
							<el-input
								v-model="queryParams.name"
								size="small"
								placeholder="请输入姓名"
							></el-input>
						</el-form-item>
						<el-form-item label="类型">
							<el-select
								v-model="queryParams.type"
								placeholder="请选择"
								clearable
								size="small"
							>
								<el-option
									v-for="(item, key) in typeObj"
									:label="item"
									:value="key"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="" size="small" @click="getList">查询</el-button>
							<el-button
								type="primary"
								size="small"
								@click="handleAdd()"
								:disabled="
									!(
										$permission('/workspace/project/assign_participants/add') &&
										$r(projectId, [2])
									)
								"
								>新增</el-button
							>
							<span
								class="el-icon-question"
								title="查看用户类型解释"
								@click="handleClick"
								style="
									font-size: 30px;
									color: #a6a6a6;
									position: relative;
									top: 7px;
									left: 40px;
									cursor: pointer;
								"
							></span>
						</el-form-item>
					</el-form>
				</el-header>
				<el-main class="project-user-main">
					<el-table
						v-loading="loading"
						:data="tableData"
						border
						header-row-class-name="custom-table-header"
					>
						<el-table-column
							type="index"
							label="#"
							width="55"
							align="center"
						></el-table-column>
						<el-table-column
							prop="username"
							label="账号"
							align="center"
							show-overflow-tooltip
						></el-table-column>
						<el-table-column
							prop="name"
							label="名称"
							align="center"
							show-overflow-tooltip
						></el-table-column>
						<el-table-column label="类型" align="center" show-overflow-tooltip>
							<template slot-scope="scope">
								<span>{{ typeObj[scope.row.type] }}</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="createTime"
							label="加入时间"
							align="center"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>{{ $d(scope.row.createTime) }}</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="remark"
							label="备注"
							align="center"
							show-overflow-tooltip
						></el-table-column>
						<el-table-column label="操作" align="center" width="150">
							<template slot-scope="scope">
								<el-dropdown split-button type="primary" size="small">
									<p
										@click="handleEdit(scope.row)"
										v-if="
											$permission(
												'/workspace/project/assign_participants/modify'
											) && $r(projectId, [2])
										"
									>
										编辑
									</p>
									<p v-else :disabled="true">编辑</p>
									<el-dropdown-menu slot="dropdown" class="text-align_center">
										<el-dropdown-item
											class="color-red"
											@click.native="handleDelete(scope.row)"
											:disabled="
												!(
													$permission(
														'/workspace/project/assign_participants/remove'
													) && $r(projectId, [2])
												)
											"
											>移除</el-dropdown-item
										>
									</el-dropdown-menu>
								</el-dropdown>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination
							:current-page.sync="queryParams.current"
							:page-size="queryParams.size"
							:total="total"
							@current-change="handleCurrentChange"
							layout="total, prev, pager, next, jumper"
							background
						></el-pagination>
					</div>
				</el-main>
				<el-footer class="footer-common">
					<el-button @click="close">关 闭</el-button>
				</el-footer>
			</el-container>
		</el-drawer>

		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			width="400px"
			append-to-body
			destroy-on-close
			:before-close="cancel"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="80px"
				label-position="left"
			>
				<el-form-item label="类型" prop="type">
					<el-select
						v-model="ruleForm.type"
						placeholder="请选择"
						style="width: 100%"
					>
						<el-option
							v-for="(item, key) in typeObj"
							:label="item"
							:value="parseInt(key)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input
						v-model="ruleForm.remark"
						placeholder="请输入备注"
						type="textarea"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submit" :loading="btnLoading"
					>确 定</el-button
				>
			</div>
		</el-dialog>

		<select-user-dialog @confirm="confirmUser" ref="selectUserDialog" />

		<user-type-explain-dialog ref="userTypeExplainDialog" />
	</div>
</template>

<script>
	import SelectUserDialog from "../dialog/SelectUser";
	import UserTypeExplainDialog from "../dialog/UserTypeExplain";

	export default {
		components: {
			SelectUserDialog,
			UserTypeExplainDialog,
		},
		data() {
			return {
				drawer: false,
				loading: false,
				btnLoading: false,
				projectId: 0,
				total: 0,
				tableData: [],
				queryParams: {
					name: "",
					username: "",
					size: 10,
					current: 1,
					projectId: 0,
					type: null,
				},
				typeObj: {
					1: "分类人",
					2: "管理员",
					3: "查阅人",
					4: "查阅人(图表)",
				},
				title: "",
				dialogVisible: false,
				ruleForm: {},
				rules: {
					type: [{ required: true, message: "请选择类型", trigger: "change" }],
				},
			};
		},
		computed: {},
		mounted() {},
		methods: {
			close() {
				this.drawer = false;
				this.$emit("close");
			},
			open(id) {
				this.projectId = id;
				this.queryParams.projectId = id;
				this.getList();
				this.drawer = true;
			},
			close2() {
				this.$refs.selectUserDialog.close();
				this.getList();
			},
			getList() {
				this.loading = true;
				this.$api
					.getProjectUserList(this.queryParams)
					.then((response) => {
						this.tableData = response.data.records;
						this.total = response.data.total;
						this.loading = false;
					})
					.catch((error) => {
						this.loading = false;
					});
			},
			handleCurrentChange(val) {
				this.queryParams.current = val;
				this.getList();
			},
			cancel() {
				this.dialogVisible = false;
			},
			handleClick() {
				this.$refs.userTypeExplainDialog.open();
			},
			handleAdd() {
				this.$refs.selectUserDialog.open(this.projectId);
			},
			handleEdit(row) {
				this.title = "编辑成员";
				this.dialogVisible = true;
				this.ruleForm = { ...row };
			},
			confirmUser(userIds, users) {
				this.ruleForm = {
					userIds: userIds,
					projectId: this.projectId,
					users: users,
				};
				this.title = "新增成员";
				this.dialogVisible = true;
			},
			submit() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						this.btnLoading = true;
						if (this.ruleForm.id) {
							this.$api
								.editProjectUser(this.ruleForm)
								.then((response) => {
									this.$message.success("编辑成功");
									this.btnLoading = false;
									this.cancel();
									this.close2();
								})
								.catch((error) => {
									this.btnLoading = false;
								});
						} else {
							this.$api
								.addProjectUser(this.ruleForm)
								.then((response) => {
									this.$message.success("新增成功");
									this.btnLoading = false;
									this.cancel();
									this.close2();
								})
								.catch((error) => {
									this.btnLoading = false;
								});
						}
					}
				});
			},
			handleDelete(row) {
				this.$confirm("确认删除本条数据吗？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.loading = true;
					this.$api
						.deleteProjectUser({ id: row.id })
						.then((response) => {
							this.$message.success("删除成功");
							this.loading = false;
							this.getList();
						})
						.catch((error) => {
							this.loading = false;
						});
				});
			},
		},
	};
</script>

<style lang="scss">
	.project-user {
		.pagination {
			text-align: center;
			margin: 20px 0;
		}
		.project-user-header-form {
			margin-left: 20px;
		}
		.project-user-main {
			background: #fff;
			padding: 5px 20px;
			margin-top: 20px;
		}
	}
</style>
