<template>
    <view class="container">
        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
        <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>
      </u-sticky>
        <div class="app-container">
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 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, #f093fb 0%, #f5576c 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, #4facfe 0%, #00f2fe 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, #43e97b 0%, #38f9d7 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, #fa709a 0%, #fee140 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, #a8edea 0%, #fed6e3 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, #ffecd2 0%, #fcb69f 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, #fddb92 0%, #d1fdff 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, #89f7fe 0%, #66a6ff 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, #667eea 0%, #764ba2 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>
  <div style="margin:8px" v-show="listData.length>0">
    <button :type="firstType" style="margin-right:5px" size=mini @click="btFirstClick">账户余额</button>
    <button :type="secondType" type="primary"  size=mini  @click="btSecondClick">信用卡可用余额</button>
  </div>
      <u-list v-show="!tabShow"  @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
        <u-list-item v-for="(item, index) in listData" :key="index">
          <view class="list-item">
            <view class="item-header">
              <u--text  lines="2"
                :text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text>
            </view>

          </view>
        </u-list-item>
        <view>
        </view>
      </u-list>
      <u-list v-show="tabShow"  @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
        <u-list-item v-for="(item, index) in secondListData" :key="index">
          <view class="list-item">
            <view class="item-header">
              <u--text  lines="2"
                :text="item.account+'：'+item.availableLimit+' 元'" size="30rpx" color="#333333" ></u--text>
            </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>
        <u-picker itemHeight="88" :show="showAccount" :columns="accountTypeList" keyName="dictLabel" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
    <!-- 悬停按钮返回工作台-->
      <suspend></suspend>
      <refresh></refresh>
  </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 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 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=[]
          listData.value = listData.value.concat(res.data.accountsBalancesList)
          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>

.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;
      }

  .search-view {
    padding: 12rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .search-input {
      background: #F5F5F5;
      color: #333333;
      margin-right: 36rpx;
    }

    .filter-panel {
      width: 100%;
      position: absolute;
      left: 0;
      top: 96rpx;
      background-color: rgba(0, 0, 0, 0.5);

      .filter-panel-content {
        background-color: #ffff;
        padding: 0 30rpx 30rpx;

        .filter-title {
          color: #000000;
          font-size: 30rpx;
          font-weight: 500;
          padding: 30rpx 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;
        padding: 24rpx 30rpx;
        background-color: #fff;
        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
      }
    }
  }

  .list-item {
    margin: 0 24rpx 24rpx;
    padding: 32rpx;
    background-color: #fff;

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16rpx;

      .status {
        .status-item {
          width: 120rpx;
          height: 44rpx;
          text-align: center;
          line-height: 44rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
        }

        .status1 {
          background: #F0F0F0;
          color: #8C8C8C;
        }

        .status2 {
          background: rgba(38, 129, 255, 0.2);
          color: #2681FF;
        }

        .status3 {
          background: #F7F7F7;
          color: #2681FF;
        }

        .status4 {
          background: rgba(255, 85, 51, 0.2);
          color: #FF5533;
        }

        .status5 {
          background: #F7F7F7;
          color: rgba(0, 0, 0, 0.85);
        }

        .status7 {
          background: rgba(255, 129, 51, 0.2);
          color: #FF8133;
        }

        .status8 {
          background: rgba(65, 217, 165, 0.2);
          color: #41D9A5;
        }
      }
    }

    .item-row {
      padding: 16rpx 0;

      .row-label {
        color: rgba(0, 0, 0, 0.55);
      }

      .row-value {
        color: rgba(0, 0, 0, 0.85)
      }
    }

    .operate {
      display: flex;
      justify-content: flex-end;

      .btn {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        margin-left: 5rpx;
        text-align: center;
      }

      .circulation {
        background: rgba(0, 0, 0, 0.04);
        margin-right: 24rpx;
        color: rgba(0, 0, 0, 0.85);
      }

      .filling {
        background: #2681FF;
        border-radius: 8rpx;
        color: #FFFFFF;
      }
    }
  }
  </style>
