<template>
  <div class="rounded-lg border border-[#99999933] mb-4">
    <!-- 标题栏 -->
    <div class="flex items-center mb-4 p-4">
      <div class="w-8 h-8 flex items-center justify-center mr-2">
        <img src="@/assets/images/report/sjqsfx.png" alt="贷款行为分析" class="w-8 h-8 object-contain" />
      </div>
      <span class="font-bold text-gray-800">贷款行为分析</span>
    </div>

    <!-- 交易金额趋势 -->
    <div class="mb-6">
      <LTitle title="交易金额趋势" class="mb-2" />

      <!-- ECharts 图表 -->
      <div class="mb-6">
        <div ref="amountChartRef" :style="{ width: '100%', height: '300px' }"></div>
      </div>

      <!-- 数值统计 -->
      <div class="bg-[#ECF2FD] rounded-lg border border-[#CADAF9] p-4 mx-4">
        <div class="flex justify-between gap-4">
          <div class="flex-1 text-center">
            <div class="text-[#999999]">峰值</div>
            <div class="text-[#2B79EE] font-bold">{{ formatAmount(maxAmountTrend) }}</div>
          </div>
          <div class="flex-1 text-center">
            <div class="text-[#999999]">低值</div>
            <div class="text-[#2B79EE] font-bold">{{ formatAmount(minAmountTrend) }}</div>
          </div>
          <div class="flex-1 text-center">
            <div class="text-[#999999]">均值</div>
            <div class="text-[#2B79EE] font-bold">{{ formatAmount(avgAmountTrend) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 交易笔数趋势 -->
    <div class="mb-6">
      <LTitle title="交易笔数趋势" class="mb-2" />

      <!-- ECharts 图表 -->
      <div class="mb-6">
        <div ref="countChartRef" :style="{ width: '100%', height: '300px' }"></div>
      </div>

      <!-- 统计摘要 -->
      <div class="bg-[#ECF2FD] rounded-lg border border-[#CADAF9] p-4 mx-4">
        <div class="flex justify-between gap-4">
          <div class="flex-1 text-center">
            <div class="text-[#999999]">峰值</div>
            <div class="text-[#2B79EE] font-bold">{{ maxCountTrend }} 笔</div>
          </div>
          <div class="flex-1 text-center">
            <div class="text-[#999999]">低值</div>
            <div class="text-[#2B79EE] font-bold">{{ minCountTrend }} 笔</div>
          </div>
          <div class="flex-1 text-center">
            <div class="text-[#999999]">均值</div>
            <div class="text-[#2B79EE] font-bold">{{ avgCountTrend.toFixed(0) }} 笔</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 还款成功率趋势 -->
    <div class="mb-6">
      <LTitle title="还款成功率趋势" class="mb-2" />

      <div class="space-y-3 px-4">
        <div class="bg-[#ECF2FD] rounded-lg border border-[#CADAF9] p-4" v-for="rate in successRateTrend"
          :key="rate.period">
          <div class="flex justify-between items-center mb-3">
            <span class="text-base font-bold text-[#333333]">{{ rate.period }}</span>
            <span class="text-base font-bold text-[#333333]">
              {{ (rate.rate * 100).toFixed(1) }}%
            </span>
          </div>
          <div class="h-2 bg-[#DBE6FC] rounded-full overflow-hidden mb-3">
            <div class="h-full rounded-full transition-all duration-300"
              :style="`width: ${Math.max(rate.rate * 100, 2)}%; background-color: #5079EA;`"></div>
          </div>
          <div class="flex justify-between text-xs text-[#999999]">
            <span>成功: {{ rate.success }}笔</span>
            <span>失败: {{ rate.failure }}笔</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 机构数量变化趋势 -->
    <div class="mb-6">
      <LTitle title="机构数量变化" class="mb-2" />

      <div class="space-y-3 px-4">
        <div class="bg-[#ECF2FD] rounded-lg border border-[#CADAF9] p-4" v-for="item in institutionTrendData"
          :key="item.period">
          <div class="flex justify-between items-center mb-3">
            <span class="text-base font-bold text-[#333333]">{{ item.period }}</span>
            <span class="text-base font-bold text-[#333333]">总数: {{ item.total }}</span>
          </div>

          <div class="h-2 bg-[#DBE6FC] rounded-full overflow-hidden mb-3">
            <div class="h-full rounded-full transition-all duration-300"
              :style="`width: ${Math.max(item.totalPercentage, 2)}%; background-color: #5079EA;`"></div>
          </div>

          <div class="flex items-center gap-2 text-xs text-[#999999]">
            <svg v-if="item.trendText === '增长趋势'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                clip-rule="evenodd" />
            </svg>
            <svg v-else-if="item.trendText === '下降趋势'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
                clip-rule="evenodd" />
            </svg>
            <svg v-else class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
            </svg>
            <span>{{ item.trendText }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增机构金额分析 -->
    <div class="mb-6">
      <LTitle title="新增机构金额分析" class="mb-2" />

      <!-- 标签页布局 -->
      <div class="">
        <div class="space-y-4">
          <div class="performance-item">
            <div class="loan-evaluation-wrap">
              <!-- 标签页 -->
              <div class="mb-3">
                <van-tabs v-model:active="activeAmountPeriod" line-width="20" line-height="2"
                  color="var(--color-primary)" class="loan-evaluation-tabs">
                  <van-tab v-for="item in newInstitutionAmounts" :key="item.period" :name="item.period"
                    :title="item.period" />
                </van-tabs>
              </div>

              <!-- 内容显示 -->
              <div class="loan-evaluation-content">
                <div class="space-y-3">
                  <!-- 新增金额 -->
                  <div class="space-y-2">
                    <div class="flex justify-between items-center">
                      <span class="text-sm text-gray-600">新增</span>
                      <span class="text-sm font-bold text-gray-800">{{ formatAmount(currentAmountData.totalAmount)
                        }}</span>
                    </div>
                    <div class="h-2 rounded-full bg-gray-200">
                      <div class="h-2 rounded-full transition-all duration-500"
                        :style="`width: ${Math.max(currentAmountData.percentage, 2)}%; background-color: #10b981;`">
                      </div>
                    </div>
                  </div>

                  <!-- 最大单笔 -->
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">最大单笔</span>
                    <span class="text-sm font-bold text-gray-800">{{ formatAmount(currentAmountData.maxAmount) }}</span>
                  </div>

                  <!-- 最小单笔 -->
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">最小单笔</span>
                    <span class="text-sm font-bold text-gray-800">{{ formatAmount(currentAmountData.minAmount) }}</span>
                  </div>

                  <!-- 平均金额 -->
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">平均金额</span>
                    <span class="text-sm font-bold text-gray-800">{{ formatAmount(currentAmountData.avgAmount) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 风险指标时间分布 -->
    <div class="mb-6">
      <LTitle title="风险指标时间分布" class="mb-2" />

      <div class="px-4">
        <!-- 风险事件列表 -->
        <div class="space-y-3 mb-4" v-if="riskTimeline.length > 0">
          <div class="flex items-center gap-3 p-3 rounded-lg" v-for="event in riskTimeline" :key="event.id"
            :class="getRiskEventCardClass(event.riskLevel)">
            <div class="w-10 h-10 flex-shrink-0">
              <img :src="getRiskEventIcon(event.riskLevel)" :alt="event.title" class="w-10 h-10 object-contain" />
            </div>
            <div class="flex-1">
              <div class="flex justify-between items-start">
                <div>
                  <h4 class="text-sm font-bold text-[#333333]">{{ event.title }}</h4>
                  <p class="text-xs text-[#999999] mt-1">{{ event.description }}</p>
                </div>
                <span class="text-xs text-[#999999] whitespace-nowrap ml-2">{{ event.timeAgo }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计摘要 -->
        <div class="bg-[#F9F9F9] rounded-lg border p-4 border-[#EEEEEE]">
          <div class="flex justify-between text-center">
            <div class="flex-1">
              <div class="text-xs text-gray-600">高风险事件</div>
              <div class="text-lg font-bold text-red-600">{{ riskEventCounts.high }}</div>
            </div>
            <div class="flex-1">
              <div class="text-xs text-gray-600">中风险事件</div>
              <div class="text-lg font-bold text-yellow-600">{{ riskEventCounts.medium }}</div>
            </div>
            <div class="flex-1">
              <div class="text-xs text-gray-600">低风险事件</div>
              <div class="text-lg font-bold text-green-600">{{ riskEventCounts.low }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 温馨提示 -->
  <LRemark
    content="时间趋势分析通过可视化图表展示申请人的交易金额趋势、申请频率趋势和风险变化趋势。图表数据基于历史申请记录生成，可以直观反映申请行为的时间规律性。建议重点关注异常波动时期，如短期内交易金额大幅增长或申请频率异常增高的情况。趋势分析有助于识别周期性风险模式和预测未来风险走向。数据统计周期通常为近12个月。" />
</template>

<script>
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import * as echarts from 'echarts'

export default {
  name: 'TimeTrendAnalysis',
  components: {
    LTitle,
    LRemark
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      amountChartInstance: null,
      countChartInstance: null,
      activeAmountPeriod: '最近90天新增'
    }
  },
  computed: {
    // 交易金额趋势点
    amountTrendPoints() {
      return [
        { label: '最近7天', value: this.parseIntervalValue(this.data.xyp_t01acbzzz) },
        { label: '最近14天', value: this.parseIntervalValue(this.data.xyp_t01acczzz) },
        { label: '最近21天', value: this.parseIntervalValue(this.data.xyp_t01acdzzz) },
        { label: '最近30天', value: this.parseIntervalValue(this.data.xyp_t01acezzz) },
        { label: '最近90天', value: this.parseIntervalValue(this.data.xyp_t01acfzzz) },
        { label: '最近180天', value: this.parseIntervalValue(this.data.xyp_t01acgzzz) }
      ]
    },

    maxAmountTrend() {
      return Math.max(...this.amountTrendPoints.map(p => p.value))
    },

    minAmountTrend() {
      return Math.min(...this.amountTrendPoints.map(p => p.value))
    },

    avgAmountTrend() {
      const sum = this.amountTrendPoints.reduce((acc, p) => acc + p.value, 0)
      return sum / this.amountTrendPoints.length
    },

    // 交易笔数趋势数据
    countTrendData() {
      return [
        { label: '近7日', value: this.parseIntervalValue(this.data.xyp_t01aabzzz) },
        { label: '近14日', value: this.parseIntervalValue(this.data.xyp_t01aaczzz) },
        { label: '近21日', value: this.parseIntervalValue(this.data.xyp_t01aadzzz) },
        { label: '近30日', value: this.parseIntervalValue(this.data.xyp_t01aaezzz) },
        { label: '近90日', value: this.parseIntervalValue(this.data.xyp_t01aafzzz) },
        { label: '近180日', value: this.parseIntervalValue(this.data.xyp_t01aagzzz) }
      ]
    },

    maxCountTrend() {
      return Math.max(...this.countTrendData.map(d => d.value))
    },

    minCountTrend() {
      return Math.min(...this.countTrendData.map(d => d.value))
    },

    avgCountTrend() {
      const sum = this.countTrendData.reduce((acc, d) => acc + d.value, 0)
      return sum / this.countTrendData.length
    },


    // 还款成功率趋势
    successRateTrend() {
      return [
        {
          period: '最近90天',
          success: this.parseIntervalValue(this.data.xyp_cpl0025),
          failure: this.parseIntervalValue(this.data.xyp_cpl0024)
        },
        {
          period: '最近180天',
          success: this.parseIntervalValue(this.data.xyp_cpl0027),
          failure: this.parseIntervalValue(this.data.xyp_cpl0026)
        }
      ].map(item => {
        const total = item.success + item.failure || 1
        return {
          ...item,
          rate: item.success / total
        }
      })
    },

    // 机构数量变化趋势
    institutionTrendData() {
      const data = [
        {
          period: '最近30天',
          total: this.parseIntervalValue(this.data.xyp_cpl0011),
          new: this.parseNewInstitutionCount(this.data.xyp_t02dezezz_dezzzz, this.data.xyp_cpl0001)
        },
        {
          period: '最近90天',
          total: this.parseIntervalValue(this.data.xyp_cpl0012),
          new: this.parseNewInstitutionCount(this.data.xyp_t02dezfzz_dezzzz, this.data.xyp_cpl0001)
        },
        {
          period: '最近180天',
          total: this.parseIntervalValue(this.data.xyp_cpl0013),
          new: this.parseNewInstitutionCount(this.data.xyp_t02dezgzz_dezzzz, this.data.xyp_cpl0001)
        }
      ]

      const maxTotal = Math.max(...data.map(d => d.total)) || 1
      const maxNew = Math.max(...data.map(d => d.new)) || 1

      return data.map((item, index) => {
        const prevItem = index > 0 ? data[index - 1] : null
        let trendClass = 'trend-stable'
        let trendIcon = 'fas fa-minus'
        let trendText = '保持稳定'

        if (prevItem) {
          if (item.total > prevItem.total) {
            trendClass = 'trend-up'
            trendIcon = 'fas fa-arrow-up'
            trendText = '增长趋势'
          } else if (item.total < prevItem.total) {
            trendClass = 'trend-down'
            trendIcon = 'fas fa-arrow-down'
            trendText = '下降趋势'
          }
        }

        return {
          ...item,
          totalPercentage: (item.total / maxTotal) * 100,
          newPercentage: (item.new / maxNew) * 30,
          trendClass,
          trendIcon,
          trendText
        }
      })
    },

    // 风险事件时间线
    riskTimeline() {
      const events = []

      // 基于数据生成风险事件
      if (this.data.xyp_cpl0028 === '1') {
        events.push({
          id: 'overdue_1day',
          title: '最近1天逾期',
          description: '检测到逾期行为',
          timeAgo: '1天前',
          position: 95,
          riskLevel: 'high-risk'
        })
      }

      if (this.data.xyp_cpl0029 === '1') {
        events.push({
          id: 'overdue_7day',
          title: '最近7天逾期',
          description: '7天内发生逾期',
          timeAgo: '7天前',
          position: 85,
          riskLevel: 'high-risk'
        })
      }

      if (this.parseIntervalValue(this.data.xyp_cpl0070) > 0) {
        events.push({
          id: 'new_loan_1day',
          title: '最近1天新贷款',
          description: '申请新的贷款机构',
          timeAgo: '1天前',
          position: 92,
          riskLevel: 'medium-risk'
        })
      }

      if (this.parseIntervalValue(this.data.xyp_cpl0009) > 5) {
        events.push({
          id: 'high_activity_7day',
          title: '7天高频申请',
          description: '短期内多次申请',
          timeAgo: '7天内',
          position: 80,
          riskLevel: 'medium-risk'
        })
      }

      const settledInstitutions = this.parseIntervalValue(this.data.xyp_cpl0002)
      if (settledInstitutions > 0) {
        events.push({
          id: 'settled_loans',
          title: '成功结清贷款',
          description: `已结清${settledInstitutions}家机构`,
          timeAgo: '历史记录',
          position: 20,
          riskLevel: 'low-risk'
        })
      }

      return events.sort((a, b) => b.position - a.position)
    },

    // 新增机构金额分析
    newInstitutionAmounts() {
      const amounts = [
        {
          period: '最近90天',
          totalAmount: this.parseIntervalValue(this.data.xyp_t01aczfzz),
          maxAmount: this.parseIntervalValue(this.data.xyp_t01aazfzz),
          minAmount: this.parseIntervalValue(this.data.xyp_t01abzfzz),
          avgAmount: this.parseIntervalValue(this.data.xyp_t01adzfbz)
        },
        {
          period: '最近180天',
          totalAmount: this.parseIntervalValue(this.data.xyp_t01aczgzz),
          maxAmount: this.parseIntervalValue(this.data.xyp_t01aazgzc),
          minAmount: this.parseIntervalValue(this.data.xyp_t01abzgzc),
          avgAmount: this.parseIntervalValue(this.data.xyp_t01adzgzc)
        },
        {
          period: '最近360天',
          totalAmount: this.parseIntervalValue(this.data.xyp_t01achzzc),
          maxAmount: this.parseIntervalValue(this.data.xyp_t01aazhzz),
          minAmount: 0, // 没有对应的最小值字段
          avgAmount: this.parseIntervalValue(this.data.xyp_t01adhzbc)
        }
      ]

      const maxTotal = Math.max(...amounts.map(a => a.totalAmount)) || 1
      return amounts.map(amount => ({
        ...amount,
        percentage: (amount.totalAmount / maxTotal) * 100
      }))
    },

    riskEventCounts() {
      const counts = { high: 0, medium: 0, low: 0 }
      this.riskTimeline.forEach(event => {
        if (event.riskLevel === 'high-risk') counts.high++
        else if (event.riskLevel === 'medium-risk') counts.medium++
        else counts.low++
      })
      return counts
    },

    // 当前选中的金额数据
    currentAmountData() {
      return this.newInstitutionAmounts.find(item => item.period === this.activeAmountPeriod) || this.newInstitutionAmounts[0]
    }
  },

  mounted() {
    this.initAmountChart()
    this.initCountChart()
    window.addEventListener('resize', this.handleResize)
  },

  beforeUnmount() {
    if (this.amountChartInstance) {
      this.amountChartInstance.dispose()
      this.amountChartInstance = null
    }
    if (this.countChartInstance) {
      this.countChartInstance.dispose()
      this.countChartInstance = null
    }
    window.removeEventListener('resize', this.handleResize)
  },

  watch: {
    amountTrendPoints() {
      this.updateAmountChart()
    },
    countTrendData() {
      this.updateCountChart()
    }
  },

  methods: {
    initAmountChart() {
      if (!this.$refs.amountChartRef) return
      this.amountChartInstance = echarts.init(this.$refs.amountChartRef)
      this.updateAmountChart()
    },

    updateAmountChart() {
      if (!this.amountChartInstance) return

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            const data = params[0]
            const point = this.amountTrendPoints[data.dataIndex]
            return `${data.name}<br/>金额: ${this.formatAmount(point.value)}`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.amountTrendPoints.map(p => p.label.replace('最近', '近').replace('天', '日')),
          axisLabel: {
            rotate: 45,
            fontSize: 12,
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (value) => {
              return this.formatAmount(value)
            },
            fontSize: 12,
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [
          {
            name: '交易金额',
            type: 'bar',
            data: this.amountTrendPoints.map(p => p.value),
            barWidth: '25%',
            barMinHeight: 2,
            itemStyle: {
              color: '#10b981',
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => {
                return this.formatAmount(params.value)
              },
              fontSize: 11,
              color: '#333'
            }
          }
        ]
      }

      this.amountChartInstance.setOption(option)
    },

    initCountChart() {
      if (!this.$refs.countChartRef) return
      this.countChartInstance = echarts.init(this.$refs.countChartRef)
      this.updateCountChart()
    },

    updateCountChart() {
      if (!this.countChartInstance) return

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            const data = params[0]
            const item = this.countTrendData[data.dataIndex]
            return `${data.name}<br/>笔数: ${item.value}笔`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.countTrendData.map(d => d.label),
          axisLabel: {
            rotate: 45,
            fontSize: 12,
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}笔',
            fontSize: 12,
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [
          {
            name: '交易笔数',
            type: 'bar',
            data: this.countTrendData.map(d => d.value),
            barWidth: '25%',
            barMinHeight: 2,
            itemStyle: {
              color: '#10b981',
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => {
                return `${params.value}笔`
              },
              fontSize: 11,
              color: '#333'
            }
          }
        ]
      }

      this.countChartInstance.setOption(option)
    },

    handleResize() {
      if (this.amountChartInstance) {
        this.amountChartInstance.resize()
      }
      if (this.countChartInstance) {
        this.countChartInstance.resize()
      }
    },

    parseIntervalValue(value) {
      if (!value || value === '' || value === '-1') return 0
      const num = parseInt(value)
      if (isNaN(num)) return 0

      // 根据区间映射返回大致范围的中值
      switch (num) {
        case 1: return 1
        case 2: return 3
        case 3: return 7
        case 4: return 15
        case 5: return 25
        default: return num
      }
    },

    parseNewInstitutionCount(ratioValue, totalValue) {
      const ratio = parseFloat(ratioValue) || 0
      const total = this.parseIntervalValue(totalValue)
      return Math.round(ratio * total)
    },

    formatAmount(value) {
      if (value === 0) return '0元'
      if (value < 1000) return `${value}元`
      if (value < 10000) return `${(value / 1000).toFixed(1)}千元`
      return `${(value / 10000).toFixed(1)}万元`
    },


    getRateClass(rate) {
      if (rate >= 0.8) return 'text-green-600'
      if (rate >= 0.6) return 'text-yellow-600'
      return 'text-red-600'
    },

    getRateBarClass(rate) {
      if (rate >= 0.8) return 'bg-green-500'
      if (rate >= 0.6) return 'bg-yellow-500'
      return 'bg-red-500'
    },

    getRiskEventCardClass(riskLevel) {
      if (riskLevel === 'high-risk') return 'bg-[#FFF0F0] border border-red-200'
      if (riskLevel === 'medium-risk') return 'bg-[#FFF8E7] border border-[#F5D980]'
      return 'bg-[#ECF9EF] border border-[#CAECD3]'
    },

    getRiskEventIcon(riskLevel) {
      if (riskLevel === 'high-risk') return new URL('@/assets/images/report/gfx.png', import.meta.url).href
      if (riskLevel === 'medium-risk') return new URL('@/assets/images/report/zfx.png', import.meta.url).href
      return new URL('@/assets/images/report/zq.png', import.meta.url).href
    }
  }
}
</script>

<style scoped>
.time-trend-analysis {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.section-spacing {
  height: 20px;
}

.time-trend-analysis:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 标签页样式 */
.loan-evaluation-tabs {}

.loan-evaluation-tabs :deep(.van-tabs__wrap) {
  height: 32px !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-bottom: 1px solid #DDDDDD !important;
}

.loan-evaluation-tabs :deep(.van-tabs__nav) {
  background-color: transparent !important;
  gap: 0;
  height: 32px !important;
}

.loan-evaluation-tabs :deep(.van-tab) {
  color: #999999 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.loan-evaluation-tabs :deep(.van-tab--active) {
  color: var(--van-theme-primary) !important;
  background-color: unset !important;
}

.loan-evaluation-tabs :deep(.van-tabs__line) {
  height: 2px !important;
  border-radius: 1px !important;
}

/* 内容区域样式 */
.loan-evaluation-wrap {
  @apply mx-4 my-1;
  border: 1px solid #DDDDDD;
  background-color: #F9F9F9;
  border-radius: 8px;
}

.loan-evaluation-content {
  padding: 8px 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .time-trend-analysis {
    padding: 16px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .time-trend-analysis {
    padding: 12px;
  }
}

.section-title {
  margin-bottom: 20px;
}

.section-title h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0;
}



.card-header {
  margin-bottom: 16px;
}

/* 交易金额趋势图 */
.amount-trend-chart {
  display: flex;
  gap: 24px;
  align-items: center;
}

.chart-container {
  flex: 2;
  height: 200px;
  position: relative;
}

.trend-line-chart {
  width: 100%;
  height: 100%;
  position: relative;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.chart-grid {
  position: absolute;
  width: 100%;
  height: 100%;
}

.grid-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: #f3f4f6;
}

.trend-points {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.trend-point {
  position: absolute;
  transform: translate(-50%, 50%);
}

.point-dot {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.point-label {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
}

.trend-line {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  pointer-events: none;
}

.trend-legend {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.amount-dot {
  background: #3b82f6;
}

.legend-text {
  font-size: 14px;
  color: #374151;
}

.trend-stats>*+* {
  margin-top: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
}

.stat-value {
  font-size: 12px;
  font-weight: 600;
}

/* 交易笔数趋势图 */
.count-trend-chart {
  display: flex;
  gap: 24px;
  align-items: center;
}

.bar-chart {
  flex: 2;
}

.chart-bars {
  display: flex;
  gap: 16px;
  align-items: end;
  height: 120px;
  padding: 0 20px;
}

.trend-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 8px;
  transition: height 0.3s ease;
}

.bar-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.chart-labels {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding: 0 20px;
}

.chart-label {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
}

.count-analysis {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.analysis-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.analysis-icon {
  width: 32px;
  height: 32px;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.analysis-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analysis-title {
  font-weight: 600;
  color: #374151;
}

.analysis-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

/* 还款成功率趋势 */
.success-rate-trend {
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.rate-items>*+* {
  margin-top: 12px;
}

.rate-item {
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
}

.rate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rate-period {
  font-weight: 600;
  color: #374151;
}

.rate-percentage {
  font-weight: 600;
}

.rate-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.rate-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.rate-details {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}

/* 机构数量变化趋势 */
.institution-trend {
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.trend-comparison>*+* {
  margin-top: 16px;
}

.comparison-item {
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-period {
  font-weight: 600;
  color: #374151;
}

.item-indicators {
  display: flex;
  gap: 12px;
}

.indicator {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.indicator.total {
  background: #dbeafe;
  color: #2563eb;
}

.indicator.new {
  background: #dcfce7;
  color: #16a34a;
}

.item-visual {
  margin-bottom: 8px;
}

.visual-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

.bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.total-segment {
  background: #3b82f6;
}

.new-segment {
  background: #10b981;
}

.item-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.trend-up {
  color: #16a34a;
}

.trend-down {
  color: #dc2626;
}

.trend-stable {
  color: #6b7280;
}

/* 风险事件时间线 */
.risk-timeline {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

.timeline-container {
  position: relative;
  height: 200px;
  margin-bottom: 20px;
}

.timeline-axis {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e7eb;
  transform: translateY(-50%);
}

.timeline-events {
  position: relative;
  height: 100%;
}

.timeline-event {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  width: 120px;
}

.timeline-event.high-risk .event-marker {
  background: #fee2e2;
  color: #dc2626;
  border-color: #dc2626;
}

.timeline-event.medium-risk .event-marker {
  background: #fef3c7;
  color: #d97706;
  border-color: #d97706;
}

.timeline-event.low-risk .event-marker {
  background: #dcfce7;
  color: #16a34a;
  border-color: #16a34a;
}

.event-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin: 0 auto 8px;
  position: relative;
  z-index: 2;
}

.event-content {
  background: white;
  border-radius: 6px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.event-title {
  font-weight: 600;
  font-size: 12px;
  color: #374151;
  margin-bottom: 4px;
}

.event-desc {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 4px;
}

.event-time {
  font-size: 10px;
  color: #9ca3af;
}

.timeline-summary {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.summary-stats {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.summary-stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.summary-stat.high-risk .stat-number {
  color: #dc2626;
}

.summary-stat.medium-risk .stat-number {
  color: #d97706;
}

.summary-stat.low-risk .stat-number {
  color: #16a34a;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
}

/* 新增机构金额分析 */
.new-institution-amounts {
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.amount-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.amount-item {
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.amount-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.amount-period {
  font-weight: 600;
  color: #374151;
}

.amount-total {
  font-weight: 600;
  color: #059669;
}

.amount-breakdown {
  margin-bottom: 12px;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.breakdown-label {
  font-size: 12px;
  color: #6b7280;
}

.breakdown-value {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.amount-progress {
  margin-top: 8px;
}

.progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 3px;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {

  .amount-trend-chart,
  .count-trend-chart {
    flex-direction: column;
    gap: 16px;
  }

  .chart-container,
  .bar-chart {
    width: 100%;
  }
}
</style>
