<template>
	<div class="app-container">
		<BasicList :listName="state.listName" :className="state.className" :mainKeyName="state.mainKeyName"
			:listId="state.listId" :total="state.total" :loading="state.loading" :tableData="state.tableData"
			@handleQuery="handleQuery" @onOpenEditModule="onOpenEditModule" @onTableRowDetail="onTableRowDetail"
			@onOpenAddModule="onOpenAddModule">
			<template v-slot:listBtn="slotProps">
				<el-tooltip class="box-item" effect="dark" content="详情" placement="top-start">
					<el-button type="info" size="small" circle v-auth="`${state.className}:detail`"
						@click="onTableRowDetail(slotProps)">
						<SvgIcon :size="12" name="elementMemo" />
					</el-button>
				</el-tooltip>
			</template>
		</BasicList>
		<EditModule @handleQuery="handleQuery" ref="editModuleRef" :query="state.query" :bindPage="state.pageId"
			:listId="state.listId" />
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, onActivated,onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import { get } from '@/api/public/basic';
// import BasicList from "@/components/basicList/index.vue";
import BasicList from '@/components/basicList/exa.vue';
import EditModule from './component/editModule.vue';
import { gatherId } from '@/utils/dataGather';

const { proxy } = getCurrentInstance() as any;

const editModuleRef = ref();
const route = useRoute();
const isMounted = ref(false);
// 通过 hQEUTYEmAiw 取数据

const state = reactive({
	// 遮罩层
	loading: true,
	// 选中数组
	ids: [],
	// 非单个禁用
	single: true,
	// 非多个禁用
	multiple: true,
	// 弹出层标题
	title: '',
	// 表格数据
	tableData: [],
	// 总条数
	total: 0,
	// url参数, 测试客户管理表
	pageId: '',
	listId: '',
	listName: '',
	className: '',
	mainKeyName: '',
	query: {},
});

/** 查询列表 */
const handleQuery = (params: any) => {
	if (state.listId) {
		state.query = params;
		state.loading = true;
		// 如果state.queryParams中有空值，则删除
		Object.keys(params).forEach((key) => {
			if (!params[key]) {
				delete params[key];
			}
		});
		get(params, state.listId).then((response: any) => {
			state.tableData = response.data.result;
			state.total = response.data.count;
			state.loading = false;
		});
	}

};

// 打开新增弹窗
const onOpenAddModule = () => {
	editModuleRef.value.openDialog(0);
};
// 打开编辑弹窗
const onOpenEditModule = (row: any) => {
	editModuleRef.value.openDialog(1, row[state.mainKeyName]);
};

// 打开详情
const onTableRowDetail = (row: any) => {
	editModuleRef.value.openDialog(2, row[state.mainKeyName]);
};

// 获取页面配置信息
const getPageConfig = () => {
	state.loading = true;
	get(state.listId, gatherId.DM_TABLE_LIST_ID).then((response) => {
		if (response.status == 0) {
			const { listTitle, searchKey, className } = (response.data && response.data[0]) || {};
			// state.listId = listId
			state.listName = listTitle;
			state.className = className;
			state.mainKeyName = searchKey;
			state.loading = false;
		}
	});
};

function decodeHexString(hexString) {
	let str = '';
	for (let i = 0; i < hexString.length; i += 2) {
		const hexChar = hexString.substr(i, 2);
		const charCode = parseInt(hexChar, 16);
		str += String.fromCharCode(charCode);
	}
	return str;
}

// 页面加载时
onMounted(() => {
	// 获取路由参数
	let patchArr = route.path.split('/');
	let str = patchArr[patchArr.length - 1];
	patchArr = decodeHexString(str).split(':');
	state.listId = patchArr[0];
	state.pageId = patchArr[1];
	getPageConfig();
});
// 页面卸载时
onUnmounted(() => {
	proxy.mittBus.off('onEditPartnerModule');
});
onActivated(() => {
	if (isMounted.value) {
		console.log('onActivated');
		handleQuery(state.query);
	}
	isMounted.value = true; // 首次加载时设置为 true
});
</script>
