<template>
	<el-dialog v-model="state.dialogVisible" draggable :title="dialogTitle" width="60%">
		<el-form :model="state.queryParams" label-position="left" :disabled="state.loading" inline ref="ruleFormRef">
			<el-form-item label="操作号码" prop="PhoneNum">
				<el-input
					v-model="state.queryParams.PhoneNum"
					placeholder="请填写操作号码"
					clearable
					class="keyword-input"
					@keyup.enter="handleQuery"
				></el-input>
			</el-form-item>
			<el-form-item label="操作类型" prop="LogAction">
				<el-select v-model="state.queryParams.LogAction" placeholder="请选择操作类型" class="w100" clearable @change="handleQuery">
					<el-option label="新增" value="新增" />
					<el-option label="删除" value="删除" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
				<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
					<SvgIcon name="ele-Refresh" class="mr5" />重置
				</el-button>
			</el-form-item>
		</el-form>
		<vxe-table
			border
			:loading="state.loading"
			:data="state.tableData"
			:column-config="{ resizable: true }"
			:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
			auto-resize
			show-overflow
			:scrollY="{ enabled: true, gt: 100 }"
			id="blacklistActionLog"
			max-height="400px"
		>
			<vxe-column field="phoneNum" title="操作号码" min-width="140"></vxe-column>
			<vxe-column field="logAction" title="操作类型" min-width="140"></vxe-column>
			<vxe-column field="creatorName" title="操作人" min-width="140"></vxe-column>
			<vxe-column field="validDateTime" title="有效期" min-width="140">
				<template #default="{ row }">
					{{ formatDate(row.validDateTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>
			<vxe-column field="creationTime" title="操作时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>
		</vxe-table>
		<pagination
			@pagination="queryList"
			:total="state.total"
			v-model:current-page="state.queryParams.PageIndex"
			v-model:page-size="state.queryParams.PageSize"
			:disabled="state.loading"
		/>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineAsyncComponent } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { addBlackListXT, addWhiteListXT, getBlackWhiteListLogXT } from '@/api/tels/blackList';
import { formatDate } from '@/utils/formatTime';

const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
// 定义变量内容
const state = reactive<any>({
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页条数
		PhoneNum: null, // 电话号码
		LogType: '1', // 黑白名单类型
		LogAction: null, // 操作类型
	},
	total: 0, // 总数
	dialogVisible: false, // 弹窗显示隐藏
	loading: false,
});
/** 搜索按钮操作 */
const handleQuery = () => {
	queryList();
};
const ruleFormRef = ref<RefType>();
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	handleQuery();
};
const queryList = () => {
	state.loading = true;
	getBlackWhiteListLogXT(state.queryParams)
		.then((response: any) => {
			state.tableData = response.result?.items ?? [];
			state.total = response.result?.total ?? 0;
			state.loading = false;
		})
		.finally(() => {
			state.loading = false;
		});
};
const dialogTitle = ref('黑名单操作记录');
// 打开弹窗
const openDialog = (logType: string) => {
	state.queryParams.LogType = logType;
	if (logType === '1') dialogTitle.value = '黑名单操作记录';
	else dialogTitle.value = '白名单操作记录';
	queryList();
	state.dialogVisible = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
