<template>
<el-container>
	<el-header>
		<div class="left-panel">
			<div class="right-panel-search">
				<el-input v-model="search.title" placeholder="名称" clearable />
				<el-input v-model="search.mobile" placeholder="手机号码" clearable />
				<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
			</div>
		</div>
		<div class="right-panel">
			<el-button type="primary" icon="el-icon-plus" @click="add">添加</el-button>
			<el-button type="danger" icon="el-icon-delete" @click="batch_del" :disabled="selection.length == 0">批量删除</el-button>
			<span v-auth="'member.import'">
				<file-import ref="importBox" :templateUrl="templateUrl" :apiObj="$API.member.lists.import" :data="{type:'import'}" />
			</span>
			<span v-auth="'member.export'">
				<fileExport ref="exportBox" :apiObj="$API.member.lists.export" :data="{type:'export'}" async />
			</span>
		</div>
	</el-header>
	<el-main class="nopadding">
		<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" :params="search">
			<el-table-column type="selection" width="50" />
			<template #avatar="scope">
				<el-image style="width: 60px; height: 60px" :src="scope.row.avatar" fit="fill"><template #placeholder><div style="background: #efefef; height: 60px; width: 60px; line-height: 60px; overflow: hidden; text-align: center;">{{ scope.row.username }}</div></template></el-image>
			</template>
			<template #level="scope">
				{{ scope.row.level?.title }}
			</template>
			<template #invite_name="scope">
				{{ scope.row.invite?.nickname }}（{{ scope.row.invite?.username }}）
			</template>
			<el-table-column label="操作" fixed="right" width="140">
				<template #default="scope">
					<el-button-group>
						<el-button type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
						<el-popconfirm title="您确定删除该数据" @confirm="table_del(scope.row, scope.$index)">
							<template #reference>
								<el-button type="danger" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</el-button-group>
				</template>
			</el-table-column>
		</scTable>
	</el-main>
</el-container>
<save ref="saveBox" v-if="dialog.save" @success="upsearch"></save>
</template>

<script>
import save from "./save.vue";
import fileImport from "@/components/scFileImport";
import fileExport from "@/components/scFileExport";

export default {
	name: "member.lists",
	data() {
		return {
			dialog: { save: false },
			list: {
				apiObj: this.$API.member.lists.list,
				column: [
					{ prop: "uid", label: "ID", width: 120 },
					{ prop: "avatar", label: "头像", width: 80 },
					{ prop: "nickname", label: "用户名称" },
					{ prop: "username", label: "用户名" },
					{ prop: "mobile", label: "手机号码" },
					{ prop: "invite_name", label: "邀请人", width: 200 },
					{ prop: "level", label: "用户等级", width: 80 },
					{ prop: "level_expire_time", label: "到期时间", width: 140 },
					{ prop: "created_at", label: "添加时间", width: 140 },
					{ prop: "updated_at", label: "更新时间", width: 140 },
				],
			},
			search: {
				title: null,
			},
			selection: [],
		};
	},
	components: {
		save,
		fileImport,
		fileExport,
	},
	created() {},
	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;
			}
			this.$confirm("是否删除选中数据？", "提示", {
				type: "warning",
			}).then(async () => {
				var res = await this.$API.member.lists.delete.post({
					uid: this.selection.map((item) => item.uid),
				});
				if (res.code == 1) {
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.upsearch();
					this.$message.success("删除成功");
				} else {
					this.$message.error(res.message);
				}
			}).catch(() => {
				this.$message.info("已取消操作");
			});
		},
		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({});
			});
		},
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveBox.open("edit").setData(row);
			});
		},
		async table_del(row) {
			var res = await this.$API.member.lists.delete.post({
				uid: row.uid,
			});
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.upsearch();
				this.$message.success("删除成功");
			} else {
				this.$message.error(res.message);
			}
		},
	},
};
</script>

<style scoped></style>
