<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-input
					v-model="search.keyword"
					placeholder="关键词"
					style="width: 150px; margin-right: 10px"
					clearable
				/>
				<el-button-group style="margin-left: 10px">
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="upsearch"
						>搜索</el-button
					>
				</el-button-group>
			</div>
			<div class="right-panel"></div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="list.apiObj"
				:column="list.column"
				row-key="id"
				:params="search"
				@selection-change="selectionChange"
				border
				stripe
				size="small"
			>
				<el-table-column type="selection" width="50"></el-table-column>
				<template #model="scope">
					<div style="display: flex; align-items: center">
						<component
							:is="scope.row.model?.icon"
							style="width: 16px; height: 16px"
						/>
						<span style="margin-left: 5px">{{
							scope.row.model?.title
						}}</span>
					</div>
				</template>
				<template #status="scope">
					<el-tag :type="status[scope.row.status]?.type">{{
						status[scope.row.status]?.text
					}}</el-tag>
				</template>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="100"
				>
					<template #default="scope">
						<el-button-group>
							<el-button
								type="primary"
								size="small"
								@click="table_audit(scope.row, scope.$index)"
								v-auth="'member.audit'"
								>审核</el-button
							>
							<el-popconfirm
								title="确定删除吗？"
								@confirm="table_del(scope.row, scope.$index)"
								v-if="false"
							>
								<template #reference>
									<el-button type="danger" size="small"
										>删除</el-button
									>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<save
			v-if="dialog.save"
			ref="saveBox"
			@success="upsearch"
			@closed="dialog.save = false"
		/>
	</el-container>
</template>

<script>
import save from "./save.vue";

export default {
	name: "member.apply",
	components: {
		save,
	},
	data() {
		return {
			dialog: { save: false },
			model: "",
			list: {
				apiObj: this.$API.member.extend.list,
				column: [
					{ prop: "id", label: "ID", width: 80 },
					{ prop: "name", label: "姓名", width: 200 },
					{ prop: "mobile", label: "电话", width: 200 },
					{ prop: "email", label: "邮箱", width: 200 },
					{ prop: "sex", label: "性别", width: 80 },
					{ prop: "id_card", label: "身份证号码", width: 150 },
					{
						prop: "status",
						label: "状态",
						width: 80,
						type: "status",
					},
					{ prop: "created_at", label: "创建时间", width: 150 },
					{ prop: "updated_at", label: "更新时间", width: 150 },
				],
			},
			search: { page: 1 },
			status: [
				{ text: "未审核", type: "primary" },
				{ text: "通过", type: "success" },
				{ text: "未通过", type: "danger" },
			],
		};
	},
	created() {
		Object.assign(this.search, this.$route.query);
	},
	methods: {
		upsearch() {
			this.$refs.table.reload(this.search);
		},
		moreUpsearch(search) {
			this.search = search;
			this.upsearch();
		},
		moreSearch() {
			this.dialog.search = true;
			this.$nextTick(() => {
				this.$refs.searchBox.open().setData(this.search);
			});
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		batch_del() {
			if (this.selection.length == 0) {
				this.$message.warning("请选择要删除的数据");
				return false;
			}
			this.$confirm("确定删除吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				let ids = [];
				ids = this.selection.map((item) => {
					return item.id;
				});
				this.$API.member.extend.delete
					.post({ ids: ids })
					.then((res) => {
						if (res.code == 1) {
							this.upsearch();
							this.$message.success("删除成功");
						} else {
							this.$message.error(res.message);
						}
					});
			});
		},
		table_show(row) {
			this.dialog.detail = true;
			this.$nextTick(() => {
				this.$refs.detailBox.open().setData(row);
			});
		},
		add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveBox
					.open()
					.setData({ model_id: this.$route.query.model_id });
			});
		},
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveBox.open("edit").setData(row);
			});
		},
		table_audit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveBox.open("audit").setData(row);
			});
		},
		async table_del(row) {
			var reqData = { id: row.id };
			var res = await this.$API.member.extend.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.upsearch();
				this.$message.success("删除成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
	},
};
</script>
