<template>
	<div class="statistics-center-publications-container layout-pd">
		<el-card shadow="never">
			<el-tabs v-model="state.active" @tab-change="handleQuery">
				<el-tab-pane name="pie" label="图表"></el-tab-pane>
				<el-tab-pane name="statistics" label="统计"></el-tab-pane>
				<el-tab-pane name="list" label="列表"></el-tab-pane>
			</el-tabs>
			<el-row :gutter="10" v-show="state.active === 'pie'">
				<el-col>
					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
						<el-form-item prop="crTime">
							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" v-model:dateType="dateType1" :disabled="state.loading" />
						</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" :loading="state.loading">
								<SvgIcon name="ele-Refresh" class="mr5" />重置
							</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
					<v-chart class="chart" :option="option" :loading="state.loading" autoresize />
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
					<v-chart class="chart1" :option="option1" :loading="state.loading" autoresize />
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
					<vxe-table
						border
						:loading="state.loading"
						:data="state.tableData"
						:row-config="{ isCurrent: true, isHover: true }"
						show-footer
						:footer-method="footerMethod"
					>
						<vxe-column field="label" title="类型" align="center"></vxe-column>
						<vxe-column field="num" title="数量" align="center"></vxe-column>
					</vxe-table>
				</el-col>
			</el-row>
			<div v-show="state.active === 'statistics'">
				<el-form :model="state.queryParams1" ref="ruleFormRef1" @submit.native.prevent inline>
					<el-form-item prop="crTime">
						<statistical-time v-model="state.queryParams1.crTime" @change="handleQuery" ref="statisticalTimeRef1" />
					</el-form-item>
					<el-form-item label="归档类型" prop="ProcessType">
						<el-select v-model="state.queryParams1.ProcessType" placeholder="请选择归档类型" @change="handleQuery" class="w100" clearable>
							<el-option label="中心归档" :value="10" />
							<el-option label="部门归档" :value="20" />
						</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(ruleFormRef1)" class="default-button" :loading="state.loading">
							<SvgIcon name="ele-Refresh" class="mr5" />重置
						</el-button>
						<el-popover :width="500" trigger="click">
							<template #reference>
								<el-button type="primary" title="口径说明"><SvgIcon name="ele-QuestionFilled" class="mr5" />口径说明</el-button>
							</template>
							<el-descriptions title="" :column="1" border style="max-height: 400px; overflow: auto">
								<el-descriptions-item label="发布人">当前登录系统发布工单的用户</el-descriptions-item>
								<el-descriptions-item label="待发布量">待发布工单总数量</el-descriptions-item>
								<el-descriptions-item label="不公开发布量">勾选不公开发布的工单总量</el-descriptions-item>
								<el-descriptions-item label="公开发布量">勾选公开发布的工单总量</el-descriptions-item>
								<el-descriptions-item label="总量">待发布量+不公开发布量+公开发量</el-descriptions-item>
							</el-descriptions>
						</el-popover>
					</el-form-item>
				</el-form>
				<vxe-toolbar
					ref="toolbarRef"
					:loading="state.loading"
					custom
					:refresh="{
						queryMethod: handleQuery,
					}"
					:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
				>
				</vxe-toolbar>
				<vxe-table
					border
					:loading="state.loading"
					:data="state.tableData1"
					:column-config="{ resizable: true }"
					:row-config="{ isCurrent: true, isHover: true, height: 30, keyField: 'id',useKey: true }"
					ref="tableRef"
					show-overflow
					:scrollY="{ enabled: true, gt: 100 }"
					id="statisticsCenterPublications1"
					:custom-config="{ storage: true }"
					:params="{ exportMethod: centerPublishUserListExport, exportParams: requestParams }"
					max-height="500px"
				>
					<vxe-column field="name" title="发布人"></vxe-column>
					<vxe-column field="waitCount" title="待发布量"></vxe-column>
					<vxe-column field="privateCount" title="不公开发布量"></vxe-column>
					<vxe-column field="publicCount" title="公开发布量"></vxe-column>
					<vxe-column field="totalCount" title="总量"></vxe-column>
				</vxe-table>
				<pagination
					@pagination="queryList"
					:total="state.total1"
					v-model:current-page="state.queryParams1.PageIndex"
					v-model:page-size="state.queryParams1.PageSize"
					:disabled="state.loading"
				/>
			</div>
			<div v-show="state.active === 'list'">
				<el-form :model="state.queryParams2" ref="ruleFormRef2" @submit.native.prevent inline>
					<el-form-item prop="crTime">
						<statistical-time v-model="state.queryParams2.crTime" @change="handleQuery" v-model:dateType="dateType2" />
					</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(ruleFormRef2)" class="default-button" :loading="state.loading">
							<SvgIcon name="ele-Refresh" class="mr5" />重置
						</el-button>
						<el-popover :width="500" trigger="click">
							<template #reference>
								<el-button type="primary" title="口径说明"><SvgIcon name="ele-QuestionFilled" class="mr5" />口径说明</el-button>
							</template>
							<el-descriptions title="" :column="1" border style="max-height: 400px; overflow: auto">
								<el-descriptions-item label="发布时间">工单发布时间</el-descriptions-item>
								<el-descriptions-item label="办理部门">工单最后办理部门</el-descriptions-item>
								<el-descriptions-item label="待发布">工单待发布件</el-descriptions-item>
								<el-descriptions-item label="发布公开">单发布勾选公开</el-descriptions-item>
								<el-descriptions-item label="发布不公开">工单发布勾选不公开</el-descriptions-item>
							</el-descriptions>
						</el-popover>
					</el-form-item>
				</el-form>
				<vxe-toolbar
					ref="toolbarRef2"
					:loading="state.loading"
					custom
					:refresh="{
						queryMethod: handleQuery,
					}"
					:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
				>
				</vxe-toolbar>
				<vxe-table
					border
					:loading="state.loading"
					:data="state.tableData2"
					:column-config="{ resizable: true }"
					:row-config="{ isCurrent: true, isHover: true, height: 30, keyField: 'id',useKey: true }"
					ref="tableRef2"
					auto-resize
					show-overflow
					:scrollY="{ enabled: true, gt: 100 }"
					id="statisticsCenterPublications2"
					:custom-config="{ storage: true }"
					:params="{ exportMethod: centerPublishListExport, exportParams: requestParams }"
					max-height="500px"
				>
					<vxe-column field="publishTime" title="发布时间">
						<template #default="{ row }">
							{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="name" title="办理部门"></vxe-column>
					<vxe-column field="waitCount" title="待发布"></vxe-column>
					<vxe-column field="publicCount" title="发布公开"></vxe-column>
					<vxe-column field="privateCount" title="发布不公开"></vxe-column>
				</vxe-table>
				<pagination
					@pagination="queryList"
					:total="state.total2"
					v-model:current-page="state.queryParams2.PageIndex"
					v-model:page-size="state.queryParams2.PageSize"
					:disabled="state.loading"
				/>
			</div>
		</el-card>
	</div>
</template>
<script setup lang="tsx" name="statisticsCenterPublications">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { defaultDate } from '@/utils/constants';
import Other from '@/utils/other';
import {
	centerPublish,
	centerPublishList,
	centerPublishUserList,
	centerPublishListExport,
	centerPublishUserListExport,
} from '@/api/statistics/center';
import { formatDate } from '@/utils/formatTime';
import XEUtils from 'xe-utils';

const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
// 表格配置项
const columns = ref<any[]>([
	{ prop: 'label', label: '类型', align: 'center' },
	{ prop: 'num', label: '数量', align: 'center' },
]);
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive<any>({
	queryParams: {
		// 查询条件
		TypeId: 0, // 关键词
		Gateway: null,
		crTime: defaultDate, //
		StartTime: null,
		EndTime: null,
	},

	loading: false, // 加载
	active: 'pie',
	queryParams1: {
		crTime: defaultDate, //
		StartTime: null,
		EndTime: null,
		PageIndex: 1,
		PageSize: 10,
		ProcessType: null,
	},
	tableData1: [], //表单
	total1: 0, // 总数
	queryParams2: {
		crTime: defaultDate, //
		StartTime: null,
		EndTime: null,
		PageIndex: 1,
		PageSize: 10,
	},
	tableData2: [], //表单
	total2: 0, // 总数
});
/** 搜索按钮操作 */
const handleQuery = () => {
	state.queryParams1.PageIndex = 1;
	state.queryParams2.PageIndex = 1;
	queryList();
};
/** 获取列表 */
const requestParams = ref<EmptyObjectType>({});
const queryList = async () => {
	state.loading = true;
	try {
		switch (state.active) {
			case 'pie': // 图表
				requestParams.value = Other.deepClone(state.queryParams);
				requestParams.value.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
				requestParams.value.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
				Reflect.deleteProperty(requestParams.value, 'crTime');
				const response = await centerPublish(requestParams.value);
				state.tableData = [
					{
						label: '待发布',
						num: response.result.waitCount,
					},
					{
						label: '发布公开',
						num: response.result.publicCount,
					},
					{
						label: '发布不公开',
						num: response.result.privateCount,
					},
				];
				const xData = state.tableData.map((item: any) => item.label);
				const seriesData = {
					type: 'bar',
					barWidth: '30%',
					color: '#4e84fd',
					data: state.tableData.map((item: any) => item.num),
				};
				setOption(xData, seriesData);
				const legendData = state.tableData.map((item: any) => item.label);
				const seriesData1 = state.tableData.map((item: any) => {
					return { value: item.num, name: item.label };
				});
				setOption1(legendData, seriesData1);
				state.loading = false;
				break;
			case 'statistics': // 统计
				requestParams.value = Other.deepClone(state.queryParams1);
				requestParams.value.StartTime = state.queryParams1.crTime === null ? null : state.queryParams1.crTime[0];
				requestParams.value.EndTime = state.queryParams1.crTime === null ? null : state.queryParams1.crTime[1];
				Reflect.deleteProperty(requestParams.value, 'crTime');
				const { result } = await centerPublishUserList(requestParams.value);
				state.tableData1 = result.items ?? [];
				state.total1 = result.total;
				state.loading = false;
				break;
			case 'list': // 列表
				requestParams.value = Other.deepClone(state.queryParams2);
				requestParams.value.StartTime = state.queryParams2.crTime === null ? null : state.queryParams2.crTime[0];
				requestParams.value.EndTime = state.queryParams2.crTime === null ? null : state.queryParams2.crTime[1];
				Reflect.deleteProperty(requestParams.value, 'crTime');
				const listResponse = await centerPublishList(requestParams.value);
				state.tableData2 = listResponse.result?.items ?? [];
				state.total2 = listResponse.result?.total;
				state.loading = false;
				break;
			default:
				break;
		}
	} catch (e) {
		state.loading = false;
		console.log(e);
	}
};
/** 重置按钮操作 */
const ruleFormRef1 = ref<RefType>();
const ruleFormRef2 = ref<RefType>();
const dateType1 = ref('date');
const dateType2 = ref('date');
const dateType = ref('date');
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	if (state.active === 'list') {
		dateType2.value = 'date';
	} else if (state.active === 'statistics') {
		dateType1.value = 'date';
	} else {
		dateType.value = 'date';
	}
	queryList();
};
const option = ref<any>({});
const colors = [
	'#4e84fd',
	'#ffc855',
	'#98e79b',
	'#00d695',
	'#00b29a',
	'#5470c6',
	'#91cc75',
	'#fac858',
	'#ee6666',
	'#73c0de',
	'#3ba272',
	'#fc8452',
	'#9a60b4',
	'#ea7ccc',
];
// 信件来源统计
const setOption = (xData: any, seriesData: any) => {
	option.value = {
		title: {
			text: '发布量柱状图统计',
			left: 'center',
			top: '0',
		},
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			show: false,
		},
		grid: {
			left: '0',
			right: '1%',
			bottom: '2%',
			top: '20%',
			containLabel: true,
		},
		xAxis: {
			data: xData,
		},
		yAxis: {
			type: 'value',
		},
		series: seriesData,
		animationEasing: 'elasticOut',
		animationDuration: 2000,
	};
};
const option1 = ref<EmptyObjectType>({});
// 玫瑰图
const setOption1 = (legendData: any, seriesData: any) => {
	option1.value = {
		title: {
			text: '发布量玫瑰图统计',
			left: 'center',
			top: '0',
		},
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c} ({d}%)',
		},
		legend: {
			show: true,
			orient: 'horizontal',
			top: '10%',
			data: legendData,
		},
		color: colors,
		calculable: true,
		series: [
			{
				type: 'pie',
				radius: ['35%', '55%'],
				center: ['50%', '60%'],
				roseType: 'radius',
				label: {
					show: true,
					color: 'inherit',
					position: 'outside',
					fontSize: 14,
					formatter: '{b} : {c} ({d}%)',
				},
				labelLine: {
					length: 10,
					length2: 30,
					smooth: true,
				},
				data: seriesData,
			},
		],
	};
};
// 计算合计
const footerMethod = ({ columns, data }) => {
	return [
		columns.map((column: any, columnIndex: number) => {
			if (columnIndex === 0) {
				return '合计';
			}
			if (['num'].includes(column.property)) {
				return XEUtils.sum(data, column.property);
			}
		}),
	];
};
const toolbarRef = ref<RefType>();
const tableRef = ref<RefType>();
const toolbarRef2 = ref<RefType>();
const tableRef2 = ref<RefType>();
onMounted(() => {
	queryList();
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
	if (tableRef2.value && toolbarRef2.value) {
		tableRef2.value.connect(toolbarRef2.value);
	}
});
</script>
<style lang="scss" scoped>
.chart {
	height: 60vh;
	margin-top: 10px;
}
</style>
