<template>
  <m-card title="公共收益">
    <m-sub :addition="{ value: 6000, unit: '元' }"> 存量总额 </m-sub>
    <div class="wrapper">
      <div>
        <p>收入（季度）</p>
        <div>
          <div>
            <p class="count"><m-count :value="100" /><span>元</span></p>
            <p>总额</p>
          </div>
          |
          <div>
            <p class="count"><m-count :value="180" /><span>个</span></p>
            <p>小区</p>
          </div>
        </div>
      </div>
      <div>
        <p>支出（季度）</p>
        <div>
          <div>
            <p class="count"><m-count :value="169" /><span>元</span></p>
            <p>总额</p>
          </div>
          |
          <div>
            <p class="count"><m-count :value="156" /><span>个</span></p>
            <p>小区</p>
          </div>
        </div>
      </div>
    </div>
    <m-sub :addition="{ value: capital, unit: '万元', decimal: 2 }">
      维修资金总额
    </m-sub>
  </m-card>
</template>

<script lang="ts">
const _config = {
  name: 'A004',
  title: '公共收益',
  row: 1,
  apis: {
    capital: '/service-documents-ddd/public/maintenance/count/amt',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { ajax } from '@/ajax'
import { ref } from 'vue'

const capital = ref(0)
ajax.get({ url: _config.apis.capital }).then((res) => {
  const { tranAmt = 0 } = res?.data?.content || {}
  capital.value = tranAmt / 10000
})
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'

.wrapper
  display flex
  justify-content space-between
  margin .05rem 0
  >div
    width 48%
    $box()
    padding .06rem .1rem
    >div
      display flex
      align-items center
      margin-top .05rem
      >div
        flex 1
        text-align center
        .count
          font-size .14rem
          color $yellow
          font-family $font-din
          font-weight bold
          >span
            color #ccc
            font-size .09rem
            font-weight normal
        >p
          color #ccc
</style>
