<template>
  <view class="container">
    <!-- 水印容器 -->
    <view class="watermark-container">
      <view class="watermark" v-for="i in 24" :key="i">
        <text class="watermark-text">{{ userId }}</text>
      </view>
    </view>

<!-- 费率详情 -->
<view class="info-card" v-if="rateData && rateData.length > 0">
  <view class="info-title">费率详情</view>
  <view class="contract-detail">
    <!-- 合约名称 -->
    <view class="contract-title">
      <text class="contract-name">合约名称：2025年第三季度佣金表</text>
    </view>
    
    <!-- 表格容器 -->
    <view class="table-container">
      <!-- 固定左侧列 -->
      <view class="fixed-column">
        <!-- 表头 -->
        <view class="table-row header-row">
          <view class="table-cell first-column">
            <text class="cell-text">险种</text>
          </view>
        </view>
        
        <!-- 保险公司 -->
        <view class="table-row">
          <view class="table-cell first-column">
            <text class="cell-text">保险公司</text>
          </view>
        </view>
        
        <!-- 产品名称 -->
        <view class="table-row">
          <view class="table-cell first-column">
            <text class="cell-text">产品名称</text>
          </view>
        </view>
        
        <!-- 条件 -->
        <view class="table-row">
          <view class="table-cell first-column">
            <text class="cell-text">条件</text>
          </view>
        </view>
        
        <!-- 各年介绍费 -->
        <view class="table-row" v-for="year in maxYears" :key="year">
          <view class="table-cell first-column">
            <text class="cell-text">介绍费</text>
			<text class="cell-text">（第{{ year }}年）</text>
          </view>
        </view>
      </view>
      
      <!-- 可滚动右侧内容 -->
      <scroll-view class="scroll-content" scroll-x="true">
        <view class="scroll-inner">
          <!-- 表头 -->
          <view class="table-row header-row">
            <view class="table-cell" v-for="(plan, index) in rateData" :key="index">
              <text class="cell-text">{{ plan.categoryName }}</text>
            </view>
          </view>
          
          <!-- 保险公司 -->
          <view class="table-row">
            <view class="table-cell" v-for="(plan, index) in rateData" :key="index">
              <text class="cell-text">{{ plan.companyName }}</text>
            </view>
          </view>
          
          <!-- 产品名称 -->
          <view class="table-row">
            <view class="table-cell" v-for="(plan, index) in rateData" :key="index">
              <text class="cell-text">{{ plan.planName }}</text>
            </view>
          </view>
          
          <!-- 条件 -->
          <view class="table-row">
            <view class="table-cell conditionContainer" v-for="(plan, index) in rateData" :key="index">
              <view><text class="cell-text">供款年期:</text><text class="cell-text">{{ plan.term }}年</text></view>
			  <view v-if="plan.ageRange"><text class="cell-text">年龄:</text><text class="cell-text">{{ plan.ageRange }} </text></view>
			  <view v-if="plan.premiumRange"><text class="cell-text">保费:</text><text class="cell-text">{{ plan.premiumRange }} </text></view>
            </view>
          </view>
          
          <!-- 各年保费 -->
          <view class="table-row" v-for="year in maxYears" :key="year">
            <view class="table-cell" v-for="(plan, index) in rateData" :key="index">
              <text class="cell-text commission-value">
                {{ getCommissionRate(plan, year) }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error" v-if="error">
      <text>{{ error }}</text>
    </view>
	
	<!-- 无数据 -->
	<view class="error" v-if="rateData && rateData.length==0 && !loading">
	  <text>暂无数据</text>
	</view>
  </view>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import api from '@/api/api';

// 默认最大年份是5
const maxYears = ref(5)

// 获取指定年份的佣金率
const getCommissionRate = (plan, year) => {
  const rate = plan.termRateResponseList.find(item => item.issueNumber === year)
  return rate ? `${rate.calculateRate}%` : '0%'
}
// 路由实例
const router = useRouter();
const route = useRoute();
// 响应式数据

const rateData = ref([])
const userId = ref('')
const loading = ref(false)
const error = ref(null)

// 获取页面参数
const planBizId = ref(route.query.planBizId || '')
const planName = ref(decodeURIComponent(route.query.planName || ''))




// 获取费率数据
const fetchRateData = async () => {
  if (!planBizId.value) return
  
  loading.value = true
  error.value = null
  
  try {
	const params = {
		planBizId:planBizId.value,
		userId:localStorage.getItem('cffp_userId')
	}
	const response = await api.queryRate(params)
    
    if (response.success) {
      rateData.value = response.data
	  if(rateData.value && rateData.value.length>0){
		  rateData.value.forEach(item => {
		    if (item.termRateResponseList) {
		      item.termRateResponseList.forEach(term => {
		        if ((term.issueNumber > maxYears.value) && 
		            term.calculateRate > 0 ) {
		          maxYears.value = term.issueNumber;
		        }
		      });
		    }
		  });
	  }

	  
	  console.log('maxYears:', maxYears);
    }
    
  } catch (err) {
    error.value = '获取费率数据失败'
    console.error('API调用失败:', err)
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
	userId.value = localStorage.getItem('cffp_userId') || ''
  fetchRateData()
})
</script>

<style scoped>
.container {
  padding: 10rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
}


.watermark-text {
  font-size: 48rpx;
  color: #007AFF;
  font-weight: bold;
  white-space: nowrap;
}

/* 水印样式 - 铺满屏幕版本 */
.watermark-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  overflow: hidden;
}

.watermark {
  position: absolute;
  opacity: 0.06;
  transform: rotate(-30deg);
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
}

/* 4列6行的规律网格布局，铺满整个屏幕 */
.watermark:nth-child(1) { top: 8%; left: 5%; }
.watermark:nth-child(2) { top: 8%; left: 30%; }
.watermark:nth-child(3) { top: 8%; left: 55%; }
.watermark:nth-child(4) { top: 8%; left: 80%; }

.watermark:nth-child(5) { top: 25%; left: 2%; }
.watermark:nth-child(6) { top: 25%; left: 27%; }
.watermark:nth-child(7) { top: 25%; left: 52%; }
.watermark:nth-child(8) { top: 25%; left: 77%; }

.watermark:nth-child(9) { top: 42%; left: 8%; }
.watermark:nth-child(10) { top: 42%; left: 33%; }
.watermark:nth-child(11) { top: 42%; left: 58%; }
.watermark:nth-child(12) { top: 42%; left: 83%; }

.watermark:nth-child(13) { top: 59%; left: 2%; }
.watermark:nth-child(14) { top: 59%; left: 27%; }
.watermark:nth-child(15) { top: 59%; left: 52%; }
.watermark:nth-child(16) { top: 59%; left: 77%; }

.watermark:nth-child(17) { top: 76%; left: 8%; }
.watermark:nth-child(18) { top: 76%; left: 33%; }
.watermark:nth-child(19) { top: 76%; left: 58%; }
.watermark:nth-child(20) { top: 76%; left: 83%; }

.watermark:nth-child(21) { top: 93%; left: 2%; }
.watermark:nth-child(22) { top: 93%; left: 27%; }
.watermark:nth-child(23) { top: 93%; left: 52%; }
.watermark:nth-child(24) { top: 93%; left: 77%; }

.loading, .error {
  text-align: center;
  padding: 40rpx;
  color: #333;
  position: relative;
  z-index: 10;
}

.error {
  color: #FF6B6B;
}

.contract-detail {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 20rpx;
}

.contract-title {
  background: #f5f7fa;
  padding: 24rpx 30rpx;
  border-bottom: 1px solid #dcdfe6;
}

.contract-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

/* 表格容器 */
.table-container {
  display: flex;
  background: white;
  position: relative;
}

/* 固定左侧列 */
.fixed-column {
  width: 160rpx;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

/* 固定列样式 */
.fixed-column .table-cell {
  width: 160rpx;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* 可滚动右侧内容 */
.scroll-content {
  flex: 1;
  overflow-x: auto;
}

.scroll-inner {
  min-width: max-content;
}

/* 表格行通用样式 */
.table-row {
  display: flex;
  min-height: 88rpx;
  border-bottom: 1px solid #ebeef5;
}

.table-row:last-child {
  border-bottom: none;
}

.table-row.header-row {
  background: #fafafa;
  font-weight: 600;
}

/* 表格单元格通用样式 */
.table-cell {
  min-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid #ebeef5;
  padding: 24rpx 16rpx;
}

.table-cell:last-child {
  border-right: none;
}



/* 滚动列样式 */
.scroll-inner .table-cell {
  min-width: 240rpx;
  flex: 1;
}

.cell-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
}

.header-row .cell-text {
  color: #333;
  font-weight: 600;
}

.commission-value {
  color: #007AFF;
  font-weight: 600;
}

/* 其他样式保持不变 */
.info-card {
  background-color: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 48rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}
.conditionContainer{
	display: flex;
	flex-direction: column;
}
.conditionContainer view{
    width: 100%;
    margin: 0 auto;
}

</style>