<template>
    <view class="container">
      <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
        <div class="app-container">
    <!-- <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">今日结算次数</div>
          <div class="num">{{ debitCardAnalysis.todayCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">今日收款金额</div>
          <div class="num">{{ debitCardAnalysis.todayAmount }}<span>元</span></div>
        </div>
      </div>
    </div> -->
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近7日结算次数</div>
          <div class="num">{{ debitCardAnalysis.sevenDayCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近7日收款金额</div>
          <div class="num">{{ debitCardAnalysis.sevenDayAmount }}<span>元</span></div>
        </div>
      </div>
    </div>
    <!-- <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近1月结算次数</div>
          <div class="num">{{ debitCardAnalysis.oneMonthCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近1月收款金额</div>
          <div class="num">{{ debitCardAnalysis.oneMonthAmount }}<span>元</span></div>
        </div>
      </div>
    </div> -->
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近3月结算次数</div>
          <div class="num">{{ debitCardAnalysis.threeMonthCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近3月收款金额</div>
          <div class="num">{{ debitCardAnalysis.threeMonthAmount }}<span>元</span></div>
        </div>
      </div>
    </div>
    <!-- <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月结算次数</div>
          <div class="num">{{ debitCardAnalysis.sixMonthCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #047857 0%, #065f46 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月收款金额</div>
          <div class="num">{{ debitCardAnalysis.sixMonthAmount }}<span>元</span></div>
        </div>
      </div>
    </div> -->
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近1年结算次数</div>
          <div class="num">{{ debitCardAnalysis.oneYearCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近1年收款金额</div>
          <div class="num">{{ debitCardAnalysis.oneYearAmount }}<span>元</span></div>
        </div>
      </div>
    </div>
    <!-- <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近2年结算次数</div>
          <div class="num">{{ debitCardAnalysis.twoYearCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近2年收款金额</div>
          <div class="num">{{ debitCardAnalysis.twoYearAmount }}<span>元</span></div>
        </div>
      </div>
    </div> -->
    <!-- <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);">
          <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近5年结算次数</div>
          <div class="num">{{ debitCardAnalysis.fiveYearCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近5年收款金额</div>
          <div class="num">{{ debitCardAnalysis.fiveYearAmount }}<span>元</span></div>
        </div>
      </div>
    </div> -->
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);">
          <uni-icons type="checkmarkempty" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">总结算次数</div>
          <div class="num">{{ debitCardAnalysis.totalCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item" >
        <view class="item-icon" style="background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);">
          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">总收款金额</div>
          <div class="num">{{ debitCardAnalysis.totalAmount }}<span>元</span></div>
        </div>
      </div>
    </div>
 

    <div></div>
  </div>
  
  <view class="section-title" v-show="listData.length>0">
    <view class="title-decorator"></view>
    <text class="title-text">结算卡统计</text>
    <view class="view-switch">
      <view 
        :class="['switch-item', { 'active': viewMode === 'cardList' }]" 
        @click="viewMode = 'cardList'; btFirstClick()"
      >
        <uni-icons type="list" size="16" :color="viewMode === 'cardList' ? '#667eea' : '#999'"></uni-icons>
        <text>列表</text>
      </view>
      <view 
        :class="['switch-item', { 'active': viewMode === 'amountList' }]" 
        @click="viewMode = 'amountList'; btSecondClick()"
      >
        <uni-icons type="star" size="16" :color="viewMode === 'amountList' ? '#667eea' : '#999'"></uni-icons>
        <text>近6月收款</text>
      </view>
      <view 
        :class="['switch-item', { 'active': viewMode === 'line' }]" 
        @click="viewMode = 'line'"
      >
        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
        <text>曲线图</text>
      </view>
      <view 
        :class="['switch-item', { 'active': viewMode === 'column' }]" 
        @click="viewMode = 'column'"
      >
        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
        <text>柱状图</text>
      </view>
    </view>
  </view>
      </u-sticky>
  
  <!-- 曲线图展示 -->
  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
    <qiun-data-charts 
      type="line"
      canvasId="debitCardLineChart"
      :chartData="chartData"
      :opts="lineChartOpts"
      :loadingType="1"
    />
  </view>
  
  <!-- 柱状图展示 -->
  <view class="chart-container" v-if="listData.length>0 && viewMode === 'column'">
    <qiun-data-charts 
      type="column"
      canvasId="debitCardColumnChart"
      :chartData="chartData"
      :opts="columnChartOpts"
      :loadingType="1"
    />
  </view>
  
  <!-- 结算卡列表展示 -->
      <u-list v-show="viewMode === 'cardList'" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
        <u-list-item v-for="(item, index) in listData" :key="index">
          <view class="list-item">
            <view class="item-header">
              <view class="header-left">
                <view class="card-badge">
                  <uni-icons type="star" size="16" color="#ffffff"></uni-icons>
                  <text>{{ item.name }}-{{ item.code }}</text>
                </view>
              </view>
            </view>
            <view class="item-body">
                <view class="item-row">
                <text class="row-label">今日结算次数：</text>
                <text class="row-value">{{ item.todayCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">今日收款金额：</text>
                <text class="row-value">{{ item.todayAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">近7日结算次数：</text>
                <text class="row-value">{{ item.sevenDayCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">近7日收款金额：</text>
                <text class="row-value">{{ item.sevenDayAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">近1月结算次数：</text>
                <text class="row-value">{{ item.oneMonthCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">近1月收款金额：</text>
                <text class="row-value">{{ item.oneMonthAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">近3月结算次数：</text>
                <text class="row-value">{{ item.threeMonthCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">近3月收款金额：</text>
                <text class="row-value">{{ item.threeMonthAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">近6月结算次数：</text>
                <text class="row-value">{{ item.sixMonthCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">近6月收款金额：</text>
                <text class="row-value">{{ item.sixMonthAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">近1年结算次数：</text>
                <text class="row-value">{{ item.oneYearCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">近1年收款金额：</text>
                <text class="row-value">{{ item.oneYearAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">近2年结算次数：</text>
                <text class="row-value">{{ item.twoYearCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">近2年收款金额：</text>
                <text class="row-value">{{ item.twoYearAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">近5年结算次数：</text>
                <text class="row-value">{{ item.fiveYearCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">近5年收款金额：</text>
                <text class="row-value">{{ item.fiveYearAmount }} 元</text>
              </view>
              <view class="item-row">
                <text class="row-label">总结算次数：</text>
                <text class="row-value">{{ item.totalCount }} 次</text>
              </view>
              <view class="item-row">
                <text class="row-label">总收款金额：</text>
                <text class="row-value">{{ item.totalAmount }} 元</text>
              </view>
            </view>
          </view>
        </u-list-item>
        <view>
        </view>
      </u-list>
      
      <!-- 近6月收款金额列表展示 -->
      <u-list v-show="viewMode === 'amountList'"  @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
        <u-list-item v-for="(item, index) in secondListData" :key="index">
          <view class="list-item">
            <view class="item-header">
              <view class="header-left">
                <view class="card-badge">
                  <uni-icons type="star" size="16" color="#ffffff"></uni-icons>
                  <text>{{ item.debitCard }}</text>
                </view>
              </view>
              <view class="header-right">
                <text class="amount-label">收款金额：</text>
                <text class="amount-value">{{ item.amount }}元</text>
              </view>
            </view>
          </view>
        </u-list-item>
        <view>
        </view>
      </u-list>
      <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
        @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
    </view>
    <!-- 悬停按钮返回统计分析-->
      <statisticBtn></statisticBtn>
  </template>
  
  <script setup>
  import { getDebitCardAnalysis } from '@/api/invest/statisticAnalysis'
  import { getDicts } from '@/api/system/dict/data.js'
  import {onLoad,onShow} from "@dcloudio/uni-app";
  import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
      // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
  import {reactive ,toRefs,ref,computed }from "vue";
  const listData = ref([])
  const isShow = ref(false)
  const settingPickShow = ref(false)
  const settingColumns = ref([])

  const tabShow = ref(false)
const firstType = ref("primary")
const secondType = ref("default")
const secondListData = ref([])
const viewMode = ref('cardList') // 'cardList' 或 'amountList' 或 'line' 或 'column'

  const debitCardAnalysis = ref({})
  const data = reactive({
    filterPanel: false,
    queryParams: {
    type: 1,
    time: null,
    dataType: null,
    id: null
     } 
  })
  const { filterPanel, queryParams} = toRefs(data)
  
  // 曲线图配置
  const lineChartOpts = computed(() => {
    const dataCount = secondListData.value ? secondListData.value.length : 0
    const showXAxisLabel = dataCount <= 10
    
    // 计算数据范围以动态设置Y轴
    let minValue = 0
    let maxValue = 0
    if (secondListData.value && secondListData.value.length > 0) {
      // 过滤掉金额为0的数据
      const filteredValues = secondListData.value
        .filter(item => {
          const value = parseFloat(item.amount)
          return !isNaN(value) && value > 0
        })
        .map(item => parseFloat(item.amount) || 0)
      
      if (filteredValues.length > 0) {
        minValue = Math.min(0, ...filteredValues)
        maxValue = Math.max(0, ...filteredValues)
        // 给最小值和最大值留出20%的空间
        const range = maxValue - minValue
        minValue = minValue - range * 0.2
        maxValue = maxValue + range * 0.2
      }
    }
    
    return {
      color: ['#667eea'],
      padding: [15, 15, 30, 5],
      enableScroll: false,
      enableMarkLine: true,
      dataLabel: false,
      dataPointShape: true,
      legend: {
        show: false
      },
      xAxis: {
        disableGrid: true,
        boundaryGap: 'justify',
        axisLine: false,
        scrollShow: true,
        itemCount: 5,
        disabled: !showXAxisLabel,
        fontSize: showXAxisLabel ? 10 : 0,
        fontColor: showXAxisLabel ? '#999999' : 'transparent',
        rotateLabel: true,
        rotateAngle: 30
      },
      yAxis: {
        gridType: 'dash',
        dashLength: 4,
        gridColor: '#EEEEEE',
        splitNumber: 5,
        min: minValue,
        max: maxValue,
        fontSize: 10,
        fontColor: '#999999',
        showTitle: false,
        disabled: false,
        format: (val) => {
          if (val >= 10000) {
            return (val / 10000).toFixed(1) + 'w'
          }
          if (val <= -10000) {
            return (val / 10000).toFixed(1) + 'w'
          }
          return val.toFixed(0)
        }
      },
      extra: {
        line: {
          type: 'curve',
          width: 3,
          activeType: 'hollow',
          linearType: 'custom',
          linearOpacity: 0.2,
          onShadow: true,
          animation: true
        }
      }
    }
  })
  
  // 柱状图配置
  const columnChartOpts = computed(() => {
    const dataCount = secondListData.value ? secondListData.value.length : 0
    const showXAxisLabel = dataCount <= 10
    
    // 计算数据范围以动态设置Y轴
    let minValue = 0
    let maxValue = 0
    if (secondListData.value && secondListData.value.length > 0) {
      // 过滤掉金额为0的数据
      const filteredValues = secondListData.value
        .filter(item => {
          const value = parseFloat(item.amount)
          return !isNaN(value) && value > 0
        })
        .map(item => parseFloat(item.amount) || 0)
      
      if (filteredValues.length > 0) {
        minValue = Math.min(0, ...filteredValues)
        maxValue = Math.max(0, ...filteredValues)
        // 给最小值和最大值留出20%的空间
        const range = maxValue - minValue
        minValue = minValue - range * 0.2
        maxValue = maxValue + range * 0.2
      }
    }
    
    return {
      color: ['#667eea'],
      padding: [15, 15, 30, 5],
      enableScroll: false,
      dataLabel: false,
      legend: {
        show: false
      },
      xAxis: {
        disableGrid: true,
        boundaryGap: 'center',
        axisLine: false,
        scrollShow: true,
        itemCount: 5,
        disabled: !showXAxisLabel,
        fontSize: showXAxisLabel ? 10 : 0,
        fontColor: showXAxisLabel ? '#999999' : 'transparent',
        rotateLabel: true,
        rotateAngle: 30
      },
      yAxis: {
        gridType: 'dash',
        dashLength: 4,
        gridColor: '#EEEEEE',
        splitNumber: 5,
        min: minValue,
        max: maxValue,
        fontSize: 10,
        fontColor: '#999999',
        showTitle: false,
        disabled: false,
        format: (val) => {
          if (val >= 10000) {
            return (val / 10000).toFixed(1) + 'w'
          }
          if (val <= -10000) {
            return (val / 10000).toFixed(1) + 'w'
          }
          return val.toFixed(0)
        }
      },
      extra: {
        column: {
          type: 'group',
          width: 20,
          activeBgColor: '#764ba2',
          activeBgOpacity: 0.08,
          linearType: 'none',
          barBorderCircle: true,
          seriesGap: 2
        }
      }
    }
  })
  
  // 图表数据
  const chartData = computed(() => {
    if (!secondListData.value || secondListData.value.length === 0) {
      return {
        categories: [],
        series: []
      }
    }
    // 创建副本并反转数组，使数据从前往后排序，过滤掉金额为0的数据
    const reversedData = [...secondListData.value]
      .filter(item => {
        const value = parseFloat(item.amount)
        return !isNaN(value) && value > 0
      })
      .reverse()
    
    return {
      categories: reversedData.map(item => item.debitCard || ''),
      series: [
        {
          name: '收款金额',
          index: 0,
          data: reversedData.map(item => {
            const value = parseFloat(item.amount)
            return isNaN(value) ? 0 : value
          }),
          color: (value) => {
            // 负数使用红色，正数使用蓝紫色
            return value < 0 ? '#ef4444' : '#667eea'
          }
        }
      ]
    }
  })
  
  const windowHeight = computed(() => {
              uni.getSystemInfoSync().windowHeight - 50
          })	
  onLoad(() => {
      getList()
    });
  
   onShow(() => {
      if (isShow.value) {
      listData.value=[]
        getList()
        isShow.value = false
      }
    });

    
  function   btFirstClick() {
    tabShow.value=false
    firstType.value="primary"
    secondType.value="default"
    viewMode.value = 'cardList'
  }
  
  function  btSecondClick() {
    secondType.value="primary"
    firstType.value="default"
    tabShow.value=true
    viewMode.value = 'amountList'
  }

  function getList() {
        getDebitCardAnalysis({...queryParams.value }).then(res => {
            debitCardAnalysis.value = { ...res.data }
            secondListData.value=[]
            listData.value=[]
          listData.value = listData.value.concat(res.data.debitCardTableList)
          secondListData.value = secondListData.value.concat(res.data.debitCardList)
        }).catch(() => {
        })
      }
  function settingConfirm(e) {
        queryParams.value.settingId = e.value[0].settingId
        queryParams.value.settingName = e.value[0].settingName
        settingPickShow.value = false
      }
  function settingCancel() {
        settingPickShow.value = false
      }

  </script>
  
  <style lang="scss" scoped>
page {
  height: 100%;
  overflow: auto;
}
.app-container {
  background-color: #f5f7fa;
  padding: 8rpx 0;

  .header-con {
    width: calc(100% - 32rpx);
    margin: 0 16rpx 12rpx 16rpx;
    background-color: transparent;
    display: flex;
    gap: 12rpx;
    
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 24rpx 20rpx;
      transition: all 0.3s ease;
      border: 2rpx solid #e8edf3;
      border-radius: 16rpx;
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      }
      
      .item-icon {
        width: 72rpx;
        height: 72rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
        flex-shrink: 0;
      }
      
      img {
        width: 72rpx;
        height: 72rpx;
        border-radius: 16rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      
      .info-sum {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        
        .title {
          color: #7f8c8d;
          margin-bottom: 8rpx;
          font-size: 24rpx;
          line-height: 1.4;
        }
        
        .num {
          color: #2c3e50;
          font-size: 32rpx;
          font-weight: 600;
          
          span {
            font-size: 20rpx;
            color: #95a5a6;
            margin-left: 4rpx;
            font-weight: normal;
          }
        }
      }
    }
  }
}
  .btnAdd {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        display:float;
        text-align: center;
      }
  
  .search-view {
    padding: 12rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;

    .search-input {
      background: #F5F5F5;
      color: #333333;
      margin-right: 36rpx;
    }
  }
  
  .filter-panel {
    width: 100%;
    position: absolute;
    left: 0;
    top: 180rpx;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;

    .filter-panel-content {
      background-color: #ffffff;
      padding: 0 30rpx 30rpx;
      border-radius: 16rpx 16rpx 0 0;

      .filter-title {
        color: #2c3e50;
        font-size: 32rpx;
        font-weight: 600;
        padding: 32rpx 0 24rpx 20rpx;
        position: relative;
        display: flex;
        align-items: center;
        
        &::before {
          content: '';
          width: 6rpx;
          height: 32rpx;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 3rpx;
          margin-right: 12rpx;
          flex-shrink: 0;
        }
      }

      .state-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 16rpx;

        .state-item {
          padding: 0 32rpx;
          height: 68rpx;
          line-height: 68rpx;
          border: 2rpx solid #e8edf3;
          border-radius: 68rpx;
          text-align: center;
          font-size: 28rpx;
          color: #2c3e50;
          background: #ffffff;
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.96);
          }
        }

        .active {
          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
          border: 2rpx solid #667eea;
          color: #667eea;
          font-weight: 600;
        }
      }
    }

    .btn-box {
      display: flex;
      gap: 20rpx;
      padding: 24rpx 30rpx;
      background-color: #fff;
      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
    }
  }
  
  .section-title {
    display: flex;
    margin-top: -20rpx;
    align-items: center;
    padding: 24rpx 32rpx 16rpx;
    background-color: #f5f7fa;
    
    .title-decorator {
      width: 6rpx;
      height: 32rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 3rpx;
      margin-right: 12rpx;
    }
    
    .title-text {
      font-size: 28rpx;
      font-weight: 600;
      color: #2c3e50;
      line-height: 1;
      flex: 1;
    }
    
    .view-switch {
      display: flex;
      align-items: center;
      gap: 4rpx;
      background: #ffffff;
      border-radius: 12rpx;
      padding: 4rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      
      .switch-item {
        display: flex;
        align-items: center;
        gap: 4rpx;
        padding: 6rpx 10rpx;
        border-radius: 8rpx;
        transition: all 0.3s ease;
        cursor: pointer;
        
        text {
          font-size: 22rpx;
          color: #999999;
          line-height: 1;
        }
        
        &.active {
          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
          
          text {
            color: #667eea;
            font-weight: 600;
          }
        }
        
        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
  
  .chart-container {
    margin: 16rpx 24rpx 60rpx;
    padding: 16rpx;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    width: calc(100% - 48rpx);
    height: 720rpx;
    overflow: visible;
    position: relative;
  }
  
  .list-item {
    margin: 0 24rpx 16rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 24rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      
      .header-left {
        flex: 1;
        
        .card-badge {
          display: inline-flex;
          align-items: center;
          gap: 6rpx;
          padding: 4rpx 12rpx;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 12rpx;
          
          text {
            font-size: 24rpx;
            color: #ffffff;
            font-weight: 600;
            line-height: 1;
          }
        }
      }
      
      .header-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4rpx;
        
        .amount-label {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.85);
          line-height: 1;
        }
        
        .amount-value {
          font-size: 28rpx;
          font-weight: 700;
          color: #fa8c16;
          line-height: 1;
        }
      }
    }
    
    .item-body {
      padding: 24rpx;
    }
  
    .item-row {
      padding: 12rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
  
      .row-label {
        color: #7f8c8d;
        font-size: 26rpx;
      }
  
      .row-value {
        color: #fa8c16;
        font-size: 26rpx;
        font-weight: 600;
      }
    }
  }
  </style>