<route lang="json5">
{
  style: {
    navigationBarTitleText: '风险预警',
    navigationBarBackgroundColor: '#fff',
    navigationBarTextStyle: 'black',
  },
}
</route>

<template>
  <view class="risk-page">
    <view class="list-wrap">
      <view v-for="item in riskList" :key="item.id" class="risk-card">
        <view class="left-line" :class="item.level"></view>
        <view class="content">
          <view class="head">
            <text class="title">{{ item.title }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
          <view class="desc">{{ item.desc }}</view>
          <view class="foot">
            <view class="tag-box">
              <text class="bank">{{ item.bankName }}</text>
              <text class="level-tag" :class="item.level">{{ item.levelText }}</text>
            </view>
            <wd-button size="small" type="primary" plain>处置</wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const riskList = ref([
  { 
    id: 1, 
    title: '信贷逾期率超标', 
    desc: '当前逾期率达2.5%，超过监管红线', 
    bankName: '某某农村信用社', 
    time: '10:30',
    level: 'high',
    levelText: '高风险' 
  },
  { 
    id: 2, 
    title: '大额交易异常', 
    desc: '检测到单笔超大额资金流向敏感行业', 
    bankName: '某某商业银行', 
    time: '昨日',
    level: 'medium',
    levelText: '中风险'
  },
])
</script>

<style lang="scss" scoped>
.risk-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 24rpx 32rpx;
}

.risk-card {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  display: flex;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
  
  .left-line {
    width: 8rpx;
    background: #ccc;
    
    &.high { background: #d32f2f; }
    &.medium { background: #f57c00; }
  }
  
  .content {
    flex: 1;
    padding: 24rpx;
  }
  
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
    
    .title { font-size: 30rpx; font-weight: 600; color: #333; }
    .time { font-size: 24rpx; color: #999; }
  }
  
  .desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20rpx;
  }
  
  .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1rpx solid #f5f5f5;
    padding-top: 20rpx;
    
    .tag-box {
      display: flex;
      align-items: center;
      
      .bank { font-size: 24rpx; color: #666; margin-right: 16rpx; }
      .level-tag {
        font-size: 20rpx;
        padding: 2rpx 8rpx;
        border-radius: 4rpx;
        
        &.high { background: #fce4ec; color: #d32f2f; }
        &.medium { background: #FFF3E0; color: #f57c00; }
      }
    }
  }
}
</style>
