<template>
	<div>
		<el-drawer
			class="custom-drawer-form"
			title="专题库分享"
			size="1000px"
			:visible.sync="drawer"
			direction="rtl"
			:before-close="close"
			destroy-on-close
		>
			<el-container class="project-share">
				<el-header>
					<el-form :inline="true" class="select-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>
							<el-button type="primary" size="small" @click="getList"
								>查询</el-button
							>
						</el-form-item>
					</el-form>
				</el-header>
				<el-main class="project-share-main">
					<el-alert
						title=""
						type="info"
						:closable="false"
						style="margin-bottom: 20px"
					>
						<p style="color: black">
							为用户分享专题库后，用户在专题库中的类型会设置为“查阅人”，专题库管理员可以在“分配参与者”更改此用户的类型
						</p>
						<p style="color: black">已在专题库中的用户信息不在此处展示</p>
					</el-alert>
					<el-table
						v-loading="loading"
						:data="tableData"
						:show-header="headerShow"
						style="width: 100%"
					>
						<!-- <el-table-column label="" align="center" width="55">
            <template slot-scope="scope">
              <el-checkbox :label="scope.row.id" @change="onChange(scope.row)" v-if="!loading" :checked="userIds.indexOf(scope.row.id) !== -1"></el-checkbox>
            </template>
          </el-table-column> -->
						<!-- <el-table-column prop="username" label="账号" align="center" show-overflow-tooltip></el-table-column> -->
						<el-table-column type="expand">
							<template slot-scope="scope">
								<ClientTable
									@getId="getId"
									:tenantId="scope.row.id"
									:projectId="queryParams.projectId"
								></ClientTable>
							</template>
						</el-table-column>
						<el-table-column
							prop="tenantName"
							label="租户名称"
							align="center"
							show-overflow-tooltip
						></el-table-column>
						<!-- <el-table-column prop="id" label="邮箱" align="center" show-overflow-tooltip></el-table-column> -->
						<!-- <el-table-column label="联系人" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ genderObj[scope.row.gender] }}</span>
            </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-button type="primary" @click="submit" :loading="btnLoading"
						>确 定</el-button
					>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
  import ClientTable from './ClientTable.vue'
export default {
  components: {
    ClientTable
    },
		data() {
			return {
				drawer: false,
				loading: false,
				btnLoading: false,
				total: 0,
				headerShow: false,
        tableData: [],
        users: [],
				queryParams: {
					id: 0,
					name: "",
					size: 10,
					current: 1,
					projectId: 0,
				},
				typeObj: {
					1: "分类人",
					2: "管理员",
					3: "查阅人",
					4: "查阅人(图表)",
				},
				genderObj: {
					0: "女",
					1: "男",
				},
				userIds: [],
			};
		},
		computed: {},
		mounted() {},
		methods: {
			close() {
        this.userIds = [];
				this.drawer = false;
				this.$emit("close");
			},
			open(projectId) {
				// this.projectId = id;
				this.queryParams.projectId = projectId;
				this.drawer = true;
				this.getList();
			},
			onChange({ id }) {
				const index = this.userIds.indexOf(id);
				if (index === -1) {
					this.userIds.push(id);
				} else {
					this.userIds.splice(index, 1);
				}
      },
      getId(id, users) {
        this.userIds = id;
        this.users = users
			},
			getList() {
				this.loading = true;
				this.$api
					.getUserList(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();
			},
			submit() {
				if (this.userIds.length === 0) {
					this.$message.error("请选择用户");
					return false;
				}
				this.btnLoading = true;
				this.$api
          .projectShare({ id: this.queryParams.projectId, data: this.users })
					.then((response) => {
						this.btnLoading = false;
						this.$message.success("分享成功");
						this.close();
					})
					.catch((error) => {
						this.btnLoading = false;
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
  .select-user-header-form {
    padding-left: 20px;
  }
	.project-share {
		.pagination {
			text-align: center;
			margin: 20px 0;
		}
		.el-checkbox__label {
			display: none !important;
		}
		.project-share-header-form {
			margin-left: 20px;
		}
		.project-share-main {
			background: #fff;
			padding: 5px 20px;
			margin-top: 20px;
		}
	}
</style>
