<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" style="overflow: auto">
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="@/static/images/one.png" alt="" />
        <div class="info-sum">
          <div class="title">储蓄卡可用余额</div>
          <div class="num">{{ accountsBalance.debetBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="@/static/images/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">信用卡可用额度</div>
          <div class="num">{{ accountsBalance.creditAvailableLimit }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="@/static/images/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">信用卡余额</div>
          <div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="@/static/images/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">投资账户余额</div>
          <div class="num">{{ accountsBalance.investBalance }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="@/static/images/one.png" alt="" />
        <div class="info-sum">
          <div class="title">借贷账户余额</div>
          <div class="num">{{ accountsBalance.debitBalance }}<span>元</span></div>
        </div>
      </div>
    </div>

    <div></div>
  </div>
      <u-list @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="1" 
                :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>
  </template>
  
  <script setup>
  import { getAccountsAnalysis } from '@/api/invest/statisticAnalysis'
  import { getDicts } from '@/api/system/dict/data.js'
  import {onLoad,onShow} from "@dcloudio/uni-app";
      // 计算属性与监听属性是在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 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) {
        getList()
        isShow.value = false
      }
    });

  function getList() {
        getAccountsAnalysis({...queryParams.value }).then(res => {
            accountsBalance.value = { ...res.data }
          listData.value = listData.value.concat(res.data.accountsBalancesList)
        }).catch(() => {
        })
      }
  function   getDict() {
        // 记账类型类型
        getDicts('account_type').then(res => {
          accountTypeList.value =[res.data]  
        })
        
      }
  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 {
  .header-con {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 50%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      margin: 5px 10px 5px 10px;
      .title {
        margin-left: 5px;
        color: rgb(133, 133, 148);
        margin-bottom: 5px;
        font-size: 14px;
      }
      .num {
        margin-left: 5px;
        font-weight: bold;
        font-size: 14px;
      }
    }
    img {
      height: 30px;
      width: 30px;
    }
  }
  .header-title {
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
  }
}
  .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>