<template>
	<el-dialog v-model="state.dialogVisible" width="70%" draggable title="导出邀请码" destroy-on-close append-to-body>
		<div ref="exportWordRef">
			<div style="display: grid; grid-template-columns: repeat(auto-fill, 300px); grid-gap: 20px; justify-items: center; align-items: center">
				<div v-for="(item, index) in list" :key="index" style="text-align: center; border: 1px solid #ccc; padding: 10px 0">
					<img :src="item.url" style="width: 300px" alt="加载失败" />
					<div style="margin-top: 10px">{{ item.title }}</div>
					<div style="margin-top: 10px">{{ item.code }}</div>
				</div>
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" :loading="state.loading" @click="exportWord"><SvgIcon name="iconfont icon-daochu" class="mr5" /> 导出</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { exportAsDocx } from '@/utils/exportAsWord';
import { getInviteCodeList } from '@/api/snapshot/inviteCode';

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
});
const list = ref<EmptyArrayType>([]);
// 打开弹窗
const openDialog = async () => {
	try {
		state.dialogVisible = true;
		getList();
	} catch (error) {
		console.log(error);
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const getList = () => {
	state.loading = true;
	getInviteCodeList({ PageIndex: 1, PageSize: 999 })
		.then((res) => {
			list.value = res.result.items.map((item: any) => {
				return {
					title: item.orgName,
					code: item.beginCode + '~' + item.endCode,
					url: import.meta.env.VITE_API_UPLOAD_URL + item.qrCodeUrl,
				};
			});
			state.loading = false;
		})
		.finally(() => {
			state.loading = false;
		});
};
// 导出
const exportWordRef = ref<RefType>();
const exportWord = () => {
	exportAsDocx(exportWordRef.value, `导出邀请信息`);
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
