<template>
	<div class="statistics-center-analysis-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
				<el-form-item prop="dateType">
					<el-segmented
						v-model="state.queryParams.dateType"
						:options="[
							{ label: '按日统计', value: 'date' },
							{ label: '按周统计', value: 'week' },
							{ label: '按月统计', value: 'month' },
							{ label: '按时间段统计', value: 'datetimerange' },
						]"
						@change="changeDateType"
						:disabled="state.loading"
					/>
				</el-form-item>
				<el-form-item prop="crTime" v-if="state.queryParams.dateType === 'datetimerange'" label="时间">
					<el-date-picker
						v-model="state.queryParams.crTime"
						type="datetimerange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:shortcuts="shortcuts"
						@change="
							() => {
								changeDateType('datetimerange');
							}
						"
						value-format="YYYY-MM-DD[T]HH:mm:ss"
						:default-time="defaultTimeStartEnd"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item prop="time" v-else label="时间">
					<el-date-picker
						v-model="state.queryParams.time"
						:type="state.queryParams.dateType"
						placeholder="选择时间"
						@change="
							() => {
								changeDateType(state.queryParams.dateType);
							}
						"
						:value-format="valueFormat"
						:format="formats"
						:clearable="false"
						:default-time="defaultTimeStartEnd"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="queryList" :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-button class="default-button" :loading="state.loading" @click="exportWord"
					><SvgIcon name="iconfont icon-daochu" class="mr5" /> 导出</el-button
					>
				</el-form-item>
			</el-form>
			<el-scrollbar v-loading="state.loading" class="scrollbar-view">
				<table style="min-width: 90%; margin: 0 auto; text-align: center" ref="exportTableRef">
					<tbody>
					<tr style="height: 60px">
						<td style="vertical-align: top; text-align: center">
							<div style="font-size: 24px; font-weight: bold">{{ tableTitle }}</div>
							<div style="margin-top: 10px; font-size: 22px">{{ dates }}</div>
						</td>
					</tr>
					<tr>
						<td>
							<table style="width: 100%; border: 1px solid #000000; border-collapse: collapse; padding: 0">
								<tbody>
								<tr style="height: 34px">
									<td colspan="4" style="font-size: 16px; font-weight: bold; border-bottom: 1px solid #000000">一、总体情况</td>
								</tr>
								<tr style="height: 34px">
									<td colspan="2" style="font-size: 16px; text-align: left; border-bottom: 1px solid #000000">
										电话总量：{{ centerReportCallData.allCallCount }}
									</td>
									<td colspan="2" style="font-size: 16px; text-align: left; border-bottom: 1px solid #000000">
										居家养老电话总量：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;居家养老呼入接通量：
									</td>
								</tr>
								<tr style="height: 34px">
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">有效</td>
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
										{{ centerReportCallData.effectiveCount }}(接通)
									</td>
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">无效</td>
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000">{{ centerReportCallData.invalidCount }}(未接通)</td>
								</tr>
								<tr style="height: 34px">
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">在IVR中挂断</td>
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
										{{ centerReportCallData.ivrByeCount }}
									</td>
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">在队列中挂断</td>
									<td style="width: 25%; font-size: 16px; border-bottom: 1px solid #000000">{{ centerReportCallData.queueByeCount }}</td>
								</tr>
								<tr style="height: 34px">
									<td colspan="4" style="font-size: 16px; text-align: left; border-bottom: 1px solid #000000">信件回访量</td>
								</tr>
								<tr style="height: 34px">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">已回访量</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
										{{ centerReportVisitdData.visitd }}
									</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">待回访量</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000">{{ centerReportVisitdData.waitVisitd }}</td>
								</tr>
								<tr style="height: 34px">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">坐席满意度</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
										{{ centerReportVisitdData.seatsRate }}%
									</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">部门满意度</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000">{{ centerReportVisitdData.orgRate }}%</td>
								</tr>
								<tr style="height: 34px">
									<td colspan="4" style="font-size: 16px; text-align: left; border-bottom: 1px solid #000000">
										来件总计：{{ centerReportOrderData.allCallCount }}
									</td>
								</tr>
								<tr style="height: 34px">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">有效</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
										{{ centerReportOrderData.effectiveCount }}
									</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">无效</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000">{{ centerReportOrderData.invalidCount }}</td>
								</tr>
								<tr style="height: 34px">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">已办结信件</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
										{{ centerReportOrderData.completedCount }}
									</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">在办信件</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000">{{ centerReportOrderData.inProgressCount }}</td>
								</tr>
								<tr style="height: 34px">
									<td colspan="4" style="font-size: 16px; border-bottom: 1px solid #000000">信件来源</td>
								</tr>
								<tr style="height: 34px">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">来源渠道</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">数量</td>
									<td colspan="2" style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">备注</td>
								</tr>
								<tr style="height: 34px" v-for="(item, index) in centerReportOrderSourceChannelsData" :key="index">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.name }}：</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
									<td colspan="2" style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">
										{{ item.remark }}
									</td>
								</tr>
								<tr style="height: 34px">
									<td colspan="4" style="font-size: 16px; border-bottom: 1px solid #000000">信件分类</td>
								</tr>
								<tr style="height: 34px" v-for="(item, index) in centerReportOrderAcceptTypesData" :key="index">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.name }}</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">所占百分比</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000">{{ item.proportionRate }}%</td>
								</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr>
						<td style="height: 30px">&nbsp;</td>
					</tr>
					<tr>
						<td style="vertical-align: top">
							<table style="width: 100%; border: 1px solid #000000; border-collapse: collapse; padding: 0px">
								<tbody>
								<tr style="height: 34px">
									<td colspan="2" style="font-size: 16px; font-weight: bold; border-bottom: 1px solid #000000">二、信件分布情况</td>
								</tr>
								<tr style="height: 34px">
									<td colspan="2" style="font-size: 16px; text-align: left; border-bottom: 1px solid #000000">
										市本级总计：{{ orgStatisticsCityAllData.orgStatisticsCountAll }}件
									</td>
								</tr>
								<tr style="height: 34px">
									<td style="font-size: 16px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">部门（单位）</td>
									<td style="font-size: 16px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">数 量</td>
								</tr>
								<tr style="height: 34px" v-for="(item, index) in orgStatisticsCityAllData.orgStatistics" :key="index">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.orgName }}</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
								</tr>
								<tr style="height: 34px">
									<td colspan="2" style="font-size: 16px; text-align: left; border-bottom: 1px solid #000000">
										县（区）总计：{{ orgStatisticsAreaAllData.orgStatisticsCountAll }}件
									</td>
								</tr>
								<tr style="height: 34px">
									<td style="font-size: 16px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">县（区）</td>
									<td style="font-size: 16px; width: 40%; border-bottom: 1px solid #000000; border-right: 1px solid #000000">数 量</td>
								</tr>
								<tr style="height: 34px" v-for="(item, index) in orgStatisticsAreaAllData.orgStatistics" :key="index">
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.orgName }}</td>
									<td style="font-size: 16px; border-bottom: 1px solid #000000; border-right: 1px solid #000000">{{ item.countNum }}</td>
								</tr>
								</tbody>
							</table>
						</td>
					</tr>
					</tbody>
				</table>
				<el-backtop target=".scrollbar-view > div" />
			</el-scrollbar>
		</div>
	</div>
</template>
<script setup lang="ts" name="statisticsCenterYBAnalysis">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, FormInstance } from 'element-plus';
import { centerReport } from '@/api/statistics/center';
import { defaultDate, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
import dayjs from 'dayjs';
import { exportAsDocx } from '@/utils/exportAsWord';
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive(<any>{
	queryParams: {
		dateType: 'date', //
		time: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 时间默认今天
		crTime: defaultDate, // 时间默认今天开始到今天结束
	},
	loading: false, // 加载
});
const valueFormat = ref('YYYY-MM-DD');
const formats = ref('YYYY-MM-DD');
const tableTitle = ref('12345市民服务热线办理工作日统计');
const dates = ref<string>(`${dayjs(state.queryParams.time).startOf('day').format('YYYY-MM-DD HH:mm:ss')} 至 ${dayjs(state.queryParams.time)
	.endOf('day').format('YYYY-MM-DD HH:mm:ss')}`);
const changeDateType = (val: string) => {
	switch (val) {
		case 'date':
			valueFormat.value = 'YYYY-MM-DD';
			formats.value = 'YYYY-MM-DD';
			dates.value = `${dayjs(state.queryParams.time).startOf('day').format('YYYY-MM-DD HH:mm:ss')} 至 ${dayjs(state.queryParams.time)
				.endOf('day').format('YYYY-MM-DD HH:mm:ss')}`;
			tableTitle.value = '12345市民服务热线办理工作日统计';
			state.queryParams.crTime = [
				dayjs(state.queryParams.time).startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
				dayjs(state.queryParams.time).endOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
			];
			queryList();
			break;
		case 'month':
			valueFormat.value = 'YYYY-MM';
			formats.value = 'YYYY-MM';
			dates.value = `${dayjs(state.queryParams.time).startOf('month').format('YYYY-MM-DD HH:mm:ss')} 至 ${dayjs(state.queryParams.time)
				.endOf('month')
				.format('YYYY-MM-DD HH:mm:ss')}`;
			tableTitle.value = '12345市民服务热线办理工作月统计';
			state.queryParams.crTime = [
				dayjs(state.queryParams.time).startOf('month').format('YYYY-MM-DD[T]HH:mm:ss'),
				dayjs(state.queryParams.time).endOf('month').format('YYYY-MM-DD[T]HH:mm:ss'),
			];
			queryList();
			break;
		case 'week':
			valueFormat.value = 'YYYY-MM-DD';
			formats.value = 'YYYY 第ww周';
			dates.value = `${dayjs(state.queryParams.time).startOf('week').format('YYYY-MM-DD HH:mm:ss')} 至 ${dayjs(state.queryParams.time)
				.endOf('week')
				.format('YYYY-MM-DD HH:mm:ss')}`;
			tableTitle.value = '12345市民服务热线办理工作周统计';
			state.queryParams.crTime = [
				dayjs(state.queryParams.time).startOf('week').format('YYYY-MM-DD[T]HH:mm:ss'),
				dayjs(state.queryParams.time).endOf('week').format('YYYY-MM-DD[T]HH:mm:ss'),
			];
			queryList();
			break;
		case 'datetimerange':
			dates.value = `${dayjs(state.queryParams.crTime[0]).format('YYYY-MM-DD HH:mm:ss')} 至 ${dayjs(state.queryParams.crTime[1]).format('YYYY-MM-DD HH:mm:ss')}`;
			tableTitle.value = '12345市民服务热线办理工作时间段统计';
			queryList();
			break;
		default:
			valueFormat.value = 'YYYY-MM-DD[T]HH:mm:ss';
			formats.value = 'YYYY-MM-DD[T]HH:mm:ss';
			dates.value = dayjs(state.queryParams.time).format('YYYY-MM-DD HH:mm:ss');
			tableTitle.value = '12345市民服务热线办理工作日统计';
			state.queryParams.crTime = [
				dayjs(state.queryParams.time).startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
				dayjs(state.queryParams.time).endOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
			];
			queryList();
			break;
	}
};
const centerReportCallData = ref<EmptyObjectType>({}); // 电话统计
const centerReportOrderData = ref<EmptyObjectType>({}); // 信件统计
const centerReportOrderAcceptTypesData = ref<EmptyObjectType>([]); // 信件类型统计
const centerReportOrderSourceChannelsData = ref<EmptyObjectType>([]); // 信件来源统计
const centerReportVisitdData = ref<EmptyObjectType>({}); // 信件回访统计
const orgStatisticsAreaAllData = ref<EmptyObjectType>({}); // 区域统计
const orgStatisticsCityAllData = ref<EmptyObjectType>({}); // 城市统计
/** 获取列表 */
const queryList = () => {
	state.loading = true;
	let StartTime = null;
	let EndTime = null;
	if (state.queryParams?.crTime) {
		StartTime = state.queryParams?.crTime[0];
		EndTime = state.queryParams?.crTime[1];
	}
	const request = {
		StartTime,
		EndTime,
	};
	centerReport(request)
		.then((res: any) => {
			const {
				centerReportCall,
				centerReportOrder,
				centerReportOrderAcceptTypes,
				centerReportOrderSourceChannels,
				centerReportVisitd,
				orgStatisticsAreaAll,
				orgStatisticsCityAll,
			} = res.result;

			centerReportCallData.value = centerReportCall;
			centerReportOrderData.value = centerReportOrder;
			centerReportOrderAcceptTypesData.value = centerReportOrderAcceptTypes;
			centerReportOrderSourceChannelsData.value = centerReportOrderSourceChannels;
			centerReportVisitdData.value = centerReportVisitd;
			orgStatisticsAreaAllData.value = orgStatisticsAreaAll;
			orgStatisticsCityAllData.value = orgStatisticsCityAll;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	valueFormat.value = 'YYYY-MM-DD[T]HH:mm:ss';
	formats.value = 'YYYY-MM-DD';
	dates.value = `${dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')} 至 ${dayjs(state.queryParams.time)
		.endOf('day').format('YYYY-MM-DD HH:mm:ss')}`;
	tableTitle.value = '12345市民服务热线办理工作日统计';
	state.queryParams.crTime = [dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')];
	queryList();
}
const exportTableRef = ref<RefType>();
const exportWord = () => {
	ElMessageBox.confirm(`确定要导出（${tableTitle.value}【${dates.value}】），是否继续?`, '提示', {
		confirmButtonText: '确认导出',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			exportAsDocx(exportTableRef.value, `${tableTitle.value}【${dates.value}】`);
		})
		.catch(() => {});
};
onMounted(() => {
	queryList();
});
</script>
