<template>
	<div>
		<el-dialog
			title="选择用户"
			:visible.sync="visible"
			width="900px"
			:close-on-click-modal="false"
			append-to-body
			destroy-on-close
			:before-close="close"
			top="3vh"
		>
			<div class="select-user">
				<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-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>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">关 闭</el-button>
				<el-button type="primary" @click="handleConfirm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import ClientTable from "../drawer/ClientTable.vue";
	export default {
		components: {
			ClientTable,
		},
		data() {
			return {
				visible: 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.visible = false;
				this.$emit("close");
			},
			open(projectId) {
				this.queryParams.projectId = projectId;
				this.visible = true;
				this.getList();
			},
			getId(id, users) {
        this.userIds = id;
        this.users = users
				// console.log(users);
        // console.log(id);
			},
			getList() {
				this.loading = true;
				this.$api
					.getUserList(this.queryParams)
					.then((response) => {
						this.tableData = response.data.records;
						this.total = response.data.total;
						this.loading = false;
						// console.log(this.tableData);
					})
					.catch((error) => {
						this.loading = false;
					});
			},
			handleCurrentChange(val) {
				this.queryParams.current = val;
				this.getList();
			},
			onChange({ id }) {
				const index = this.userIds.indexOf(id);
				if (index === -1) {
					this.userIds.push(id);
				} else {
					this.userIds.splice(index, 1);
				}
			},
			handleConfirm() {
				if (this.userIds.length === 0) {
					this.$message.error("请选择用户");
					return false;
				}
				this.$emit("confirm", this.userIds, this.users);
			},
		},
	};
</script>

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