<template>
	<div class="statistics-center-report-container layout-pd">
		<el-card shadow="never">
			<el-skeleton :loading="state.loading" animated :rows="10" :throttle="300">
				<template #default>
					<div class="report-container">
						<div class="report-title">
							<h1 class="mb10">{{ state.reportObj.analysis?.analysisName }}</h1>
							<el-text type="info">{{ formatDate(state.reportObj.analysis?.generatedTime, 'YYYY-mm-dd HH:MM:SS') }}</el-text>
						</div>
						<div class="report-part-one">
							<div class="report-part-one-title">1.导读</div>
							<div class="report-part-one-content">
								本报告就形成该事件的线索进行分析，共有{{ state.reportObj?.introduction?.total }}条线索。
								<span v-for="item in state.reportObj?.introduction?.data">
									其中【{{ item.sourceChannel }}】{{ item.num }} 条，占比{{ item.rate }}%。
								</span>
							</div>
						</div>
						<div class="report-part-two">
							<div class="report-part-two-title">2. 监测总览</div>
							<div class="report-part-two-title-one">2.1 事件来源统计</div>
							<div class="report-part-two-content">
								本事件工单总量为{{ state.reportObj?.introduction?.total }}条，主要来源方式为：{{
									state.reportObj?.introduction?.data[0].sourceChannel
								}}，<span>占总量{{ state.reportObj?.introduction?.data[0].rate }}%。</span>
							</div>
							<v-chart class="sourceChart" :option="sourceOption" ref="sourceChartRef" />
							<div class="report-part-two-title-one">2.2 区域分析</div>
							<div class="report-part-two-content">
								本事件主要集中于：{{ state.reportObj?.area?.areaNames.join('，') }}。
								<span v-for="item in state.reportObj?.area?.data">其中{{ item.areaName }}：{{ item.num }}条，占比{{ item.rate }}%。</span>
							</div>
							<v-chart class="areaChart" :option="areaOption" ref="areaChartRef" />
							<div class="report-part-two-title-one">2.3 办理情况分析</div>
							<div class="report-part-two-content">
								本事件中，办理完成的工单一共{{ state.reportObj?.handle?.handleFiled }}条，办理中的工单一共{{ state.reportObj?.handle?.handle }}条。
							</div>
							<v-chart class="handleChart" :option="handleOption" ref="handleChartRef" />
							<div class="report-part-two-title-one">2.4 事件发展趋势</div>
							<div class="report-part-two-content">
								本事件发展呈上升趋势，截止目前线索量达到{{ state.reportObj?.introduction?.total }}条，请重点关注该事件走势，并制定有效应对措施。
							</div>
						</div>
						<div class="report-part-three">
							<div class="report-part-three-title">3.主要线索</div>
							<table style="width: 90%; border: var(--el-border); border-collapse: collapse; padding: 0; margin: 20px 40px">
								<thead style="height: 40px; background-color: var(--hotline-bg-main-color)">
									<tr>
										<th style="font-weight: bold; border-bottom: var(--el-border); border-right: var(--el-border)">标题</th>
										<th style="font-weight: bold; border-bottom: var(--el-border); border-right: var(--el-border)">受理类型</th>
										<th style="font-weight: bold; border-bottom: var(--el-border); border-right: var(--el-border)">来源渠道</th>
										<th style="font-weight: bold; border-bottom: var(--el-border); border-right: var(--el-border)">生成时间</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="item in state.reportObj?.first" :key="item.id" style="text-align: center; height: 32px">
										<td style="width: 25%; border-bottom: var(--el-border); border-right: var(--el-border)">{{ item.title }}</td>
										<td style="width: 25%; border-bottom: var(--el-border); border-right: var(--el-border)">{{ item.acceptType }}</td>
										<td style="width: 25%; border-bottom: var(--el-border); border-right: var(--el-border)">{{ item.sourceChannel }}</td>
										<td style="width: 25%; border-bottom: var(--el-border); border-right: var(--el-border)">
											{{ formatDate(item.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</template>
			</el-skeleton>
			<div class="ml20">
				<el-button @click="oncancel" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="downloadReport" :loading="state.loading">下 载</el-button>
			</div>
		</el-card>
	</div>
</template>
<script setup lang="ts" name="statisticsCenterDetailReport">
import { formatDate } from '@/utils/formatTime';
import { onMounted, reactive, ref } from 'vue';
import { centerGenerateAnalysisReport } from '@/api/statistics/center';
import { useRoute } from 'vue-router';
import mittBus from '@/utils/mitt';
import { htmlExportPdf } from '@/utils/tools';

const state = reactive<any>({
	loading: false,
	reportObj: {},
});
const sourceOption = ref({});
const sourceChartRef = ref<RefType>();
const setSourceOption = (legendData: any, data: any) => {
	sourceOption.value = {
		tooltip: {
			trigger: 'item',
		},
		legend: {
			pageIconColor: '#333',
			pageIconInactiveColor: '#333',
			icon: 'circle',
			top: 'center',
			right: '0',
			orient: 'vertical',
			itemGap: 20,
			data: legendData,
			textStyle: {
				color: '#333',
				fontSize: 14,
			},
			formatter: (name) => {
				const item = state.reportObj.introduction?.data?.find((item) => item.sourceChannel == name);
				const len = name.length;
				let str = '';
				if (len > 20) {
					name = name.slice(0, 20) + '...';
				} else {
					name = name + str;
				}
				return `${name}  ${item.rate}% (${item.num}件)`; //返回出图例所显示的内容是名称+百分比
			},
		},
		graphic: [
			{
				type: 'text',
				z: 100,
				left: '23%',
				top: '42%',
				style: {
					fill: '#fff',
					text: '100%',
					font: '24px Microsoft YaHei',
				},
			},
			{
				type: 'text',
				z: 100,
				left: '24%',
				top: '56%',
				style: {
					fill: '#fff',
					text: '来源占比',
					font: '14px Microsoft YaHei',
				},
			},
		],
		series: [
			{
				name: '',
				type: 'gauge',
				splitNumber: 10,
				radius: '65%',
				center: ['30%', '50%'],
				startAngle: 0,
				endAngle: 360,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: true,
					lineStyle: {
						width: 4,
					},
					length: 8,
					splitNumber: 3,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				detail: {
					show: false,
				},
			},
			{
				name: '数量', //内部圆
				type: 'pie',
				animation: false,
				clockwise: false,
				radius: '38%',
				center: ['30%', '50%'],
				data: [10],
				itemStyle: {
					color: '#082141',
				},
				label: {
					show: false,
				},
				emphasis: {
					show: false,
					textStyle: {
						fontSize: '14',
					},
				},
				labelLine: {
					show: false,
				},
			},
			{
				name: '',
				type: 'pie',
				radius: ['60%', '80%'],
				center: ['30%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 0,
					borderColor: '#fff',
					borderWidth: 2,
				},
				label: {
					show: false,
					formatter: '{b}：{d}%', // 用来换行
				},
				labelLine: {
					show: false,
				},
				data: data,
			},
		],
	};
};
const areaOption = ref({});
const areaChartRef = ref<RefType>();
const setAreaOption = (legendData: any, data: any) => {
	areaOption.value = {
		tooltip: {
			trigger: 'item',
		},
		legend: {
			pageIconColor: '#333',
			pageIconInactiveColor: '#333',
			icon: 'circle',
			top: 'center',
			right: '0',
			orient: 'vertical',
			itemGap: 20,
			data: legendData,
			textStyle: {
				color: '#333',
				fontSize: 14,
			},
			formatter: (name) => {
				const item = state.reportObj.area?.data?.find((item) => item.areaName == name);
				const len = name.length;
				let str = '';
				if (len > 20) {
					name = name.slice(0, 20) + '...';
				} else {
					name = name + str;
				}
				return `${name}  ${item.rate}% (${item.num}件)`; //返回出图例所显示的内容是名称+百分比
			},
		},
		graphic: [
			{
				type: 'text',
				z: 100,
				left: '23%',
				top: '42%',
				style: {
					fill: '#fff',
					text: '100%',
					font: '24px Microsoft YaHei',
				},
			},
			{
				type: 'text',
				z: 100,
				left: '24%',
				top: '56%',
				style: {
					fill: '#fff',
					text: '来源占比',
					font: '14px Microsoft YaHei',
				},
			},
		],
		series: [
			{
				name: '',
				type: 'gauge',
				splitNumber: 10,
				radius: '65%',
				center: ['30%', '50%'],
				startAngle: 0,
				endAngle: 360,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: true,
					lineStyle: {
						width: 4,
					},
					length: 8,
					splitNumber: 3,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				detail: {
					show: false,
				},
			},
			{
				name: '数量', //内部圆
				type: 'pie',
				animation: false,
				clockwise: false,
				radius: '38%',
				center: ['30%', '50%'],
				data: [10],
				itemStyle: {
					color: '#082141',
				},
				label: {
					show: false,
				},
				emphasis: {
					show: false,
					textStyle: {
						fontSize: '14',
					},
				},
				labelLine: {
					show: false,
				},
			},
			{
				name: '',
				type: 'pie',
				radius: ['60%', '80%'],
				center: ['30%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 0,
					borderColor: '#fff',
					borderWidth: 2,
				},
				label: {
					show: false,
					formatter: '{b}：{d}%', // 用来换行
				},
				labelLine: {
					show: false,
				},
				data: data,
			},
		],
	};
};
const handleOption = ref({});
const handleChartRef = ref<RefType>();
const setHandleOption = (legendData: any, data: any) => {
	handleOption.value = {
		tooltip: {
			trigger: 'item',
		},
		legend: {
			type: 'scroll',
			pageIconColor: '#333',
			pageIconInactiveColor: '#333',
			height: '180',
			icon: 'circle',
			top: 'center',
			right: '0',
			orient: 'vertical',
			itemGap: 20,
			data: legendData,
			textStyle: {
				color: '#333',
				fontSize: 14,
			},
			formatter: (name) => {
				const item = data.find((item) => item.name == name);
				const len = name.length;
				let str = '';
				if (len > 10) {
					name = name.slice(0, 10) + '...';
				} else {
					name = name + str;
				}
				return `${name}  ${item.rate}% (${item.value}件)`; //返回出图例所显示的内容是名称+百分比
			},
		},
		graphic: [
			{
				type: 'text',
				z: 100,
				left: '23%',
				top: '42%',
				style: {
					fill: '#fff',
					text: '100%',
					font: '24px Microsoft YaHei',
				},
			},
			{
				type: 'text',
				z: 100,
				left: '24%',
				top: '56%',
				style: {
					fill: '#fff',
					text: '来源占比',
					font: '14px Microsoft YaHei',
				},
			},
		],
		series: [
			{
				name: '',
				type: 'gauge',
				splitNumber: 10,
				radius: '65%',
				center: ['30%', '50%'],
				startAngle: 0,
				endAngle: 360,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: true,
					lineStyle: {
						width: 4,
					},
					length: 8,
					splitNumber: 3,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				detail: {
					show: false,
				},
			},
			{
				name: '数量', //内部圆
				type: 'pie',
				animation: false,
				clockwise: false,
				radius: '38%',
				center: ['30%', '50%'],
				data: [10],
				itemStyle: {
					color: '#082141',
				},
				label: {
					show: false,
				},
				emphasis: {
					show: false,
					textStyle: {
						fontSize: '14',
					},
				},
				labelLine: {
					show: false,
				},
			},
			{
				name: '',
				type: 'pie',
				radius: ['60%', '80%'],
				center: ['30%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 0,
					borderColor: '#fff',
					borderWidth: 2,
				},
				label: {
					show: false,
					formatter: '{b}：{d}%', // 用来换行
				},
				labelLine: {
					show: false,
				},
				data: data,
			},
		],
	};
};
// 获取报告内容
const getReportContent = (id: string) => {
	state.loading = true;
	centerGenerateAnalysisReport({ AnalysisId: id })
		.then(({ result }) => {
			state.loading = false;
			state.reportObj = result;
			const sourceLegendData = result.introduction?.data.map((item: any) => item.sourceChannel);
			const sourceData = result.introduction?.data.map((item: any) => {
				return {
					name: item.sourceChannel ?? '',
					value: item.num,
					...item,
				};
			});
			setSourceOption(sourceLegendData, sourceData);
			const areaLegendData = result.area?.data.map((item: any) => item.areaName);
			const areaData = result.area?.data.map((item: any) => {
				return {
					name: item.areaName ?? '',
					value: item.num,
					...item,
				};
			});
			setAreaOption(areaLegendData, areaData);
			const handleLegendData = ['办理中', '办理完成'];
			const handleData = [
				{
					name: '办理中',
					value: result.handle?.handle,
					rate: ((result.handle?.handle + result.handle?.handle) / result.handle?.handleFiled) * 100,
				},
				{
					name: '办理完成',
					value: result.handle?.handleFiled,
					rate: ((result.handle?.handle + result.handle?.handleFiled) / result.handle?.handleFiled) * 100,
				},
			];
			setHandleOption(handleLegendData, handleData);
		})
		.catch((e) => {
			console.log(e);
			state.loading = false;
		});
};
// 下载报告
const downloadReport = () => {
	state.loading = true;
	const fileName = `【${state.reportObj.analysis.analysisName}】${formatDate(new Date(), 'YYYYmmddHHMMSS')}.pdf`;
	htmlExportPdf(fileName, 'report-container').then(()=>{state.loading = false;})
};
const route = useRoute();
// 取消 关闭当前页
const oncancel = () => {
	mittBus.emit('clearCache', 'statisticsCenterReportManage');
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
};
onMounted(() => {
	const id = route.params.id as string;
	getReportContent(id);
});
</script>
<style scoped lang="scss">
.report-container {
	padding: 20px 40px;
	.report-title {
		text-align: center;
		border-bottom: var(--el-border);
		padding-bottom: 15px;
		h1 {
			font-size: 32px;
			font-weight: normal;
		}
	}
	.report-part-one {
		margin-top: 15px;
		&-title {
			font-size: 28px;
			font-weight: normal;
		}
		&-content {
			margin-top: 10px;
			text-indent: 2em;
		}
	}
	.report-part-two {
		margin-top: 20px;
		&-title {
			font-size: 28px;
			font-weight: normal;
			&-one {
				font-size: 22px;
				font-weight: normal;
				text-indent: 2em;
				margin-top: 10px;
			}
		}
		&-content {
			margin-top: 10px;
			text-indent: 5em;
		}
		.sourceChart,
		.areaChart,
		.handleChart {
			margin: 10px 80px;
			width: 500px;
			height: 250px;
		}
	}
	.report-part-three {
		margin-top: 20px;
		&-title {
			font-size: 28px;
			font-weight: normal;
		}
	}
}
</style>
