<template>
    <view class="container" style="paddingBottom:1rpx;">
      <u-navbar
			leftIconSize="40rpx"
			leftIconColor="#333333"
			title="记账账户详情"
		>
		</u-navbar>
      <view class="section">
        <u-cell-group>
        <u-cell title="名称:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
        <u-cell title="账户类型:" titleStyle="font-weight:bolder" :value="detailInfo.type"></u-cell>
        <u-cell title="账号：" titleStyle="font-weight:bolder" center :value="detailInfo.code"> </u-cell>
        <u-cell title="可用额度:" titleStyle="font-weight:bolder" center :value="detailInfo.availableLimit"> </u-cell>
        <u-cell title="余额：" titleStyle="font-weight:bolder" center :value="detailInfo.balance"> </u-cell>
        <u-cell title="信用卡额度:" v-if="detailInfo.type=='信用卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.creditLimit"> </u-cell>
        <u-cell title="账单日:" v-if="detailInfo.type=='信用卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.billDateName"> </u-cell>
        <u-cell title="还款日:" v-if="detailInfo.type=='信用卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.payDateName"> </u-cell>
        <u-cell title="储蓄卡类型:" v-if="detailInfo.type=='储蓄卡账户'" titleStyle="font-weight:bolder" center :value="detailInfo.debitType"> </u-cell>
        <u-cell title="账户状态:" titleStyle="font-weight:bolder" center :value="detailInfo.state"> </u-cell>
        <u-cell title="备注:" titleStyle="font-weight:bolder" center :value="detailInfo.remark"> </u-cell>
      </u-cell-group>
      </view>
      <u-toast ref="uToast"></u-toast>
    </view>
  </template>
  
<script setup>
import { listAccounts, getAccounts, delAccounts, addAccounts, updateAccounts } from '@/api/invest/accounts'

import {onLoad} from "@dcloudio/uni-app";
import { getDicts } from '@/api/system/dict/data.js'
import {reactive ,toRefs,ref,computed }from "vue";
const id = ref('')
const data = reactive({
  detailInfo: {} 
})
const {detailInfo} = toRefs(data)
onLoad((option) => {
    id.value = option.id
    getInfo()
  })
  function getInfo() {
    getAccounts(id.value).then(res => {
          detailInfo.value = res.data
            // 类型
            getDicts('account_type').then(result => {
         detailInfo.value.type=dictStr(detailInfo.value.type, result.data)
      })
        // 类型
        getDicts('account_state').then(result => {
         detailInfo.value.state=dictStr(detailInfo.value.state, result.data)
      })
        // 类型
        getDicts('debit_type').then(result => {
         detailInfo.value.debitType=dictStr(detailInfo.value.debitType, result.data)
      })
        })
  }
  function dictStr(val, arr) {
      let str = ''
      arr.map(item => {
        if (item.dictValue === val) {
          str = item.dictLabel
        }
      })
      return str
    }
  </script>
  
  <style lang="scss" scoped>
  .section {
    margin: 24rpx;
    padding: 16rpx 24rpx;
    background-color: #fff;
    border-radius: 8rpx;
  
    .section-title {
      width: 280rpx;
      color: #333333;
      line-height: 44rpx;
      font-size: 30rpx;
      border-left: 6rpx solid #2681FF;
      padding-left: 26rpx;
    }
  
    .content {
      width: 647rpx;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
    }
  
    .img-con {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx
    }
    .form-view {
      padding: 20rpx 0rpx 0 10rpx;
  
      .form-btn {
        padding-top: 20rpx;
      }
    }
  }
  </style>