<route lang="yaml">
    name: ipWhitelist
    </route>

<script lang="ts" setup name="ipWhitelist">
import { ref } from 'vue';
import { TableColumnWidth } from '@/utils/enum';
import TableTools from '@/components/Tools/table_tools.vue';
import { commonPageConfig } from '@/components/PageNav/index';
import { useRouter, useRoute } from "vue-router";
import {
	getIPList,
	deleteIP,
	saveIP,
	updateIP
} from "@/api/modules/dataService";
import { useValidator } from '@/hooks/useValidator';

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const { required, regexpValidate } = useValidator();

/** 分页及搜索传参信息配置。 */
const page = ref({
	...commonPageConfig,
	ip: ''
});

const searchItemList = ref([{
	type: "input",
	label: "",
	field: "ip",
	default: "",
	placeholder: "IP",
	clearable: true,
}]);

const currTableData: any = ref({});
const tableInfo = ref({
	id: 'data-app-table',
	fields: [
		{ label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
		{ label: "IP", field: "ip", width: 140 },
		{ label: "描述", field: "description", width: TableColumnWidth.DESCRIPTION },
		{ label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
		{ label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME },
	],
	data: [],
	page: {
		type: "normal",
		rows: 0,
		...page.value,
	},
	actionInfo: {
		label: "操作",
		type: "btn",
		width: 120,
		fixed: 'right',
		btns: (scope) => {
			let btnsArr: any = [];
			btnsArr.push({
				label: "编辑", value: "edit", click: (scope) => {
					currTableData.value = scope.row;
					IPDialogInfo.value.header.title = '编辑IP';
					IPDialogInfo.value.type = 'edit';
					IPFormItems.value[0].default = scope.row.ip;
					IPFormItems.value[1].default = scope.row.description;
					IPDialogInfo.value.visible = true;
				}
			});
			btnsArr.push({
				label: "删除", value: "delete", click: (scope) => {
					proxy.$openMessageBox('确定要删除该IP吗？', () => {
						deleteIP([scope.row.guid]).then((res: any) => {
							if (res.code == proxy.$passCode) {
								page.value.curr = 1;
								getTableData();
								proxy.$ElMessage.success("删除成功");
							} else {
								proxy.$ElMessage.error(res.msg);
							}
						});
					}, () => {
						proxy.$ElMessage.info("已取消");
					})
				}
			});
			return btnsArr
		},
	},
	loading: false
})

const IPFormItems = ref([{
	type: 'input',
	label: 'IP',
	field: 'ip',
	default: '',
	block: true,
	placeholder: '请输入',
	maxlength: 50,
	clearable: true,
	required: true
}, {
	label: '描述',
	type: 'textarea',
	placeholder: '请输入',
	field: 'description',
	default: '',
	maxlength: 200,
	block: true,
	clearable: true,
	required: false
}]);

const IPFormRules = ref({
	ip: [required("请填写IP"), regexpValidate(/^(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])$/, '请输入合法的IP地址')],
});

const IPDialogInfo = ref({
	visible: false,
	size: 480,
	direction: "column",
	header: {
		title: "添加IP",
	},
	type: 'add',
	contents: [
		{
			type: 'form',
			title: '',
			formInfo: {
				id: 'add-authorize-form',
				items: IPFormItems.value,
				rules: IPFormRules.value
			}
		}
	],
	footer: {
		btns: [
			{ type: "default", label: "取消", value: "cancel" },
			{ type: "primary", label: "确定", value: "submit", loading: false },
		],
	},
});

const IPDialogBtnClick = (btn, info) => {
	if (btn.value == 'submit') {
		IPDialogInfo.value.footer.btns[1].loading = true;
		if (IPDialogInfo.value.type == 'add') {
			saveIP(info).then((res: any) => {
				IPDialogInfo.value.footer.btns[1].loading = false;
				if (res.code == proxy.$passCode) {
					page.value.curr = 1;
					getTableData();
					proxy.$ElMessage({
						type: 'success',
						message: `添加IP成功`
					})
					IPDialogInfo.value.visible = false;
				} else {
					proxy.$ElMessage.error(res.msg);
				}
			})
		} else {
			info.guid = currTableData.value.guid;
			updateIP(info).then((res: any) => {
				IPDialogInfo.value.footer.btns[1].loading = false;
				if (res.code == proxy.$passCode) {
					page.value.curr = 1;
					getTableData();
					proxy.$ElMessage({
						type: 'success',
						message: `编辑IP成功`
					})
					IPDialogInfo.value.visible = false;
				} else {
					proxy.$ElMessage.error(res.msg);
				}
			})
		}
	} else if (btn.value == 'cancel') {
		IPDialogInfo.value.visible = false;
	}
};

const toSearch = (val: any, clear: boolean = false) => {
	page.value.curr = 1;
	if (clear) {
		searchItemList.value.map((item) => (item.default = ""));
		page.value.ip = '';
	} else {
		page.value.ip = val.ip;
	}
	getTableData();
};

const tablePageChange = (info) => {
	page.value.curr = Number(info.curr);
	page.value.limit = Number(info.limit);
	getTableData();
};

const getTableData = () => {
	tableInfo.value.loading = true
	getIPList({
		pageIndex: page.value.curr,
		pageSize: page.value.limit,
		ip: page.value.ip
	}).then((res: any) => {
		if (res.code == proxy.$passCode) {
			const data = res.data || {}
			tableInfo.value.data = data.records || []
			tableInfo.value.page.limit = data.pageSize
			tableInfo.value.page.curr = data.pageIndex
			tableInfo.value.page.rows = data.totalRows
		} else {
			proxy.$ElMessage({
				type: 'error',
				message: res.msg,
			})
		}
		tableInfo.value.loading = false
	})
};

const addIPWhite = () => {
	IPDialogInfo.value.visible = true;
	IPDialogInfo.value.header.title = '添加IP';
	IPDialogInfo.value.type = 'add';
	IPFormItems.value[0].default = '';
	IPFormItems.value[1].default = ''
}

onBeforeMount(() => {
	toSearch({})
})

</script>

<template>
	<div class="container_wrap">
		<div class="table_tool_wrap">
			<TableTools :searchItems="searchItemList" :searchId="'data-source-search'" @search="toSearch" :init="false" />
			<div class="tools_btns">
				<el-button type="primary" @click="addIPWhite" v-preReClick>添加</el-button>
			</div>
		</div>
		<div class="table_panel_wrap">
			<Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
		</div>
		<!-- 添加编辑IP对话框 -->
		<Dialog :dialogInfo="IPDialogInfo" @btnClick="IPDialogBtnClick" />
	</div>
</template>

<style lang="scss" scoped>
.table_tool_wrap {
	width: 100%;
	height: 84px !important;
	padding: 0 8px;

	.tools_btns {
		padding: 0px 0 0;
	}
}

.table_panel_wrap {
	width: 100%;
	height: calc(100% - 84px);
	padding: 0px 8px 0;
}
</style>