<template>
	<el-dialog v-model="state.dialogVisible" width="70%" draggable title="导出邀请码" destroy-on-close append-to-body>
		<div ref="exportWordRef" class="export-content">
			<div v-for="(item, index) in list" :key="index" class="export-content-item">
				<img :src="item.url" alt="" />
				<div class="title">{{ item.title }}</div>
				<div class="code">{{ item.code }}</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 { onMounted, reactive, ref } from 'vue';
import { exportAsDocx } from '@/utils/exportAsWord';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
});
const list = ref<EmptyArrayType>([
	{
		title: '高新区管委会及下属单位',
		code: '1200 ~ 1999',
		url: 'http://171.94.154.9:81/UploadFiles/QRCode/11192406-5126-4a7f-97ed-514c174c8d2c.png',
	},
	{
		title: '高新区管委会及下属单位',
		code: '1200 ~ 1999',
		url: 'http://171.94.154.9:81/UploadFiles/QRCode/11192406-5126-4a7f-97ed-514c174c8d2c.png',
	},
	{
		title: '高新区管委会及下属单位',
		code: '1200 ~ 1999',
		url: 'http://171.94.154.9:81/UploadFiles/QRCode/11192406-5126-4a7f-97ed-514c174c8d2c.png',
	},
	{
		title: '高新区管委会及下属单位',
		code: '1200 ~ 1999',
		url: 'http://171.94.154.9:81/UploadFiles/QRCode/11192406-5126-4a7f-97ed-514c174c8d2c.png',
	},
	{
		title: '高新区管委会及下属单位',
		code: '1200 ~ 1999',
		url: 'http://171.94.154.9:81/UploadFiles/QRCode/11192406-5126-4a7f-97ed-514c174c8d2c.png',
	},
	{
		title: '高新区管委会及下属单位',
		code: '1200 ~ 1999',
		url: 'http://171.94.154.9:81/UploadFiles/QRCode/11192406-5126-4a7f-97ed-514c174c8d2c.png',
	},
	{
		title: '高新区管委会及下属单位',
		code: '1200 ~ 1999',
		url: 'http://171.94.154.9:81/UploadFiles/QRCode/11192406-5126-4a7f-97ed-514c174c8d2c.png',
	},
]);
// 打开弹窗
const openDialog = async () => {
	try {
		state.dialogVisible = true;
	} catch (error) {
		console.log(error);
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 导出
const exportWordRef = ref<RefType>();
const exportWord = () => {
	exportAsDocx(exportWordRef.value, `导出邀请信息`);
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.export-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, 300px);
	grid-gap: 20px;
	justify-items: center;
	align-items: center;
	&-item {
		text-align: center;
		border: var(--el-border);
		padding: 10px 0;
		img {
			width: 300px;
		}
		.title {
			margin-top: 10px;
		}
		.code {
			margin-top: 10px;
		}
	}
}
</style>
