<template>
	<view class="page-container">

		<view class="content">
			<!-- 查询区域 -->
			<view class="search-section">
				<view class="search-card">
					<tn-input v-model="searchValue" :placeholder="!isFromTicket ? '请输入企业名称或税号':'请输入票号号码或验证码'" border height="80rpx">
						<template #prefix>
							<uni-icons type="search" size="20" color="#999"></uni-icons>
						</template>
					</tn-input>
					<tn-button type="primary" @click="handleSearch" :loading="loading" class="search-btn">
						查询
					</tn-button>
					<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="backToIndex">
						<uni-icons type="arrow-left" size="18" color="#0099ff" style="margin-right: 5px;"></uni-icons>返回
					</tn-button>
				</view>
			</view>
			
			<!-- 本月未办事项 -->
			<view v-if="pendingItems.length > 0 && isFromTicket" class="pending-section">
				<view class="section-card">
					<view class="section-header">
						<text class="section-title">本月未办事项</text>
						<text class="item-count">共{{ pendingItems.length }}项</text>
					</view>
					<view class="pending-list">
						<view v-for="(item, index) in pendingItems" :key="index" class="pending-item">
							<view class="item-main">
								<text class="item-name">{{ item.name }}</text>
								<text class="item-deadline">截止日期：{{ item.deadline }}</text>
							</view>
							<view class="item-actions">
								<tn-button size="sm" type="primary" plain @click="handleGuide(item)">
									引导办理
								</tn-button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 企业基本信息 -->
			<view v-if="enterpriseInfo" class="info-section">
				<view class="section-card">
					<view class="section-header">
						<text class="section-title">企业基本信息</text>
					</view>
					<view class="enterprise-info">
						<view class="info-row">
							<text class="info-label">企业名称：</text>
							<text class="info-value">{{ enterpriseInfo.name }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">纳税人识别号：</text>
							<text class="info-value">{{ enterpriseInfo.taxId }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">企业类型：</text>
							<text class="info-value">{{ enterpriseInfo.type }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">注册地址：</text>
							<text class="info-value">{{ enterpriseInfo.address }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">法定代表人：</text>
							<text class="info-value">{{ enterpriseInfo.legalPerson }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 税务健康度图表 -->
			<view v-if="showCharts" class="chart-section">
				<view class="section-card">
					<view class="section-header">
						<text class="section-title">税务健康度分析</text>
					</view>
					<view class="charts-container">
						<!-- 健康度评分 -->
						<view class="chart-item">
							<view class="chart-title">综合健康评分</view>
							<view class="score-ring">
								<text class="score-text">{{ taxHealth.score }}</text>
								<text class="score-label">分</text>
							</view>
							<view class="score-level" :class="getScoreClass(taxHealth.score)">
								{{ taxHealth.level }}
							</view>
						</view>

						<!-- 指标雷达图 -->
						<view class="chart-item">
							<view class="chart-title">各项指标</view>
							<!-- <canvas canvas-id="radarChart" class="chart-canvas"></canvas> -->
							<qiun-data-charts type="radar" :chartData="chartData" :canvas2d="true" canvasId="radarChart"
								class="chart-canvas" :opts="opts" />
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="!enterpriseInfo && searched" class="empty-section">
				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
				<text class="empty-text">未找到相关企业信息</text>
			</view>
		</view>

		<!-- 办理方式选择弹窗 -->
		<uni-popup ref="actionPopup" type="center" background-color="#fff" class="action-popup">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">选择办理方式</text>
					<uni-icons type="close" size="20" color="#999" @click="closePopup"></uni-icons>
				</view>

				<view class="popup-body">
					<text class="current-task">当前事项：{{ currentTask?.name }}</text>

					<view class="action-options">
						<view class="action-item" @click="handlePushMessage">
							<view class="action-icon">
								<uni-icons type="notification" size="30" color="#0099ff"></uni-icons>
							</view>
							<view class="action-info">
								<text class="action-title">推送消息提醒</text>
								<text class="action-desc">向企业发送办理提醒消息</text>
							</view>
							<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
						</view>

						<view class="action-item" @click="handleAssignWindow">
							<view class="action-icon">
								<uni-icons type="staff" size="30" color="#52c41a"></uni-icons>
							</view>
							<view class="action-info">
								<text class="action-title">指派办理窗口</text>
								<text class="action-desc">指定具体窗口进行办理</text>
							</view>
							<uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onLoad, onReady } from '@dcloudio/uni-app'
	import boolean from '../../uni_modules/tuniaoui-vue3/libs/async-validator/validator/boolean'
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'

	const isFromTicket = ref(false)
	// 搜索相关
	const searchValue = ref('')
	const loading = ref(false)
	const searched = ref(false)

	// 企业信息
	const enterpriseInfo = ref<any>(null)
	const showCharts = ref(false)

	// 税务健康度数据
	const taxHealth = reactive({
		score: 85,
		level: '良好',
		indicators: {
			categories: ["申报及时性", "税款缴纳", "发票管理", "税务合规", "风险防控"],
			series: [{
				name: "健康度",
				data: [90, 85, 80, 75, 95]
			}]
		}
	})
	const chartData = ref({
		categories: ["申报及时性", "税款缴纳", "发票管理", "税务合规", "风险防控"], // 雷达图指标
		series: [
			{
				name: "企业健康度", // 数据序列名称
				data: [90, 85, 80, 75, 95]  // 对应指标的数据值
			}
		]
	})

	// 未办事项列表
	const pendingItems = ref([
		{
			id: 1,
			name: '增值税申报',
			deadline: '2024-01-15',
			type: 'tax'
		},
		{
			id: 2,
			name: '企业所得税预缴',
			deadline: '2024-01-20',
			type: 'tax'
		},
		{
			id: 3,
			name: '社保费用缴纳',
			deadline: '2024-01-25',
			type: 'social'
		}
	])

	// 图表配置选项 (可选)
	const opts = reactive({
		// 此处可根据需要配置uCharts的雷达图参数
		// 例如颜色、字体大小、图例位置等
		// 详细的配置项可以参考uCharts的官方文档
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		dataLabel: true,
		dataPointShape: false,
		enableScroll: false,
		legend: {
			show: true,
			position: "right",
			lineHeight: 25
		},
		extra: {
			radar: {
				gridType: "circle",
				gridColor: "#CCCCCC",
				gridCount: 3,
				opacity: 1,
				max: 100,
				labelShow: true,
				linearType: "custom",
				border: false
			}
		}
	})

	// 初始化图表数据
	const initChartData = () => {
		// 模拟从服务器获取数据
		chartData.value = {
			categories: ["申报及时性", "税款缴纳", "发票管理", "税务合规", "风险防控"], // 雷达图的指标维度
			series: [
				{
					name: "企业健康度", // 数据序列名称
					data: [90, 85, 80, 75, 95] // 对应各个维度的数据值
				}
			]
		}
	}

	// 弹窗相关
	const actionPopup = ref()
	const currentTask = ref<any>(null)

	// 查询企业信息
	const handleSearch = async () => {
		if (!searchValue.value.trim()) {
			uni.showToast({
				title: '请输入票号或验证码',
				icon: 'none'
			})
			return
		}
		isFromTicket.value = true
		loading.value = true
		searched.value = true

		try {
			// 模拟API调用
			await new Promise(resolve => setTimeout(resolve, 1000))

			// 模拟返回数据
			enterpriseInfo.value = {
				name: '某某科技有限公司',
				taxId: '91440101MA5XXXXXX',
				type: '有限责任公司',
				address: '某某市某某区某某路某某号',
				legalPerson: '张三'
			}

			showCharts.value = true

			uni.showToast({
				title: '查询成功',
				icon: 'success'
			})

		} catch (error) {
			console.error('查询失败:', error)
			uni.showToast({
				title: '查询失败，请重试',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	// 获取分数等级样式
	const getScoreClass = (score : number) => {
		if (score >= 90) return 'score-excellent'
		if (score >= 80) return 'score-good'
		if (score >= 60) return 'score-fair'
		return 'score-poor'
	}

	// 引导办理
	const handleGuide = (task : any) => {
		currentTask.value = task
		actionPopup.value.open()
	}

	// 关闭弹窗
	const closePopup = () => {
		actionPopup.value.close()
	}

	// 推送消息
	const handlePushMessage = () => {
		closePopup()
		uni.showModal({
			title: '推送消息',
			content: `确定要向企业推送"${currentTask.value.name}"的办理提醒吗？`,
			success: (res) => {
				if (res.confirm) {
					// 调用推送API
					uni.showToast({
						title: '消息推送成功',
						icon: 'success'
					})
				}
			}
		})
	}

	// 指派窗口
	const handleAssignWindow = () => {
		closePopup()
		// 跳转到窗口指派页面或打开窗口选择弹窗
		uni.showActionSheet({
			itemList: ['1号窗口', '2号窗口', '3号窗口', '4号窗口'],
			success: (res) => {
				const windowIndex = res.tapIndex + 1
				uni.showToast({
					title: `已指派${windowIndex}号窗口`,
					icon: 'success'
				})
			}
		})
	}

	onLoad((option) => {
		console.log(typeof (option.isFromTicket))
		if(option.tktId) {
			searchValue.value = option.tktId
			handleSearch()
		}
		isFromTicket.value = option.isFromTicket === 'true'
	})

	// 页面就绪时初始化图表
	onReady(() => {
		// 这里可以初始化图表
		// initCharts()
	})

	const backToIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #fff;
	}

	.content {
		padding: 6vh 20px 0 20px;
	}

	// 搜索区域
	.search-section {
		margin-bottom: 30rpx;

		.search-card {
			display: flex;
			gap: 20rpx;
			align-items: center;

			.search-btn {
				width: 200rpx;
				height: 32px;
			}
		}
	}

	// 通用卡片样式
	.section-card {
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.item-count {
			font-size: 24rpx;
			color: #999;
		}
	}

	// 企业信息
	.enterprise-info {
		.info-row {
			display: flex;
			margin-bottom: 20rpx;

			.info-label {
				width: 200rpx;
				font-size: 28rpx;
				color: #666;
			}

			.info-value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}

	// 图表区域
	.charts-container {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;

		.chart-item {
			flex: 1;
			min-width: 300rpx;
			text-align: center;

			.chart-title {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 20rpx;
			}

			.score-ring {
				position: relative;
				width: 200rpx;
				height: 200rpx;
				margin: 0 auto 20rpx;
				border: 8rpx solid #e8f4ff;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.score-text {
					font-size: 48rpx;
					font-weight: bold;
					color: #0099ff;
				}

				.score-label {
					font-size: 24rpx;
					color: #999;
				}
			}

			.score-level {
				font-size: 28rpx;
				font-weight: 500;

				&.score-excellent {
					color: #52c41a;
				}

				&.score-good {
					color: #0099ff;
				}

				&.score-fair {
					color: #faad14;
				}

				&.score-poor {
					color: #ff4d4f;
				}
			}

			.chart-canvas {
				margin-left: 60rpx;
				width: 900rpx;
				height: 150px;
				// background-color: #faad14;
			}
		}
	}

	// 未办事项
	.pending-list {
		.pending-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.item-main {
				flex: 1;

				.item-name {
					display: block;
					font-size: 30rpx;
					color: #333;
					margin-bottom: 10rpx;
				}

				.item-deadline {
					font-size: 24rpx;
					color: #ff4d4f;
				}
			}
		}
	}

	// 空状态
	.empty-section {
		text-align: center;
		padding: 100rpx 0;

		.empty-text {
			display: block;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	// 弹窗样式
	.action-popup {
		.popup-content {
			width: 600rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.popup-body {
			padding: 30rpx;

			.current-task {
				display: block;
				font-size: 28rpx;
				color: #666;
				margin-bottom: 40rpx;
				text-align: center;
			}

			.action-options {
				.action-item {
					display: flex;
					align-items: center;
					padding: 30rpx;
					border: 1rpx solid #f0f0f0;
					border-radius: 16rpx;
					margin-bottom: 20rpx;

					&:active {
						background-color: #f8f8f8;
					}

					.action-icon {
						margin-right: 20rpx;
					}

					.action-info {
						flex: 1;

						.action-title {
							display: block;
							font-size: 30rpx;
							color: #333;
							margin-bottom: 8rpx;
						}

						.action-desc {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>