<template>
	<div class="ads-summary-monitor">
		<el-card shadow="hover">
			<template #header>
				<div class="card-header">
					<span>监控总表</span>
					<el-button type="text" v-debounce @click="openSettingDialog" class="setting-btn">
						<el-icon><Setting /></el-icon>
						<span>设置</span>
					</el-button>
				</div>
			</template>
			<el-tabs v-model="activeTab" class="tabs-container">
				<el-tab-pane label="数据趋势" name="trend">
					<div class="chart-container">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-card>
									<template #header>
										<div class="card-header">预算执行趋势</div>
									</template>
									<div ref="trendChartRef" class="chart" style="width: 100%; height: 600px"></div>
								</el-card>
							</el-col>
						</el-row>
					</div>
					<div class="table-container">
						<el-card>
							<template #header>
								<div class="card-header">
									<span>部门执行明细</span>
									<el-form :model="searchParams" :inline="true" class="search-form">
										<el-form-item label="时间范围">
											<el-date-picker
												v-model="searchParams.dateRange"
												type="daterange"
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												value-format="YYYY-MM-DD"
												:shortcuts="dateShortcuts"
											/>
										</el-form-item>
										<el-form-item label="部门">
											<el-select v-model="searchParams.department" placeholder="选择部门">
												<el-option v-for="option in departmentOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" />
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" v-debounce @click="handleSearch">查询</el-button>
											<el-button v-debounce @click="handleReset">重置</el-button>
										</el-form-item>
									</el-form>
								</div>
							</template>
							<el-table :data="trendTableData" style="width: 100%">
								<el-table-column prop="department" label="部门" />
								<el-table-column prop="data" label="数据" />
							</el-table>
						</el-card>
					</div>
				</el-tab-pane>
				<el-tab-pane label="部门分析" name="department">
					<div class="chart-container">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-card>
									<template #header>
										<div class="card-header">部门达成率分析</div>
									</template>
									<div ref="departmentChartRef" class="chart" style="width: 100%; height: 600px"></div>
								</el-card>
							</el-col>
						</el-row>
					</div>
					<div class="table-container">
						<el-card>
							<template #header>
								<div class="card-header">
									<span>部门预算执行明细</span>
									<el-form :model="searchParams" :inline="true" class="search-form">
										<el-form-item label="时间范围">
											<el-date-picker
												v-model="searchParams.dateRange"
												type="daterange"
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												value-format="YYYY-MM-DD"
												:shortcuts="dateShortcuts"
											/>
										</el-form-item>
										<el-form-item label="部门">
											<el-select v-model="searchParams.department" placeholder="选择部门">
												<el-option v-for="option in departmentOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" />
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" v-debounce @click="handleSearch">查询</el-button>
											<el-button v-debounce @click="handleReset">重置</el-button>
										</el-form-item>
									</el-form>
								</div>
							</template>
							<el-table :data="departmentTableData" style="width: 100%">
								<el-table-column prop="department" label="部门" />
								<el-table-column prop="monthlyBudget" label="月度任务" />
								<el-table-column prop="executed" label="已达成" />
								<el-table-column prop="achievementRate" label="达成率">
									<template #default="scope">{{ scope.row.achievementRate }}%</template>
								</el-table-column>
								<el-table-column prop="surplusBudget" label="剩余任务" />
								<el-table-column prop="dailyAverage" label="剩余日均" />
								<el-table-column prop="yesterday" label="昨日" />
								<el-table-column prop="estimatedAchievement" label="预计达成" />
								<el-table-column prop="dailyDifference" label="日均差" />
								<el-table-column prop="previousDay" label="前日" />
								<el-table-column prop="sequentialRatio" label="环比" />
								<el-table-column prop="timeProgress" label="对比时间进度" />
								<el-table-column prop="januaryAchievement" label="1月达成" />
								<el-table-column prop="januarySequentialRatio" label="环比" />
								<el-table-column prop="differenceFromTarget" label="目标差" />
							</el-table>
						</el-card>
					</div>
				</el-tab-pane>
				<el-tab-pane label="任务进度" name="progress">
					<div class="chart-container">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-card>
									<template #header>
										<div class="card-header">任务进度分析</div>
									</template>
									<div ref="progressChartRef" class="chart" style="width: 100%; height: 600px"></div>
								</el-card>
							</el-col>
						</el-row>
					</div>
					<div class="table-container">
						<el-card>
							<template #header>
								<div class="card-header">
									<span>任务进度明细</span>
									<el-form :model="searchParams" :inline="true" class="search-form">
										<el-form-item label="时间范围">
											<el-date-picker
												v-model="searchParams.dateRange"
												type="daterange"
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												value-format="YYYY-MM-DD"
												:shortcuts="dateShortcuts"
											/>
										</el-form-item>
										<el-form-item label="部门">
											<el-select v-model="searchParams.department" placeholder="选择部门">
												<el-option v-for="option in departmentOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" />
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="handleSearch">查询</el-button>
											<el-button @click="handleReset">重置</el-button>
										</el-form-item>
									</el-form>
								</div>
							</template>
							<el-table :data="progressTableData" style="width: 100%">
								<el-table-column prop="date" label="日期" />
								<el-table-column prop="quarterFirstDay" label="季度第一天" />
								<el-table-column prop="quarterLastDay" label="季度最后一天" />
								<el-table-column prop="textAudit" label="文本审核" />
								<el-table-column prop="homeCount" label="家居次数" />
								<el-table-column prop="completedCount" label="已完成次数" />
								<el-table-column prop="remainingDays" label="剩余天数" />
								<el-table-column prop="quarterSecondMonth" label="季度二月" />
								<el-table-column prop="textAudit2" label="文本审核2" />
							</el-table>
						</el-card>
					</div>
				</el-tab-pane>
				<el-tab-pane label="客户监控" name="customer">
					<div class="chart-container">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-card>
									<template #header>
										<div class="card-header">客户数据趋势</div>
									</template>
									<div ref="customerChartRef" class="chart" style="width: 100%; height: 600px"></div>
								</el-card>
							</el-col>
						</el-row>
					</div>
					<div class="table-container">
						<el-card>
							<template #header>
								<div class="card-header">
									<span>监控总表</span>
									<el-form :model="customerSearchParams" :inline="true" class="search-form">
										<el-form-item label="客户">
											<el-input v-model="customerSearchParams.customer" placeholder="搜索客户" style="width: 180px" />
										</el-form-item>
										<el-form-item label="状态">
											<el-select v-model="customerSearchParams.status" placeholder="选择状态" style="width: 120px">
												<el-option label="全部" value="" />
												<el-option label="正常" value="normal" />
												<el-option label="异常" value="abnormal" />
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" v-debounce @click="handleCustomerSearch">查询</el-button>
											<el-button v-debounce @click="handleCustomerReset">重置</el-button>
										</el-form-item>
									</el-form>
								</div>
							</template>
							<el-table :data="customerTableData" style="width: 100%" border>
								<el-table-column prop="customer" label="客户" width="150" />
								<el-table-column prop="date1" label="2026/2/7" width="120">
									<template #default="scope">
										<span :class="scope.row.date1 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date1 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date2" label="2026/2/8" width="120">
									<template #default="scope">
										<span :class="scope.row.date2 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date2 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date3" label="2026/2/9" width="120">
									<template #default="scope">
										<span :class="scope.row.date3 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date3 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date4" label="2026/2/10" width="120">
									<template #default="scope">
										<span :class="scope.row.date4 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date4 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date5" label="2026/2/11" width="120">
									<template #default="scope">
										<span :class="scope.row.date5 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date5 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date6" label="2026/2/12" width="120">
									<template #default="scope">
										<span :class="scope.row.date6 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date6 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date7" label="2026/2/15" width="120">
									<template #default="scope">
										<span :class="scope.row.date7 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date7 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date8" label="2026/2/16" width="120">
									<template #default="scope">
										<span :class="scope.row.date8 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date8 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date9" label="2026/2/17" width="120">
									<template #default="scope">
										<span :class="scope.row.date9 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date9 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date10" label="2026/2/18" width="120">
									<template #default="scope">
										<span :class="scope.row.date10 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date10 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date11" label="2026/2/19" width="120">
									<template #default="scope">
										<span :class="scope.row.date11 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date11 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date12" label="2026/2/20" width="120">
									<template #default="scope">
										<span :class="scope.row.date12 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date12 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date13" label="2026/2/21" width="120">
									<template #default="scope">
										<span :class="scope.row.date13 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date13 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date14" label="2026/2/22" width="120">
									<template #default="scope">
										<span :class="scope.row.date14 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date14 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date15" label="2026/2/23" width="120">
									<template #default="scope">
										<span :class="scope.row.date15 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date15 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date16" label="2026/2/24" width="120">
									<template #default="scope">
										<span :class="scope.row.date16 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date16 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date17" label="2026/2/25" width="120">
									<template #default="scope">
										<span :class="scope.row.date17 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date17 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date18" label="2026/2/26" width="120">
									<template #default="scope">
										<span :class="scope.row.date18 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date18 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date19" label="2026/2/27" width="120">
									<template #default="scope">
										<span :class="scope.row.date19 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date19 }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="date20" label="2026/2/28" width="120">
									<template #default="scope">
										<span :class="scope.row.date20 >= 0 ? 'text-green' : 'text-red'">
											{{ scope.row.date20 }}
										</span>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</div>
				</el-tab-pane>
			</el-tabs>

			<el-dialog v-model="dialogVisible" title="任务设置" width="400px">
				<el-form :model="taskSettings" label-width="120px">
					<el-form-item label="任务类型">
						<el-radio-group v-model="taskSettings.taskType">
							<el-radio label="monthly">月度任务</el-radio>
							<el-radio label="quarterly">季度任务</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="总任务金额">
						<el-input-number v-model="taskSettings.totalBudget" :min="0" :step="10000" />
					</el-form-item>
					<el-form-item label="部门任务分配">
						<el-button type="primary" v-debounce @click="openDepartmentTaskDialog">设置部门任务</el-button>
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button v-debounce @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" v-debounce @click="handleSaveSettings">保存设置</el-button>
					</span>
				</template>
			</el-dialog>

			<el-dialog v-model="departmentTaskDialogVisible" title="部门任务分配" width="600px">
				<el-table :data="departmentTasks" style="width: 100%">
					<el-table-column prop="department" label="部门" />
					<el-table-column prop="budget" label="任务金额">
						<template #default="scope">
							<el-input-number v-model="scope.row.budget" :min="0" :step="10000" />
						</template>
					</el-table-column>
				</el-table>
				<template #footer>
					<span class="dialog-footer">
						<el-button v-debounce @click="departmentTaskDialogVisible = false">取消</el-button>
						<el-button type="primary" v-debounce @click="saveDepartmentTasks">保存分配</el-button>
					</span>
				</template>
			</el-dialog>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
import { Setting } from '@element-plus/icons-vue';

interface DepartmentData {
	department: string;
	monthlyBudget: string;
	executed: string;
	achievementRate: string;
	surplusBudget: string;
	surplusDays: string;
	dailyAverage: string;
	yesterday: string;
	estimatedAchievement: string;
	dailyDifference: string;
	previousDay: string;
	sequentialRatio: string;
	timeProgress: string;
	januaryAchievement: string;
	januarySequentialRatio: string;
	differenceFromTarget: string;
}

interface TrendData {
	department: string;
	data: string;
}

interface ProgressData {
	date: string;
	quarterFirstDay: string;
	quarterLastDay: string;
	textAudit: string;
	homeCount: string;
	completedCount: string;
	remainingDays: string;
	quarterSecondMonth: string;
	textAudit2: string;
}

interface DepartmentTask {
	department: string;
	budget: number;
}

interface CustomerData {
	customer: string;
	date1: number;
	date2: number;
	date3: number;
	date4: number;
	date5: number;
	date6: number;
	date7: number;
	date8: number;
	date9: number;
	date10: number;
	date11: number;
	date12: number;
	date13: number;
	date14: number;
	date15: number;
	date16: number;
	date17: number;
	date18: number;
	date19: number;
	date20: number;
}

const departmentOptions = [
	{ label: '全部', value: 'all' },
	{ label: '一区一部', value: '一区一部' },
	{ label: '一区二部', value: '一区二部' },
	{ label: '一区三部', value: '一区三部' },
	{ label: '一区四部', value: '一区四部' },
	{ label: '代理运营总', value: '代理运营总' },
	{ label: '渠道部', value: '渠道部' },
	{ label: '电商一部', value: '电商一部' },
	{ label: '电商二部', value: '电商二部' },
	{ label: '张哥自营', value: '张哥自营' },
	{ label: '电商合计', value: '电商合计' },
	{ label: '金牛总任务', value: '金牛总任务' },
];

const searchParams = reactive({
	dateRange: [],
	department: '',
});

const customerSearchParams = reactive({
	customer: '',
	status: '',
});

const dateShortcuts = [
	{
		text: '最近7天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: '最近30天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: '最近90天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];

const activeTab = ref('trend');
const dialogVisible = ref(false);
const departmentTaskDialogVisible = ref(false);

const taskSettings = reactive({
	taskType: 'monthly',
	totalBudget: 52000000,
});

const departmentTasks = ref<DepartmentTask[]>([
	{ department: '一区一部', budget: 1300000 },
	{ department: '一区二部', budget: 3500000 },
	{ department: '一区三部', budget: 2100000 },
	{ department: '一区四部', budget: 1600000 },
	{ department: '代理运营总', budget: 8500000 },
	{ department: '渠道部', budget: 3000000 },
	{ department: '电商一部', budget: 4700000 },
	{ department: '电商二部', budget: 2800000 },
	{ department: '张哥自营', budget: 6000000 },
	{ department: '电商合计', budget: 13500000 },
	{ department: '金牛总任务', budget: 52000000 },
]);

const trendChartRef = ref();
const departmentChartRef = ref();
const progressChartRef = ref();
const customerChartRef = ref();
let trendChart: echarts.ECharts | null = null;
let departmentChart: echarts.ECharts | null = null;
let progressChart: echarts.ECharts | null = null;
let customerChart: echarts.ECharts | null = null;

const totalStats = reactive({
	totalBudget: '0',
	executed: '0',
	overallRate: '0',
	dailyAverage: '0',
});

const data = ref<DepartmentData[]>([]);
const trendTableData = ref<TrendData[]>([]);
const departmentTableData = ref<DepartmentData[]>([]);
const progressTableData = ref<ProgressData[]>([]);
const customerTableData = ref<CustomerData[]>([]);

const getMockData = (): DepartmentData[] => {
	// 根据图片中的数据生成模拟数据
	const departments = [
		{
			name: '一区一部',
			monthlyBudget: '1300000',
			executed: '937947.12',
			achievementRate: '72.15',
			surplusBudget: '362052.88',
			surplusDays: '21',
			dailyAverage: '17240.61',
			yesterday: '36129.91',
			estimatedAchievement: '130.51%',
			dailyDifference: '18889.30',
			previousDay: '47003.57',
			sequentialRatio: '-10873.66',
			timeProgress: '42%',
			januaryAchievement: '1547156.813',
			januarySequentialRatio: '-16%',
			differenceFromTarget: '-7%',
		},
		{
			name: '一区二部',
			monthlyBudget: '3500000',
			executed: '2338291.84',
			achievementRate: '66.81',
			surplusBudget: '1161708.16',
			surplusDays: '21',
			dailyAverage: '55319.44',
			yesterday: '106494.91',
			estimatedAchievement: '130.71%',
			dailyDifference: '51175.47',
			previousDay: '105791.93',
			sequentialRatio: '702.97',
			timeProgress: '37%',
			januaryAchievement: '3789374.035',
			januarySequentialRatio: '-8%',
			differenceFromTarget: '2%',
		},
		{
			name: '一区三部',
			monthlyBudget: '2100000',
			executed: '1896655.41',
			achievementRate: '90.32',
			surplusBudget: '203344.59',
			surplusDays: '21',
			dailyAverage: '9683.07',
			yesterday: '55613.03',
			estimatedAchievement: '145.93%',
			dailyDifference: '45928.43',
			previousDay: '53994.08',
			sequentialRatio: '1618.95',
			timeProgress: '60%',
			januaryAchievement: '2861643.583',
			januarySequentialRatio: '-27%',
			differenceFromTarget: '-19%',
		},
		{
			name: '一区四部',
			monthlyBudget: '1600000',
			executed: '1960555.94',
			achievementRate: '122.53',
			surplusBudget: '-360555.94',
			surplusDays: '21',
			dailyAverage: '-17169.33',
			yesterday: '66458.76',
			estimatedAchievement: '209.76%',
			dailyDifference: '83628.09',
			previousDay: '79558.31',
			sequentialRatio: '-1309.55',
			timeProgress: '93%',
			januaryAchievement: '2216583.797',
			januarySequentialRatio: '-28%',
			differenceFromTarget: '-20%',
		},
		{
			name: '代理运营总',
			monthlyBudget: '8500000',
			executed: '7134418.26',
			achievementRate: '83.93',
			surplusBudget: '1365581.74',
			surplusDays: '21',
			dailyAverage: '65027.70',
			yesterday: '264596.76',
			estimatedAchievement: '149.32%',
			dailyDifference: '199682.28',
			previousDay: '286347.89',
			sequentialRatio: '-21651.29',
			timeProgress: '54%',
			januaryAchievement: '10414758.23',
			januarySequentialRatio: '-18%',
			differenceFromTarget: '-10%',
		},
		{
			name: '渠道部',
			monthlyBudget: '3000000',
			executed: '29134092.68',
			achievementRate: '97.11',
			surplusBudget: '865907.32',
			surplusDays: '21',
			dailyAverage: '41233.68',
			yesterday: '806116.365',
			estimatedAchievement: '153.54%',
			dailyDifference: '764882.68',
			previousDay: '844507.14',
			sequentialRatio: '-38390.78',
			timeProgress: '67%',
			januaryAchievement: '39078360.25',
			januarySequentialRatio: '-23%',
			differenceFromTarget: '-15%',
		},
		{
			name: '电商一部',
			monthlyBudget: '4700000',
			executed: '3993326.756',
			achievementRate: '83.88',
			surplusBudget: '706673.24',
			surplusDays: '21',
			dailyAverage: '33651.11',
			yesterday: '125785.982',
			estimatedAchievement: '140.02%',
			dailyDifference: '89563.45',
			previousDay: '132741.39',
			sequentialRatio: '-6955.41',
			timeProgress: '54%',
			januaryAchievement: '4522665.91',
			januarySequentialRatio: '4%',
			differenceFromTarget: '15%',
		},
		{
			name: '电商二部',
			monthlyBudget: '2800000',
			executed: '1302679.056',
			achievementRate: '46.52',
			surplusBudget: '1497320.94',
			surplusDays: '21',
			dailyAverage: '7130.10',
			yesterday: '26049.373',
			estimatedAchievement: '66.06%',
			dailyDifference: '-45251.62',
			previousDay: '27892.62',
			sequentialRatio: '-1843.24',
			timeProgress: '17%',
			januaryAchievement: '2776056.70',
			januarySequentialRatio: '1%',
			differenceFromTarget: '12%',
		},
		{
			name: '张哥自营',
			monthlyBudget: '6000000',
			executed: '9770673.61',
			achievementRate: '162.84',
			surplusBudget: '-3770673.61',
			surplusDays: '21',
			dailyAverage: '-179555.89',
			yesterday: '392448.463',
			estimatedAchievement: '300.20%',
			dailyDifference: '572004.35',
			previousDay: '331376.53',
			sequentialRatio: '61071.93',
			timeProgress: '133%',
			januaryAchievement: '8310458.83',
			januarySequentialRatio: '-28%',
			differenceFromTarget: '-20%',
		},
		{
			name: '电商合计',
			monthlyBudget: '13500000',
			executed: '15012801.94',
			achievementRate: '111.21',
			surplusBudget: '-1512801.94',
			surplusDays: '21',
			dailyAverage: '-72038.19',
			yesterday: '544283.818',
			estimatedAchievement: '195.87%',
			dailyDifference: '616316.17',
			previousDay: '492286.58',
			sequentialRatio: '5207.28',
			timeProgress: '81%',
			januaryAchievement: '15609181.44',
			januarySequentialRatio: '-14%',
			differenceFromTarget: '-4%',
		},
		{
			name: '金牛总任务',
			monthlyBudget: '52000000',
			executed: '51280190.4',
			achievementRate: '98.62',
			surplusBudget: '719809.60',
			surplusDays: '21',
			dailyAverage: '34276.65',
			yesterday: '1615096.78',
			estimatedAchievement: '163.84%',
			dailyDifference: '1622865.58',
			previousDay: '1622865.58',
			sequentialRatio: '-7768.79',
			timeProgress: '69%',
			januaryAchievement: '65108327.29',
			januarySequentialRatio: '-20%',
			differenceFromTarget: '-12%',
		},
	];

	const mockData: DepartmentData[] = departments.map((dept) => ({
		department: dept.name,
		monthlyBudget: dept.monthlyBudget,
		executed: dept.executed,
		achievementRate: dept.achievementRate,
		surplusBudget: dept.surplusBudget,
		surplusDays: dept.surplusDays,
		dailyAverage: dept.dailyAverage,
		yesterday: dept.yesterday,
		estimatedAchievement: dept.estimatedAchievement,
		dailyDifference: dept.dailyDifference,
		previousDay: dept.previousDay,
		sequentialRatio: dept.sequentialRatio,
		timeProgress: dept.timeProgress,
		januaryAchievement: dept.januaryAchievement,
		januarySequentialRatio: dept.januarySequentialRatio,
		differenceFromTarget: dept.differenceFromTarget,
	}));

	return mockData;
};

const getTrendTableData = (): TrendData[] => {
	const departments = [
		{ name: '一区一部', data: '1487551.85' },
		{ name: '一区二部', data: '3526692.48' },
		{ name: '一区三部', data: '1666811.56' },
		{ name: '一区四部', data: '1551268.30' },
		{ name: '代理运营总', data: '8232324.19' },
		{ name: '渠道部', data: '5976545.88' },
		{ name: '电商一部', data: '2159880.32' },
		{ name: '电商二部', data: '1365144.30' },
		{ name: '张哥自营', data: '5569665.85' },
		{ name: '电商合计', data: '9094690.47' },
		{ name: '金牛总任务', data: '23303560.56' },
	];

	return departments.map((dept) => ({
		department: dept.name,
		data: dept.data,
	}));
};

const getProgressTableData = (): ProgressData[] => {
	return [
		{
			date: '2026/4/10',
			quarterFirstDay: '2026/4/1',
			quarterLastDay: '2026/6/30',
			textAudit: '2026/4/1',
			homeCount: '91',
			completedCount: '9',
			remainingDays: '82',
			quarterSecondMonth: '2026/5/1',
			textAudit2: '2026/3/31',
		},
		{
			date: '2026/4/10',
			quarterFirstDay: '2026/4/1',
			quarterLastDay: '2026/6/30',
			textAudit: '2026/4/1',
			homeCount: '30',
			completedCount: '9',
			remainingDays: '21',
			quarterSecondMonth: '2026/5/1',
			textAudit2: '2026/3/31',
		},
	];
};

const getCustomerTableData = (): CustomerData[] => {
	return [
		{
			customer: '客户1',
			date1: 18168312,
			date2: 18628392,
			date3: 3985,
			date4: 20786,
			date5: 191584,
			date6: 359278,
			date7: 3870546,
			date8: 3873374,
			date9: 4457089,
			date10: 4295086,
			date11: 2672587,
			date12: 1569225,
			date13: 114875,
			date14: 279896,
			date15: 396185,
			date16: 291112,
			date17: 215208,
			date18: 0,
			date19: 0,
			date20: 0,
		},
		{
			customer: '客户2',
			date1: 12345678,
			date2: 87654321,
			date3: 12345,
			date4: 54321,
			date5: 987654,
			date6: 456789,
			date7: 2345678,
			date8: 8765432,
			date9: 3456789,
			date10: 9876543,
			date11: 4567890,
			date12: 1234567,
			date13: 234567,
			date14: 345678,
			date15: 456789,
			date16: 567890,
			date17: 678901,
			date18: 789012,
			date19: 890123,
			date20: 901234,
		},
		{
			customer: '客户3',
			date1: 98765432,
			date2: 23456789,
			date3: 98765,
			date4: 56789,
			date5: 1234567,
			date6: 7654321,
			date7: 3456789,
			date8: 9876543,
			date9: 4567890,
			date10: 12345678,
			date11: 87654321,
			date12: 23456789,
			date13: 9876543,
			date14: 4567890,
			date15: 1234567,
			date16: 7654321,
			date17: 3456789,
			date18: 9876543,
			date19: 4567890,
			date20: 1234567,
		},
	];
};

const calculateTotalStats = (_data: DepartmentData[]) => {
	totalStats.totalBudget = '52000000';
	totalStats.executed = '51280190.4';
	totalStats.overallRate = '98.62';
	totalStats.dailyAverage = '1654199.70';
};

const initTrendChart = () => {
	nextTick(() => {
		if (!trendChartRef.value) return;

		if (trendChart) trendChart.dispose();
		trendChart = echarts.init(trendChartRef.value);

		// 生成动态日期数据
		const dates: string[] = [];
		const today = new Date();
		for (let i = 15; i >= 0; i--) {
			const date = new Date(today);
			date.setDate(today.getDate() - i);
			dates.push(`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`);
		}

		// 使用图片中的数据模式，生成动态数据
		const executedData = [
			2149518.05, 1871119.64, 2088655.19, 1702786.8, 1770269.31, 1714822.74, 1649665.0, 1622865.58, 1615096.78, 1485551.17, 1407212.21, 1364826.0,
			1233123.83, 1089680.69, 1086898.47, 816321.92,
		];
		const targetData = dates.map(() => 1733333.33); // 52000000 / 30

		trendChart.setOption({
			title: {
				text: '预算执行趋势',
				left: 'center',
			},
			tooltip: {
				trigger: 'axis',
				formatter: '{b}<br/>{a}: ¥{c}',
			},
			legend: {
				data: ['实际执行', '目标'],
				bottom: 0,
			},
			xAxis: {
				type: 'category',
				data: dates,
				axisLabel: {
					rotate: 45,
				},
			},
			yAxis: {
				type: 'value',
				name: '金额',
				axisLabel: {
					formatter: '¥{value}',
				},
			},
			series: [
				{
					name: '实际执行',
					type: 'line',
					data: executedData,
					areaStyle: {},
				},
				{
					name: '目标',
					type: 'line',
					data: targetData,
					lineStyle: {
						type: 'dashed',
					},
				},
				{
					name: '执行柱状图',
					type: 'bar',
					data: executedData,
					itemStyle: {
						color: 'rgba(64, 158, 255, 0.5)',
					},
				},
			],
		});
	});
};

const initDepartmentChart = (data: DepartmentData[]) => {
	nextTick(() => {
		if (!departmentChartRef.value) return;

		if (departmentChart) departmentChart.dispose();
		departmentChart = echarts.init(departmentChartRef.value);

		// 提取部门和预算数据用于饼图
		const pieData = data.map((item) => ({
			name: item.department,
			value: parseFloat(item.monthlyBudget.replace(/,/g, '')),
		}));

		departmentChart.setOption({
			title: {
				text: '部门预算分布',
				left: 'center',
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: ¥{c} ({d}%)',
			},
			legend: {
				orient: 'vertical',
				right: '5%',
				top: 'center',
				data: data.map((item) => item.department),
				textStyle: {
					fontSize: 10,
				},
			},
			series: [
				{
					name: '预算',
					type: 'pie',
					radius: ['30%', '60%'],
					center: ['40%', '50%'],
					data: pieData,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		});
	});
};

const initProgressChart = () => {
	nextTick(() => {
		if (!progressChartRef.value) return;

		if (progressChart) progressChart.dispose();
		progressChart = echarts.init(progressChartRef.value);

		// 任务进度雷达图数据
		const indicator = [
			{ name: '预算执行', max: 100 },
			{ name: '时间进度', max: 100 },
			{ name: '部门达成率', max: 100 },
			{ name: '日均完成', max: 100 },
			{ name: '目标达成', max: 100 },
		];

		progressChart.setOption({
			title: {
				text: '任务进度分析',
				left: 'center',
			},
			tooltip: {},
			legend: {
				data: ['实际进度', '目标进度'],
				bottom: 0,
			},
			radar: {
				indicator: indicator,
				radius: '60%',
				center: ['50%', '50%'],
			},
			series: [
				{
					name: '任务进度',
					type: 'radar',
					data: [
						{
							value: [98.62, 69, 85.3, 95.2, 98.62],
							name: '实际进度',
							areaStyle: {
								color: 'rgba(64, 158, 255, 0.3)',
							},
						},
						{
							value: [100, 100, 100, 100, 100],
							name: '目标进度',
							areaStyle: {
								color: 'rgba(255, 159, 64, 0.3)',
							},
						},
					],
				},
			],
		});
	});
};

const initCustomerChart = () => {
	nextTick(() => {
		if (!customerChartRef.value) return;

		if (customerChart) customerChart.dispose();
		customerChart = echarts.init(customerChartRef.value);

		// 生成日期数据
		const dates = [
			'2026/2/7',
			'2026/2/8',
			'2026/2/9',
			'2026/2/10',
			'2026/2/11',
			'2026/2/12',
			'2026/2/15',
			'2026/2/16',
			'2026/2/17',
			'2026/2/18',
			'2026/2/19',
			'2026/2/20',
			'2026/2/21',
			'2026/2/22',
			'2026/2/23',
			'2026/2/24',
			'2026/2/25',
			'2026/2/26',
			'2026/2/27',
			'2026/2/28',
		];

		// 模拟客户数据趋势
		const customerData = [
			18168312, 18628392, 3985, 20786, 191584, 359278, 3870546, 3873374, 4457089, 4295086, 2672587, 1569225, 114875, 279896, 396185, 291112, 215208,
			0, 0, 0,
		];

		customerChart.setOption({
			title: {
				text: '客户数据趋势',
				left: 'center',
			},
			tooltip: {
				trigger: 'axis',
				formatter: '{b}<br/>{a}: {c}',
			},
			legend: {
				data: ['客户数据'],
				bottom: 0,
			},
			xAxis: {
				type: 'category',
				data: dates,
				axisLabel: {
					rotate: 45,
				},
			},
			yAxis: {
				type: 'value',
				name: '数值',
			},
			series: [
				{
					name: '客户数据',
					type: 'line',
					data: customerData,
					areaStyle: {},
					itemStyle: {
						color: '#409eff',
					},
				},
				{
					name: '数据柱状图',
					type: 'bar',
					data: customerData,
					itemStyle: {
						color: 'rgba(64, 158, 255, 0.5)',
					},
				},
			],
		});
	});
};

const openSettingDialog = () => {
	dialogVisible.value = true;
};

const openDepartmentTaskDialog = () => {
	departmentTaskDialogVisible.value = true;
};

const handleSaveSettings = () => {
	dialogVisible.value = false;
};

const saveDepartmentTasks = () => {
	departmentTaskDialogVisible.value = false;
};

const handleSearch = () => {
	data.value = getMockData();
	departmentTableData.value = data.value;
	trendTableData.value = getTrendTableData();
	progressTableData.value = getProgressTableData();
	customerTableData.value = getCustomerTableData();
	calculateTotalStats(data.value);
	initTrendChart();
	initDepartmentChart(data.value);
	initProgressChart();
	initCustomerChart();
};

const handleReset = () => {
	searchParams.dateRange = [];
	searchParams.department = '';
	handleSearch();
};

const handleCustomerSearch = () => {
	// 这里可以根据搜索参数过滤数据
	customerTableData.value = getCustomerTableData();
	initCustomerChart();
};

const handleCustomerReset = () => {
	customerSearchParams.customer = '';
	customerSearchParams.status = '';
	handleCustomerSearch();
};

onMounted(() => {
	handleSearch();
	window.addEventListener('resize', () => {
		trendChart?.resize();
		departmentChart?.resize();
		progressChart?.resize();
		customerChart?.resize();
	});
});

watch(activeTab, (newTab) => {
	nextTick(() => {
		if (newTab === 'trend') {
			initTrendChart();
		} else if (newTab === 'department') {
			initDepartmentChart(data.value);
		} else if (newTab === 'progress') {
			initProgressChart();
		} else if (newTab === 'customer') {
			initCustomerChart();
		}
	});
});
</script>

<style scoped>
.ads-summary-monitor {
	padding: 20px;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 600;
}

.setting-btn {
	color: #409eff;
}

.search-container {
	margin-bottom: 20px;
}

.search-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.search-form :deep(.el-form-item) {
	margin-right: 12px;
	margin-bottom: 12px;
}

.ads-summary-monitor :deep(.el-select) {
	width: 180px;
}

.ads-summary-monitor :deep(.el-select__wrapper),
.ads-summary-monitor :deep(.el-select__selected-item),
.ads-summary-monitor :deep(.el-select__placeholder) {
	color: #303133;
}

.tabs-container {
	margin-top: 20px;
}

.tabs-container :deep(.el-tabs__header) {
	margin-bottom: 20px;
}

.chart-container {
	margin-bottom: 20px;
}

.chart {
	width: 100%;
	height: 600px;
	min-height: 600px;
}

.table-container {
	margin-top: 20px;
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
</style>
