<template>
	<div class="early-statistics-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<el-tabs v-model="type" @tab-change="changeTab">
				<el-tab-pane name="0" label="预警统计图表" :disabled="state.loading"></el-tab-pane>
				<el-tab-pane name="1" label="预警统计列表" :disabled="state.loading"></el-tab-pane>
			</el-tabs>
			<div class="flex-center-between" v-if="type === '0'">
				<div></div>
				<el-date-picker v-model="monthValue" type="month" placeholder="请选择月份" :clearable="false" @change="selectMonth" />
			</div>
			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
				<el-row :gutter="20" v-show="type === '0'" class="w100 h100">
					<el-col :span="12">
						<v-chart class="chart" :option="option" :loading="state.loading" autoresize />
					</el-col>
					<el-col :span="12" class="w100 h100">
						<div style="height: 50%" class="w100">
							<v-chart class="chart" :option="option1" :loading="state.loading" autoresize />
						</div>
						<div style="height: 50%" class="w100">
							<v-chart class="chart" :option="option2" :loading="state.loading" autoresize />
						</div>
					</el-col>
				</el-row>
				<vxe-grid v-bind="gridOptions" v-show="type === '1'">
					<template #form>
						<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent :disabled="state.loading">
							<el-form-item label="预警名称" prop="EarlyWarningPushName">
								<el-input
									v-model="state.queryParams.EarlyWarningPushName"
									placeholder="请填写预警名称"
									clearable
									@keyup.enter="handleQuery"
									class="keyword-input"
								/>
							</el-form-item>
							<el-form-item label="预警类型" prop="EarlyPushStatus">
								<el-select v-model="state.queryParams.EarlyPushStatus" placeholder="请选择预警类型" @change="handleQuery">
									<el-option v-for="item in earlyWarningLevel" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
								</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"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
							</el-form-item>
						</el-form>
					</template>
					<template #pager>
						<pagination
							@pagination="queryList"
							:total="state.total"
							v-model:current-page="state.queryParams.PageIndex"
							v-model:page-size="state.queryParams.PageSize"
							:disabled="state.loading"
						/>
					</template>
				</vxe-grid>
			</div>
		</div>
		<!--  详情  -->
		<push-detail ref="pushDetailRef" />
	</div>
</template>

<script lang="tsx" setup name="earlyStatistics">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { formatDate } from '@/utils/formatTime';
import { deleteEarlySetting, getEarlySettingBaseData, getEarlySettingList } from '@/api/early/setting';
import { getEarlyManageList } from '@/api/early/manage';
import { getEarlyPushList } from '@/api/early/push';
import { statisticsOrderAcceptExport } from '@/api/statistics/order';
import dayjs from 'dayjs';
// 引入组件
const PushDetail = defineAsyncComponent(() => import('@/views/early/push/components/Detail.vue')); // 详情
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页

// 定义变量内容
const state = reactive<any>({
	loading: false, // 加载状态
	queryParams: {
		// 查询参数
		PageIndex: 1,
		PageSize: 20,
		EarlyWarningPushName: null, // 推送报告名称
		EarlyPushStatus: null, // 推送状态
		SortField: null,
		SortRule: null,
	},
	total: 0, // 总条数
	tableData: [], // 表格数据
});
const monthValue = ref<Date | null>(new Date()); // 月份 默认当月
const days = dayjs(monthValue.value).daysInMonth(); // 获取当月有多少天
const dataX = Array.from({ length: days }, (v, k) => k + 1 + '日');
const xData = ref<EmptyArrayType>(dataX); // x轴数据
xData.value = dataX;
const selectMonth = (val: Date) => {
	// 获取当月的天数 并组成数组
	const days = dayjs(val).daysInMonth(); // 获取当月有多少天
	const dataX = Array.from({ length: days }, (v, k) => k + 1 + '日');
	xData.value = dataX;
	queryList();
	console.log(dataX, '111');
};
console.log(monthValue.value, '111');
const type = ref<string>('0');
const changeTab = () => {};
const requestParams = ref<EmptyObjectType>({});
const gridOptions = reactive<any>({
	loading: false,
	border: true,
	showOverflow: true,
	printConfig: {},
	columnConfig: {
		resizable: true,
	},
	toolbarConfig: {
		zoom: true,
		custom: true,
		refresh: {
			queryMethod: () => {
				queryList();
			},
		},
		tools: [{ toolRender: { name: 'exportAll' } }],
	},
	customConfig: {
		storage: true,
	},
	id: 'earlyStatistics',
	rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
	height: 'auto',
	columns: [
		{ field: 'acceptType', title: '预警名称', minWidth: 90 },
		{ field: 'sumCount', title: '级别' },
		{ field: 'completionCount', title: '预警类型' },
		{ field: 'completionRate', title: '频率' },
		{ field: 'visitCount', title: '出现次数' },
		{ field: 'sumCountRate', title: '占比' },
		{
			title: '操作',
			width: 90,
			align: 'center',
			slots: {
				default: ({ row }) => {
					return (
						<el-button link type="primary" onClick={() => onDetail(row)}>
							详情
						</el-button>
					);
				},
			},
		},
	],
	data: [],
	params: {
		exportMethod: statisticsOrderAcceptExport,
		exportParams: requestParams,
	},
});
const option = ref<any>({});
// 信件来源统计
const setOption = (legendData: string[], seriesData: any) => {
	option.value = {
		title: {},
		tooltip: {
			// 提示框组件
			trigger: 'axis', // 触发类型
			axisLabel: {
				fontSize: 12, // 文字像素
			},
		},
		legend: {
			top: '1%',
			data: legendData,
			icon: 'roundRect',
		},
		xAxis: {
			data: xData.value, // 数据
			min: 0, // 最小值
			type: 'category',
			boundaryGap: true, // 开始和结尾是否隔开
			axisLabel: {
				color: '#808080', // 文字颜色
				fontSize: 12, // 文字像素
			},
			axisLine: {
				show: false, // 是否显示坐标轴轴线
			},
			axisTick: {
				show: false, // 去除刻度线
			},
		},
		yAxis: {
			type: 'value',
			min: 0, // 最小值
			axisLine: {
				show: false,
			},
			axisLabel: {
				color: '#808080', // 文字颜色
				fontSize: 12, // 文字像素
			},
			// y轴分割线的颜色
			splitLine: {
				lineStyle: {
					color: 'rgba(0,0,0,0.15)', // 分割线的颜色
				},
			},
		},
		series: seriesData,
	};
};
const option1 = ref<any>({});
// 信件来源统计
const setOption1 = (legendData: string[], data: any) => {
	option1.value = {
		title: {},
		tooltip: {
			formatter: '{b0}: {c0} ({d}%)',
		},
		legend: [
			{
				left: 'left',
				top: '40',
				orient: 'vertical',
				data: legendData,
			},
		],
		series: [
			{
				type: 'pie',
				radius: ['0%', '80%'],
				label: {
					show: true,
					overflow: 'none',
					formatter: function (params) {
						if (params.name !== '') {
							return `${params.name}:${params.data.value}（${params.percent}%）`;
						}
					},
				},
				data: data,
			},
		],
	};
};
const option2 = ref<any>({});
// 信件来源统计
const setOption2 = (legendData: string[], data: any) => {
	option2.value = {
		tooltip: {},
		grid: {
			left: '10%',
			right: '10%',
			bottom: '10%',
			containLabel: true,
		},
		series: [
			{
				name: '漏斗图',
				type: 'funnel',
				width: '55%',
				minSize: '15%',
				left: '25%',
				gap: 0,
				labelLayout: {
					verticalAlign: 'top',
				},
				label: {
					show: true,
					position: 'rightTop',
					color: '#4B5265',
					fontSize: 12,
					formatter: (params) => {
						return `${params.data.name}${params.data.value} ${params.data.percent}%`;
					},
				},
				labelLine: {
					show: false,
				},
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 0,
				},
				data: [
					{ name: '浏览1', value: 400, percent: 100 },
					{ name: '浏览2', value: 320, percent: 40 },
					{ name: '浏览3', value: 200, percent: 20 },
					{ name: '浏览4', value: 50, percent: 10 },
					{ name: '浏览5', value: 20, percent: 8 },
				],
			},
		],
	};
};
const ruleFormRef = ref<RefType>(); // 表单ref
/** 搜索按钮操作 */
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
// 获取列表
const queryList = () => {
	state.loading = true;
	gridOptions.loading = true;
	const params = {
		...state.queryParams,
		StartTime: dayjs(monthValue.value).startOf('month').format('YYYY-MM-DD[T]HH:mm:ss'), // 获取当月的开始时间
		EndTime: dayjs(monthValue.value).endOf('month').format('YYYY-MM-DD[T]HH:mm:ss'), // 获取当月的结束时间
	};
	getEarlyPushList(params)
		.then((res) => {
			state.loading = false;
			state.tableData = res.result.items ?? [];
			state.total = res.result.total ?? 0;
			const legendData = ['一级', '二级', '三级', '四级'];
			const seriesData = [
				{
					name: '一级',
					type: 'line',
					data: [5, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 5, 3, 5, 6, 7, 2, 1, 2, 4, 4, 7, 1, 2, 2, 21, 1, 2, 4, 1, 7],
					areaStyle: {
						// 区域填充样式
						color: '#BADEFF', // 填充颜色
					},
					smooth: true,
				},
				{
					name: '二级',
					type: 'line',
					data: [8, 23, 3, 2, 7, 2, 6, 2, 2, 8, 0, 1, 5, 3, 5, 6, 7, 4, 1, 2, 4, 2, 7, 1, 2, 2, 21, 2, 2, 4, 1], // 随机数
					areaStyle: {
						// 区域填充样式
						color: '#C1EDCE', // 填充颜色
					},
					smooth: true,
				},
				{
					name: '三级',
					type: 'line',
					data: [12, 1, 5, 1, 7, 3, 6, 4, 3, 8, 0, 1, 4, 3, 5, 6, 7, 5, 1, 2, 4, 1, 7, 1, 2, 2, 3, 6, 2, 4, 1], // 随机数],
					areaStyle: {
						// 区域填充样式
						color: '#FBECB8', // 填充颜色
					},
					smooth: true,
				},
				{
					name: '四级',
					type: 'line',
					data: [5, 23, 3, 4, 4, 5, 6, 4, 2, 8, 0, 1, 2, 3, 5, 6, 7, 1, 1, 2, 4, 4, 7, 1, 2, 2, 21, 4, 2, 4, 3], // 随机数
					areaStyle: {
						// 区域填充样式
						color: '#BDC2D5', // 填充颜色
					},
					smooth: true,
				},
			];
			setOption(legendData, seriesData);
			setOption1(legendData, [
				{ value: 335, name: '一级' },
				{ value: 310, name: '二级' },
				{ value: 234, name: '三级' },
				{ value: 135, name: '四级' },
			]);
			setOption2();
		})
		.finally(() => {
			state.loading = false;
			gridOptions.loading = false;
		});
};
// 排序
const sortChange = (val: any) => {
	state.queryParams.SortField = val.order ? val.field : null;
	// 0 升序 1 降序
	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
	queryList();
};
// 重置表单
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
// 新增
const pushAddRef = ref<RefType>();
const onAdd = () => {
	pushAddRef.value.openDialog();
};
// 查看详情
const pushDetailRef = ref<RefType>();
const onDetail = (row: any) => {
	pushDetailRef.value.openDialog(row.id);
};
const tableRef = ref<RefType>();
const toolbarRef = ref<RefType>();
// 获取基础信息
const earlyWarningLevel = ref<EmptyArrayType>([]); // 预警级别
const queryBaseInfo = () => {
	getEarlySettingBaseData().then((res) => {
		earlyWarningLevel.value = res.result.earlyWarningLevel ?? [];
	});
};
// 页面加载时
onMounted(() => {
	queryList();
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
	queryBaseInfo();
});
</script>
