<template>
	<div class="statistics-center-accept-center-container layout-pd">
		<el-card shadow="never">
			<el-tabs v-model="state.active" @tab-change="changeTab">
				<el-tab-pane name="pie" 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" :disabled="state.loading" ref="statisticalTimeRef" />
						</el-form-item>
						<el-form-item label="来电主体" prop="TypeCode">
							<el-select v-model="state.queryParams.TypeCode" placeholder="请选择来电主体" @change="handleQuery">
								<el-option :value="0" label="全部" />
								<el-option :value="1" label="市民" />
								<el-option :value="2" label="企业" />
							</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" :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="12" :xl="12">
					<el-button @click="changePieType" type="primary">切换图表</el-button>
					<v-chart class="chart" :option="option" :loading="state.loading" autoresize />
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<div style="max-height: 55vh">
						<vxe-toolbar
							ref="toolbarRef"
							:loading="state.loading"
							custom
							:refresh="{
								queryMethod: queryList,
							}"
							:tools="[{ toolRender: { name: 'exportAll' } }]"
						>
						</vxe-toolbar>
						<vxe-table
							border
							:loading="state.loading"
							:data="state.tableData"
							:column-config="{ resizable: true }"
							:row-config="{ isCurrent: true, isHover: true, height: 30, keyField: 'id',useKey: true }"
							ref="tableRef"
							height="auto"
							auto-resize
							show-overflow
							:scrollY="{ enabled: true, gt: 100 }"
							id="statisticsCenterAcceptCenter1"
							:custom-config="{ storage: true }"
							showHeaderOverflow
							:params="{ exportMethod: centerAcceptExport, exportParams: requestParams }"
						>
							<vxe-column field="time" title="日期" min-width="90">
								<template #default="{ row }">
									<el-button type="primary" link @click="linkDetail(row)" v-if="!['合计'].includes(row.time)">
										{{ row.time }}
									</el-button>
									<span v-else>{{ row.time }}</span>
								</template>
							</vxe-column>
							<vxe-column field="acceptNum" title="受理总件"></vxe-column>
							<vxe-column field="validNum" title="有效件"></vxe-column>
							<vxe-column field="repetitionNum" title="重复件"></vxe-column>
							<vxe-column field="invalidNum" title="无效件"></vxe-column>
							<vxe-column field="handleNum" title="已办件"></vxe-column>
							<vxe-column field="noHandleNum" title="待办件"></vxe-column>
							<vxe-column field="backNum" title="退回件"></vxe-column>
							<vxe-column field="dutyDeskNum" title="值班坐席">
								<template #default="{ row }">
									<el-button type="primary" link @click="linkDetail(row, 'seat')" v-if="!['合计'].includes(row.time)">
										{{ row.dutyDeskNum }}
									</el-button>
									<span v-else>{{ row.dutyDeskNum }}</span>
								</template>
							</vxe-column>
						</vxe-table>
					</div>
				</el-col>
			</el-row>
			<div v-show="state.active === 'list'" class="w100">
				<el-form :model="state.queryParams1" ref="ruleFormRef2" @submit.native.prevent inline>
					<el-form-item prop="crTime">
						<statistical-time v-model="state.queryParams1.crTime" @change="handleQuery" ref="statisticalTimeRef" />
					</el-form-item>
					<el-form-item label="来电主体" prop="TypeCode">
						<el-select v-model="state.queryParams1.TypeCode" placeholder="请选择来电主体" @change="handleQuery">
							<el-option :value="0" label="全部" />
							<el-option :value="1" label="市民" />
							<el-option :value="2" label="企业" />
						</el-select>
					</el-form-item>
					<el-form-item label-width="0">
						<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-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="toolbarRef1"
						:loading="state.loading"
						custom
						:refresh="{
							queryMethod: queryList,
						}"
						:tools="[{ 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="tableRef1"
						show-overflow
						:scrollY="{ enabled: true, gt: 100 }"
						id="statisticsCenterAcceptCenter2"
						:custom-config="{ storage: true }"
						showHeaderOverflow
						:params="{ exportMethod: centerAcceptExport, exportParams: requestParams }"
						max-height="500px"
					>
						<vxe-column field="time" title="日期" min-width="90">
							<template #default="{ row }">
								<el-button type="primary" link @click="linkDetail(row)" v-if="!['合计'].includes(row.time)">
									{{ row.time }}
								</el-button>
								<span v-else>{{ row.time }}</span>
							</template>
						</vxe-column>
						<vxe-column field="acceptNum" title="受理总件"></vxe-column>
						<vxe-column field="validNum" title="有效件"></vxe-column>
						<vxe-column field="repetitionNum" title="重复件"></vxe-column>
						<vxe-column field="invalidNum" title="无效件"></vxe-column>
						<vxe-column field="handleNum" title="已办件"></vxe-column>
						<vxe-column field="noHandleNum" title="待办件"></vxe-column>
						<vxe-column field="backNum" title="退回件"></vxe-column>
						<vxe-column field="dutyDeskNum" title="值班坐席">
							<template #default="{ row }">
								<el-button type="primary" link @click="linkDetail(row, 'seat')" v-if="!['合计'].includes(row.time)">
									{{ row.dutyDeskNum }}
								</el-button>
								<span v-else>{{ row.dutyDeskNum }}</span>
							</template>
						</vxe-column>
					</vxe-table>
				</div>
		</el-card>
	</div>
</template>
<script setup lang="tsx" name="statisticsCenterAcceptCenter">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { defaultDate } from '@/utils/constants';
import Other from '@/utils/other';
import { centerAccept, centerAcceptExport } from '@/api/statistics/center';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';

const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive<any>({
	queryParams: {
		// 查询条件
		crTime: defaultDate, //
		StartTime: null,
		EndTime: null,
		TypeCode: 0,
	},

	loading: false, // 加载
	active: 'pie',
	queryParams1: {
		crTime: defaultDate, //
		StartTime: null,
		EndTime: null,
		TypeCode: 0,
	},
	tableData1: [], //表单
});
const changeTab = () => {
	statisticalTimeRef.value.reset();
	handleQuery();
};
/** 搜索按钮操作 */
const handleQuery = () => {
	queryList();
};
/** 获取列表 */
const requestParams = ref<EmptyObjectType>({});
const pieData = ref<EmptyArrayType>([]);
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 centerAccept(requestParams.value);
				const xData = response.result.map((item: any) => item.time).filter((item: any) => item !== '合计');
				const seriesData = [
					{
						type: 'bar',
						data: response.result.map((item: any) => item.noHandleNum),
						name: '待办件',
						color: '#91cc75',
					},
					{
						type: 'bar',
						data: response.result.map((item: any) => item.handleNum),
						name: '已办件',
						color: '#5470c6',
					},
				];
				const legendData = ['待办件', '已办件'];
				const totalResult = response.result.find((item: any) => item.time === '合计');
				pieData.value = [
					{
						name: '已办件',
						value: totalResult.handleNum,
					},
					{
						name: '待办件',
						value: totalResult.noHandleNum,
					},
				];
				setOption(legendData, xData, seriesData);
				state.tableData = response.result ?? [];
				state.loading = false;
				break;
			case 'list': // 列表
				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 listResponse = await centerAccept(requestParams.value);
				state.tableData1 = listResponse.result ?? [];
				state.loading = false;
				break;
			default:
				break;
		}
	} catch (e) {
		state.loading = false;
		console.log(e);
	}
};
const type = ref('bar');
const changePieType = () => {
	if (type.value === 'pie') type.value = 'bar';
	else type.value = 'pie';
	queryList();
};
/** 重置按钮操作 */
const ruleFormRef2 = ref<RefType>();
const statisticalTimeRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	ruleFormRef2.value?.resetFields();
	statisticalTimeRef.value.reset();
	queryList();
};
const option = ref<any>({});
// 图表
const setOption = (legendData: any, xData: any, seriesData: any) => {
	const barOptions = {
		title: {
			text: '受理信件统计图',
			left: 'center',
			top: '0',
		},
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: legendData,
			top: '10%',
		},
		grid: {
			left: '0',
			right: '1%',
			bottom: '2%',
			top: '20%',
			containLabel: true,
		},
		xAxis: {
			data: xData,
		},
		yAxis: {
			type: 'value',
		},
		dataZoom: [
			{
				show: true,
				start: 45,
				end: 55,
			},
		],
		series: seriesData,
		animationEasing: 'elasticOut',
		animationDuration: 2000,
	};
	const pieOptions = {
		title: {
			text: '办件分析图',
			left: 'center',
			top: '0',
		},
		tooltip: {
			trigger: 'item',
		},
		color: ['#5470c6', '#91cc75'],
		label: {
			show: true,
			color: 'inherit',
			position: 'outside',
			fontSize: 14,
			formatter: '{b} : {c} ({d}%)',
		},
		legend: {
			orient: 'vertical',
			left: 'left',
			top: '10%',
		},
		series: [
			{
				type: 'pie',
				radius: '50%',
				data: pieData.value,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)',
					},
				},
			},
		],
	};
	option.value = type.value === 'bar' ? barOptions : pieOptions;
};
// 查看详情
const router = useRouter();
const linkDetail = (row: any, type: string = '') => {
	if (type === 'seat') {
		router.push({
			path: '/statistics/center/detailAcceptCenter',
			query: {
				StartTime: dayjs(row.time).startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
				EndTime: dayjs(row.time).endOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
				tagsViewName: `中心受理统计坐席统计`,
				type: 'seat',
			},
		});
	} else {
		router.push({
			path: '/statistics/center/detailAcceptCenter',
			query: {
				StartTime: dayjs(row.time).startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
				EndTime: dayjs(row.time).endOf('day').format('YYYY-MM-DD[T]HH:mm:ss'),
				tagsViewName: `中心受理统计日期统计`,
			},
		});
	}
};
const toolbarRef = ref<RefType>();
const tableRef = ref<RefType>();
const toolbarRef1 = ref<RefType>();
const tableRef1 = ref<RefType>();
onMounted(() => {
	queryList();
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
	if (tableRef1.value && toolbarRef1.value) {
		tableRef1.value.connect(toolbarRef1.value);
	}
});
</script>
<style lang="scss" scoped>
.chart {
	height: 60vh;
	margin-top: 10px;
}
</style>
