<!-- components/TaxHealthReport/TaxHealthReport.vue -->
<template>
  <!-- 弹窗遮罩 -->
  <view v-if="show" class="tax-report-modal-mask" @click="handleClose">
    <view class="tax-report-modal-content" @click.stop>
      <!-- 报告头部 -->
      <view class="tax-report-header">
        <view class="header-left">
          <text class="tax-report-title">{{ title }}</text>
          <text class="tax-report-subtitle">企业税务健康度分析报告</text>
        </view>
        <text class="tax-report-close-btn" @click="handleClose">×</text>
      </view>
      
      <!-- 报告内容 -->
      <scroll-view class="tax-report-body" scroll-y :show-scrollbar="false">
        <!-- 企业基本信息 -->
        <view class="company-info-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-icon">🏢</text>
              <text class="section-title">企业基本信息</text>
            </view>
          </view>
          
          <view class="company-info-grid">
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">企业名称</text>
                <text class="info-value">{{ companyInfo.name }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">法定代表人</text>
                <text class="info-value">{{ companyInfo.legalRepresentative }}</text>
              </view>
            </view>
            
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">注册资本</text>
                <text class="info-value">{{ companyInfo.registeredCapital }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">成立日期</text>
                <text class="info-value">{{ companyInfo.establishmentDate }}</text>
              </view>
            </view>
            
            <view class="info-row">
              <view class="info-item full-width">
                <text class="info-label">统一社会信用代码</text>
                <text class="info-value credit-code">{{ companyInfo.creditCode }}</text>
              </view>
            </view>
            
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">联系电话</text>
                <text class="info-value contact-info">{{ companyInfo.phone }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">邮箱地址</text>
                <text class="info-value contact-info">{{ companyInfo.email }}</text>
              </view>
            </view>
            
            <view class="info-row">
              <view class="info-item full-width">
                <text class="info-label">注册地址</text>
                <text class="info-value address">{{ companyInfo.address }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 健康度概览 -->
        <view class="health-overview">
          <view class="health-score">
            <view class="score-circle">
              <text class="score-value">85</text>
              <text class="score-label">健康度</text>
            </view>
          </view>
          <view class="health-stats">
            <view class="stat-item">
              <text class="stat-value">4</text>
              <text class="stat-label">检查项目</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">3</text>
              <text class="stat-label">低风险</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">1</text>
              <text class="stat-label">需关注</text>
            </view>
          </view>
        </view>

        <!-- 税务登记与信息核对 -->
        <view class="report-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-number">01</text>
              <text class="section-title">税务登记与信息核对</text>
            </view>
            <view class="risk-tag low-risk">低风险</view>
          </view>
          
          <view class="section-content">
            <view class="chart-container">
              <view class="info-match-chart">
                <view class="chart-bar">
                  <view class="bar-fill" :style="{width: '90%'}"></view>
                </view>
                <text class="chart-label">信息匹配度 90%</text>
              </view>
            </view>
            
            <view class="detail-list">
              <view class="detail-item">
                <view class="item-header">
                  <text class="item-icon">📋</text>
                  <text class="item-title">税务登记信息</text>
                </view>
                <text class="item-desc">企业名称、地址、法人等信息与营业执照一致</text>
              </view>
              
              <view class="detail-item">
                <view class="item-header">
                  <text class="item-icon">🔍</text>
                  <text class="item-title">税种认定匹配</text>
                </view>
                <text class="item-desc">增值税纳税人类型与业务规模匹配，建议复核小规模纳税人认定</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 申报数据逻辑 -->
        <view class="report-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-number">02</text>
              <text class="section-title">申报数据逻辑</text>
            </view>
            <view class="risk-tag medium-risk">需关注</view>
          </view>
          
          <view class="section-content">
            <view class="declaration-charts">
              <view class="chart-item">
                <view class="chart-title">增值税申报</view>
                <view class="progress-chart">
                  <view class="progress-bar">
                    <view class="progress-fill" :style="{width: '85%'}"></view>
                  </view>
                  <text class="progress-text">收入一致性 85%</text>
                </view>
                <view class="chart-data">
                  <text class="data-item">• 税负率: 3.2% (行业平均: 3.5%)</text>
                  <text class="data-item">• 申报差异: 在合理范围内</text>
                </view>
              </view>
              
              <view class="chart-item">
                <view class="chart-title">企业所得税申报</view>
                <view class="progress-chart">
                  <view class="progress-bar">
                    <view class="progress-fill" :style="{width: '78%'}"></view>
                  </view>
                  <text class="progress-text">成本合理性 78%</text>
                </view>
                <view class="chart-data">
                  <text class="data-item">• 成本费用率: 68%</text>
                  <text class="data-item">• 制造业合理区间: 60%-80%</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 发票管理风险 -->
        <view class="report-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-number">03</text>
              <text class="section-title">发票管理风险</text>
            </view>
            <view class="risk-tag low-risk">低风险</view>
          </view>
          
          <view class="section-content">
            <view class="risk-distribution">
              <view class="risk-item upstream-risk">
                <view class="risk-icon">📥</view>
                <text class="risk-type">上游发票合规性</text>
                <view class="risk-status safe">正常</view>
                <text class="risk-desc">供应商状态正常，业务一致</text>
              </view>
              
              <view class="risk-item downstream-risk">
                <view class="risk-icon">📤</view>
                <text class="risk-type">下游开票合规性</text>
                <view class="risk-status safe">正常</view>
                <text class="risk-desc">开票模式合理，进销匹配</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 特定业务风险点 -->
        <view class="report-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-number">04</text>
              <text class="section-title">特定业务风险点</text>
            </view>
            <view class="risk-tag low-risk">低风险</view>
          </view>
          
          <view class="section-content">
            <view class="risk-points">
              <view class="risk-point">
                <view class="point-header">
                  <text class="point-icon">⚖️</text>
                  <text class="point-title">关联交易定价</text>
                </view>
                <text class="point-status compliant">符合独立交易原则</text>
              </view>
              
              <view class="risk-point">
                <view class="point-header">
                  <text class="point-icon">🎯</text>
                  <text class="point-title">税收优惠适用</text>
                </view>
                <text class="point-status compliant">高新技术企业资质有效</text>
              </view>
              
              <view class="risk-point">
                <view class="point-header">
                  <text class="point-icon">🏢</text>
                  <text class="point-title">资产处理合规性</text>
                </view>
                <text class="point-status compliant">固定资产处置程序完整</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import type { TaxHealthReportProps, TaxHealthReportEmits } from './TaxHealthReport.type';

// 组件Props
defineProps<TaxHealthReportProps>();

// 组件Emits
const emit = defineEmits<TaxHealthReportEmits>();

// 企业基本信息
const companyInfo = reactive({
  name: '浙江某某科技有限公司',
  legalRepresentative: '张三',
  registeredCapital: '1000万元人民币',
  establishmentDate: '2018-06-15',
  creditCode: '91330100MA2A2B2C2D',
  phone: '0571-88888888',
  email: 'contact@example.com',
  address: '浙江省杭州市西湖区文三路XXX号创业大厦A座1001室'
});

// 事件处理
const handleClose = () => {
  emit('update:show', false);
  emit('close');
};
</script>

<style scoped>
.tax-report-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 40rpx;
}

.tax-report-modal-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24rpx;
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
  border: 1rpx solid #e2e8f0;
}

/* 头部样式 */
.tax-report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40rpx 32rpx 24rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx 24rpx 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left {
  flex: 1;
}

.tax-report-title {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 8rpx;
}

.tax-report-subtitle {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  display: block;
}

.tax-report-close-btn {
  font-size: 44rpx;
  color: white;
  padding: 16rpx;
  font-weight: 300;
  margin-top: -8rpx;
}

/* 主体内容 */
.tax-report-body {
  flex: 1;
  padding: 32rpx;
  max-height: calc(90vh - 120rpx);
}

/* 企业基本信息 */
.company-info-section {
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #f1f5f9;
  border-left: 6rpx solid #667eea;
}

.company-info-section .section-header {
  margin-bottom: 24rpx;
}

.section-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
}

.company-info-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-row {
  display: flex;
  gap: 20rpx;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-item.full-width {
  flex: 2;
}

.info-label {
  font-size: 24rpx;
  color: #64748b;
  font-weight: 500;
}

.info-value {
  font-size: 26rpx;
  color: #1e293b;
  font-weight: 600;
  word-break: break-all;
}

.info-value.credit-code {
  font-family: 'Courier New', monospace;
  background: #f8fafc;
  padding: 12rpx 16rpx;
  border-radius: 8rpx;
  border: 1rpx solid #e2e8f0;
  font-size: 24rpx;
}

.info-value.contact-info {
  color: #667eea;
}

.info-value.address {
  line-height: 1.5;
  background: #f8fafc;
  padding: 16rpx;
  border-radius: 8rpx;
  border: 1rpx solid #e2e8f0;
}

/* 健康度概览 */
.health-overview {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #f1f5f9;
}

.health-score {
  flex: 1;
  display: flex;
  justify-content: center;
}

.score-circle {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: conic-gradient(#10b981 85%, #e2e8f0 0%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.score-circle::before {
  content: '';
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: white;
}

.score-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #10b981;
  z-index: 1;
}

.score-label {
  font-size: 22rpx;
  color: #64748b;
  z-index: 1;
  margin-top: 4rpx;
}

.health-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.stat-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #1e293b;
  min-width: 40rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #64748b;
}

/* 报告区块 */
.report-section {
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #f1f5f9;
}

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

.section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.section-number {
  font-size: 24rpx;
  font-weight: bold;
  color: #667eea;
  background: #f0f4ff;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1e293b;
}

/* 风险标签 */
.risk-tag {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.low-risk {
  background: #d1fae5;
  color: #065f46;
}

.medium-risk {
  background: #fef3c7;
  color: #92400e;
}

/* 图表容器 */
.chart-container {
  margin-bottom: 24rpx;
}

.info-match-chart {
  text-align: center;
}

.chart-bar {
  width: 100%;
  height: 24rpx;
  background: #e2e8f0;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 12rpx;
  transition: width 0.8s ease;
}

.chart-label {
  font-size: 24rpx;
  color: #64748b;
}

/* 详情列表 */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.detail-item {
  background: #f8fafc;
  border-radius: 16rpx;
  padding: 24rpx;
  border-left: 4rpx solid #667eea;
}

.item-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.item-icon {
  font-size: 24rpx;
}

.item-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #1e293b;
}

.item-desc {
  font-size: 24rpx;
  color: #64748b;
  line-height: 1.5;
}

/* 申报图表 */
.declaration-charts {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.chart-item {
  background: #f8fafc;
  border-radius: 16rpx;
  padding: 24rpx;
}

.chart-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20rpx;
}

.progress-chart {
  margin-bottom: 16rpx;
}

.progress-bar {
  width: 100%;
  height: 16rpx;
  background: #e2e8f0;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 8rpx;
  transition: width 0.8s ease;
}

.progress-text {
  font-size: 22rpx;
  color: #64748b;
}

.chart-data {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.data-item {
  font-size: 22rpx;
  color: #64748b;
}

/* 风险分布 */
.risk-distribution {
  display: flex;
  gap: 20rpx;
}

.risk-item {
  flex: 1;
  background: #f8fafc;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  border: 2rpx solid #e2e8f0;
}

.risk-icon {
  font-size: 32rpx;
  margin-bottom: 12rpx;
}

.risk-type {
  font-size: 24rpx;
  font-weight: 600;
  color: #1e293b;
  display: block;
  margin-bottom: 8rpx;
}

.risk-status {
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.safe {
  background: #d1fae5;
  color: #065f46;
}

.risk-desc {
  font-size: 22rpx;
  color: #64748b;
}

/* 风险点 */
.risk-points {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.risk-point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
}

.point-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.point-icon {
  font-size: 24rpx;
}

.point-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #1e293b;
}

.point-status {
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.compliant {
  background: #d1fae5;
  color: #065f46;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .tax-report-modal-content {
    width: 80%;
    max-width: 800px;
  }
  
  .risk-distribution {
    gap: 32rpx;
  }
  
  .declaration-charts {
    flex-direction: row;
  }
  
  .chart-item {
    flex: 1;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
    gap: 16rpx;
  }
  
  .info-item {
    width: 100%;
  }
  
  .risk-distribution {
    flex-direction: column;
  }
}
</style>