<template>
    <view class="container">
        <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
        <view class="search-view">
          <u-input v-model="queryParams.dataTypeName" border="false" type="select"  @click="handleAccountType" placeholder="请选择账户类型" suffixIcon="search"
          suffixIconStyle="color: #909399" class="search-input">
          </u-input>
        </view>
        <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="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">储蓄账户余额</div>
          <div class="num">{{ accountsBalance.debitAllBalance }}<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="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">储蓄卡余额</div>
          <div class="num">{{ accountsBalance.debitBalance }}<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="wallet-filled" size="20" color="#ffffff"></uni-icons>
              </view>
              <div class="info-sum">
                <div class="title">I类储蓄卡余额</div>
                <div class="num">{{ accountsBalance.idebitBalance }}<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="20" color="#ffffff"></uni-icons>
              </view>
              <div class="info-sum">
                <div class="title">II类储蓄卡余额</div>
                <div class="num">{{ accountsBalance.iidebitBalance }}<span>元</span></div>
              </div>
            </div>
          </div>
          <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
            <div class="item">
              <view class="item-icon" style="background: linear-gradient(135deg, #db2777 0%, #ea580c 100%);">
                <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
              </view>
              <div class="info-sum">
                <div class="title">信用卡可用额度</div>
                <div class="num">{{ accountsBalance.creditAvailableLimit }}<span>元</span></div>
              </div>
            </div>
            <div class="item">
              <view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #ec4899 100%);">
                <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
              </view>
              <div class="info-sum">
                <div class="title">信用卡已用额度</div>
                <div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
              </div>
            </div>
          </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">借贷账户余额</div>
          <div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
        <view class="item-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
          <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">投资账户余额</div>
          <div class="num">{{ accountsBalance.investBalance }}<span>元</span></div>
        </div>
      </div>
    </div>
          <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
            <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
              <view class="item-icon" style="background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);">
                <uni-icons type="navigate" size="20" color="#ffffff"></uni-icons>
              </view>
              <div class="info-sum">
                <div class="title">期货账户余额</div>
                <div class="num">{{ accountsBalance.futuresBalance }}<span>元</span></div>
              </div>
            </div>
            <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
              <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
                <uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
              </view>
              <div class="info-sum">
                <div class="title">股票账户余额</div>
                <div class="num">{{ accountsBalance.stocksBalance }}<span>元</span></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="title-actions">
      <view class="view-switch">
        <view 
          :class="['switch-item', { 'active': viewMode === 'list' }]" 
          @click="viewMode = 'list'"
        >
          <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
          <text>储蓄账户</text>
        </view>
         <view 
          :class="['switch-item', { 'active': viewMode === 'credit' }]" 
          @click="viewMode = 'credit'"
          v-if="secondListData.length>0"
        >
          <uni-icons type="star-filled" size="16" :color="viewMode === 'credit' ? '#667eea' : '#999'"></uni-icons>
          <text>信用卡</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>
  </view>
      </u-sticky>
  
  <!-- 图表布局 -->
  <view class="balance-display-container" v-if="listData.length>0 && (viewMode === 'line' || viewMode === 'column')">
    <!-- 图表区域 -->
    <view class="chart-wrapper">
      <!-- 曲线图展示 -->
      <view class="chart-container" v-if="viewMode === 'line'">
        <qiun-data-charts 
          type="line"
          canvasId="accountBalanceLineChart"
          :chartData="chartData"
          :opts="lineChartOpts"
          :loadingType="1"
        />
      </view>
      
      <!-- 柱状图展示 -->
      <view class="chart-container" v-if="viewMode === 'column'">
        <qiun-data-charts 
          type="column"
          canvasId="accountBalanceColumnChart"
          :chartData="chartData"
          :opts="columnChartOpts"
          :loadingType="1"
        />
      </view>
    </view>
  </view>
  
  <!-- 储蓄账户列表展示 -->
  <u-list v-show="viewMode === 'list'"  @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="account-badge">
              <uni-icons type="home-filled" size="16" color="#ffffff"></uni-icons>
              <text>{{ item.account }}</text>
            </view>
          </view>
          <view class="header-right">
            <text class="amount-label">余额：</text>
            <text class="amount-value">{{ item.availableLimit }}元</text>
          </view>
        </view>
      </view>
    </u-list-item>
  </u-list>
  
  <!-- 信用卡余额列表展示 -->
  <u-list v-show="viewMode === 'credit'" :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="account-badge">
              <uni-icons type="home-filled" size="16" color="#ffffff"></uni-icons>
              <text>{{ item.account }}</text>
            </view>
          </view>
          <view class="header-right">
            <text class="amount-label">可用额度：</text>
            <text class="amount-value">{{ item.availableLimit }}元</text>
          </view>
        </view>
      </view>
    </u-list-item>
  </u-list>
      <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
        @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
        <u-picker itemHeight="88" :show="showAccount" :columns="accountTypeList" keyName="dictLabel" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
    <!-- 悬停按钮返回统计分析-->
      <statisticBtn></statisticBtn>
  </template>

  <script setup>
  import { getAccountsAnalysis } 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 pageNum = ref(1)
  const listData = ref([])

  const isShow = ref(false)
  const accountTypeList = ref([])
  const settingPickShow = ref(false)
  const settingColumns = ref([])
  const showAccount = ref(false)

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

  const accountsBalance = ref({
  debetBalance: '',
  creditAvailableLimit: '',
  creditBalance: '',
  investBalance: '',
  debitBalance: '',
  accountsBalancesList: []
})
  const data = reactive({
    filterPanel: false,
    queryParams: {
    type: 1,
    time: null,
    dataType: null,
    id: null
     }
  })
  const { filterPanel, queryParams} = toRefs(data)
  
  // 曲线图配置
  const lineChartOpts = computed(() => {
    const dataCount = listData.value ? listData.value.length : 0
    const showXAxisLabel = dataCount <= 10
    
    return {
      color: ['#667eea'],
      padding: [15, 15, 10, 5],
      enableScroll: false,
      enableMarkLine: true,
      dataLabel: false,
      dataPointShape: true,
      legend: {
        show: false
      },
      xAxis: {
        disabled: !showXAxisLabel
      },
      yAxis: {
        gridType: 'dash',
        dashLength: 4,
        gridColor: '#EEEEEE',
        splitNumber: 5,
        fontSize: 10,
        fontColor: '#999999',
        format: (val) => {
          if (val >= 10000) {
            return (val / 10000).toFixed(1) + 'w'
          }
          return val.toFixed(0)
        },
        data: [
          {
            min: 0
          }
        ]
      },
      extra: {
        line: {
          type: 'curve',
          width: 3,
          activeType: 'hollow',
          linearType: 'custom',
          linearOpacity: 0.2,
          onShadow: true,
          animation: true
        }
      }
    }
  })
  
  // 柱状图配置
  const columnChartOpts = computed(() => {
    // 计算数据范围以动态设置Y轴
    let minValue = 0
    let maxValue = 0
    if (listData.value && listData.value.length > 0) {
      const values = listData.value.map(item => parseFloat(item.availableLimit) || 0)
      minValue = Math.min(0, ...values)
      maxValue = Math.max(0, ...values)
      // 给最小值和最大值留出20%的空间
      const range = maxValue - minValue
      minValue = minValue - range * 0.2
      maxValue = maxValue + range * 0.2
    }
    
    const dataCount = listData.value ? listData.value.length : 0
    const showXAxisLabel = dataCount <= 10
    
    return {
      color: ['#667eea'],
      padding: [15, 15, 10, 5],
      enableScroll: false,
      dataLabel: false,
      legend: {
        show: false
      },
      xAxis: {
        disabled: !showXAxisLabel
      },
      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'
          }
          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 (!listData.value || listData.value.length === 0) {
      return {
        categories: [],
        series: []
      }
    }
    return {
      categories: listData.value.map(item => item.account || ''),
      series: [
        {
          name: '余额',
          data: listData.value.map(item => {
            const value = parseFloat(item.availableLimit)
            return isNaN(value) ? 0 : value
          }),
          color: (value) => {
            // 负数使用红色，正数使用蓝紫色
            return value < 0 ? '#ef4444' : '#667eea'
          }
        }
      ]
    }
  })
  
  const windowHeight = computed(() => {
              uni.getSystemInfoSync().windowHeight - 50
          })
  onLoad(() => {
      getDict()
      getList()
    });

   onShow(() => {
      if (isShow.value) {
      listData.value=[]
        getList()
        isShow.value = false
      }
    });

  function getList() {
        getAccountsAnalysis({...queryParams.value }).then(res => {
            accountsBalance.value = { ...res.data }
            secondListData.value=[]
            listData.value=[]
          // 只保留账户名称中包含"储蓄账户"的数据，并移除"储蓄账户-"前缀
          const filteredData = res.data.accountsBalancesList ? 
            res.data.accountsBalancesList.filter(item => 
              item.account && item.account.includes('储蓄账户')
            ).map(item => ({
              ...item,
              account: item.account.replace('储蓄账户-', '')
            })) : []
          listData.value = listData.value.concat(filteredData)
          secondListData.value = secondListData.value.concat(res.data.creditBalancesList)
        }).catch(() => {
        })
      }
      function   getDict() {
        // 记账类型类型
        getDicts('account_type').then(res => {
          accountTypeList.value =[res.data]
        })

      }

  function   btFirstClick() {
    tabShow.value=false
    firstType.value="primary"
    secondType.value="default"

      }
      function  btSecondClick() {
        secondType.value="primary"
         firstType.value="default"
        tabShow.value=true

    }
  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
      }
      function handleAccountType() {
          if (accountTypeList.value[0].length === 0) {
            proxy.$refs['uToast'].show({
              message: '账户类型为空  ', type: 'warning'
            })
          } else {
            showAccount.value = true
          }
       }
    function   handleAccountConfirm(e) {
      queryParams.value.dataTypeName = e.value[0].dictLabel
      queryParams.value.dataType= e.value[0].dictValue
          showAccount.value = false
          pageNum.value = 1
        listData.value = []
        getList()
    }
   function handleAccountCancel() {
    queryParams.value.dataTypeName = ''
      queryParams.value.dataType=''
         showAccount.value = false
         listData.value = []
        getList()
        filterPanel.value = false
    }

  </script>

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

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

  .section-title {
    display: flex;
    margin-top: -10rpx;
    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;
    }
    
    .title-actions {
      display: flex;
      align-items: center;
      gap: 12rpx;
    }
    
    .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 12rpx;
        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);
        }
      }
    }
  }
  
  .balance-display-container {
    padding: 16rpx 24rpx 0;
  }
  
  .chart-wrapper {
    width: 100%;
  }
  
  .chart-container {
    padding: 16rpx;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    height: 550rpx;
    overflow: visible;
    position: relative;
  }
  
  .search-view {
    padding: 12rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .search-input {
      background: rgba(102, 126, 234, 0.08);
      color: #333333;
      flex: 1;
      margin-right: 16rpx;
      border-radius: 24rpx;
      border: 2rpx solid rgba(102, 126, 234, 0.3);
      height: 66rpx !important;
      display: flex;
      align-items: center;
    }

  .filter-panel {
    width: 100%;
    position: absolute;
    left: 0;
    top: 90rpx;
    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;

          .state-item {
            width: 210rpx;
            height: 72rpx;
            border: 1rpx solid rgba(0, 0, 0, 0.25);
            border-radius: 72rpx;
            text-align: center;
            line-height: 72rpx;
            margin: 0 20rpx 20rpx 0;
            font-size: 28rpx;
            color: #000000;
          }

          .active {
            background-color: rgba(222, 241, 255, 1);
            border: 1rpx solid rgba(22, 119, 255, 1);
          }
        }
      }

      .btn-box {
        display: flex;
        gap: 20rpx;
        padding: 24rpx 30rpx;
        background-color: #fff;
        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
      }
    }
  }

  .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: 20rpx 24rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      
      .header-left {
        flex: 1;
        
        .account-badge {
          display: inline-flex;
          align-items: center;
          gap: 8rpx;
          padding: 8rpx 16rpx;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 12rpx;
          
          text {
            font-size: 28rpx;
            color: #ffffff;
            font-weight: 600;
            line-height: 1;
          }
        }
      }
      
      .header-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8rpx;
        
        .amount-label {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.85);
          line-height: 1;
        }
        
        .amount-value {
          font-size: 30rpx;
          font-weight: 700;
          color: #ffffff;
          line-height: 1;
        }
      }

    }
  }
  </style>
