<template>
	<fs-page>
		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
		<PermissionDrawerCom />
		<!-- 小程序二维码对话框 -->
		<el-dialog v-model="qrCodeVisible" title="小程序二维码" width="400px" align-center>
			<div class="qrcode-container">
				<img v-if="qrCodeUrl" :src="qrCodeUrl" alt="小程序二维码" />
				<div v-else class="loading">生成中...</div>
			</div>
		</el-dialog>
		<BatchTagsDialog ref="batchTagsDialogRef" :crudExpose="crudExpose" />
	</fs-page>
</template>

<script lang="ts" setup name="role">
import { defineAsyncComponent, onMounted, ref, reactive } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions, useBatchUpdateTags } from './crud';
import { RoleDrawerStores } from './stores/RoleDrawerStores';
import { RoleMenuBtnStores } from './stores/RoleMenuBtnStores';
import { RoleMenuFieldStores } from './stores/RoleMenuFieldStores';
import { RoleUsersStores } from './stores/RoleUsersStores';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { successMessage } from '../../../utils/message';
import BatchTagsDialog from './components/BatchTagsDialog.vue';

const PermissionDrawerCom = defineAsyncComponent(() => import('./components/RoleDrawer.vue'));

// 小程序二维码相关状态
const qrCodeVisible = ref(false);
const qrCodeUrl = ref('');

const RoleDrawer = RoleDrawerStores(); // 角色-抽屉
const RoleMenuBtn = RoleMenuBtnStores(); // 角色-菜单
const RoleMenuField = RoleMenuFieldStores();// 角色-菜单-字段
const RoleUsers = RoleUsersStores();// 角色-用户

// 获取路由实例
const router = useRouter();

const batchTagsDialogRef = ref();

const selectedRows = ref([]);

// 生成小程序二维码
async function generateQRCode(row: { id: string | number }) {
	try {
		qrCodeVisible.value = true;
		qrCodeUrl.value = ''; // 清空之前的二维码
		
		// 调用系统API获取二维码
		const response = await axios.post(`${import.meta.env.VITE_API_URL}/api/system/wechat/qrcode`, {
			scene: `${row.id}`,
			page: 'pages/index/index',
			width: 430,
			auto_color: false,
			is_hyaline: false
		}, {
			responseType: 'blob' // 接收二进制数据
		});
		
		// 将二进制数据转换为URL
		const blob = new Blob([response.data], { type: 'image/png' });
		qrCodeUrl.value = URL.createObjectURL(blob);
	} catch (error) {
		console.error('生成小程序码失败:', error);
		ElMessage.error('生成小程序二维码失败，请稍后重试');
		qrCodeVisible.value = false;
	}
}

// 创建 crud 配置
const { crudBinding, crudRef, crudExpose } = useFs({
	createCrudOptions,
	context: { 
		RoleDrawer, 
		RoleMenuBtn, 
		RoleMenuField,
		generateQRCode,
		router,
		$message: {
			warning: (msg: string) => successMessage(msg)
		},
		selectedRows: selectedRows,
		openBatchTagsDialog: (selection: any) => {
		batchTagsDialogRef.value.open(selection);
	}
	},
});

// 页面打开后获取列表数据
onMounted(async () => {
	// 刷新
	crudExpose.doRefresh();
	// 获取全部用户
	RoleUsers.get_all_users();
	
	// 获取标签列表
	/* await fetchTags(); */
});
</script>

<style scoped>
.qrcode-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px;
}
.qrcode-container img {
	max-width: 100%;
}
.loading {
	font-size: 16px;
	color: #909399;
}
.dialog-footer {
	margin-top: 20px;
	text-align: right;
}
/* 添加标签选择的样式 */
.el-select-dropdown__item {
	padding: 8px 12px;
}
</style>
