<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="ml10">
				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
					<el-form-item label="关键字" prop="keyword">
						<el-input placeholder="请输入关键字" v-model="state.queryForm.keyword" />
					</el-form-item>
					<el-form-item label="IP" prop="ip">
						<el-input placeholder="请输入IP" v-model="state.queryForm.ip" />
					</el-form-item>
					<el-form-item label="域名" prop="domain">
						<el-input placeholder="请输入域名" v-model="state.queryForm.domain" />
					</el-form-item>
					<el-form-item>
						<el-button @click="getDataList" type="primary">查询</el-button>
						<el-button @click="resetQuery" icon="Refresh">重置</el-button>
						<el-button @click="openEdit({})" type="primary"> 新建规则 </el-button>
					</el-form-item>
				</el-form>
			</el-row>

			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				style="height: calc(100vh - 200px)"
				>;">
				<el-table-column label="规则名称" prop="ruleName" show-overflow-tooltip></el-table-column>
				<el-table-column label="关键字" prop="keyword" show-overflow-tooltip></el-table-column>
				<el-table-column label="IP" prop="ip" show-overflow-tooltip></el-table-column>
				<el-table-column label="域名" prop="domain" show-overflow-tooltip width="200"></el-table-column>
				<el-table-column label="推送内容" prop="pushContent" show-overflow-tooltip width="200">
					<template #default="{ row }">
						<el-image v-if="row.pushType" :src="row.pushContent" style="width: 100px; height: 100px" />
						<div v-else>{{ row.pushContent }}</div>
					</template>
				</el-table-column>
				<el-table-column label="推送频率" prop="pushFrequency" show-overflow-tooltip width="100">
					<template #default="{ row }">
						{{ formatNum(row.pushFrequency) }}
					</template>
				</el-table-column>
				<el-table-column label="延时推送" prop="delayPush" show-overflow-tooltip width="100">
					<template #default="{ row }"> {{ row.delayPush }}s </template>
				</el-table-column>
				<el-table-column label="备注" prop="remark" show-overflow-tooltip width="200"></el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template #default="{ row }">
						<el-button @click="openEdit(row)" size="small" text type="primary"> 编辑 </el-button>
						<el-button @click="(delOpen = true), (delObj = row)" size="small" text type="primary"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<Edit v-model:open="open" :row-data="rowData" @close="open = false" @onsuccess="getDataList" />
			<el-dialog v-model="delOpen" title="提示" width="500" @close="delOpen = false">
				<span>确认删除吗?</span>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="delOpen = false">取消</el-button>
						<el-button type="primary" :disabled="loading" @click="onDel(delObj)"> 确定 </el-button>
					</div>
				</template>
			</el-dialog>
			<pagination
				@current-change="currentChangeHandle"
				@size-change="sizeChangeHandle"
				:pageSizes="[5, 10, 20, 50, 100, 200]"
				v-bind="state.pagination"
			>
			</pagination>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { pageListIp, del } from '/@/api/marketing/rules';
import { useMessage } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

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

const open = ref(false);
const rowData = ref({});
const delOpen = ref(false);
const loading = ref(false);
const delObj = ref({});
// 格式化数据展示
const formatNum = (value: string | number = 0) => {
	let num = Number(value);
	if (num > 0 && num < 1) {
		return (num * 100).toFixed(0) + '%';
	} else if (num >= 1 && num < 10000) {
		return '每' + num + '次推送';
	}
	return '--';
};

// 定义变量内容
const queryRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		keyword: '',
		ip: '',
		domain: '',
	},
	selectObjs: [],
	pageList: pageListIp,
	pagination: {
		current: 1,
		size: 10,
		total: 0,
		pageSizes: [5, 10, 20, 50, 100],
	},
});

//  table hook
const { downBlobFile, getDataList, currentChangeHandle, sortChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	queryRef.value?.resetFields();
	getDataList();
};

// 导出excel
const exportExcel = () => {
	downBlobFile('/admin/log/export', state.queryForm, 'log.xlsx');
};
const openEdit = (row: any) => {
	console.log(row);

	rowData.value = row;
	open.value = true;
};
const onDel = async (row: any) => {
	loading.value = true;
	await del({ ids: [row.id] }).then((res) => {
		loading.value = false;
		if (res.code !== 0) return useMessage().success(t('common.editSuccessText'));
		useMessage().success(t('common.delSuccessText'));
		delOpen.value = false;
		delObj.value = {};
		getDataList();
	});
};
</script>

<style lang="scss" scoped>
pre code.hljs {
	width: 65%;
}
</style>
