<template>
  <div class="d-flex flex-wrap height">
    <div v-for="item in items" :key="item.title" class="item pa-2">
      <div class="d-flex align-center">
        <span class="item-title mr-3">{{ item.title }}</span>
        <span class="item-data">{{ item.data }}</span>
      </div>
      <div class="d-flex item-item">
        <div v-for="val in item.item" :key="val.title" class="b">
          <div class="t">{{ val.title }}</div>
          <div class="v d-flex align-center">
            <span v-if="val.hasOwnProperty('rise')">{{ val.rise ? '+' : '-' }}</span>
            {{ val.data }}
            <template v-if="val.hasOwnProperty('rise')">
              <v-icon :color="val.rise ? 'error' : 'success'">{{ val.rise ? 'mdi-transfer-up' : 'mdi-transfer-down' }}</v-icon>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'data-package',
  data () {
    return {
      items: [
        {
          title: '存款余额（亿）元',
          data: 309.8,
          item: [
            {
              title: '比年初',
              data: '0.8',
              rise: true
            },
            {
              title: '户均（元）',
              data: '325,890'
            }
          ]
        },
        {
          title: '贷款余额（亿）元',
          data: 201.5,
          item: [
            {
              title: '比年初',
              data: '0.7',
              rise: false
            },
            {
              title: '户均（元）',
              data: '1,325,890'
            }
          ]
        },
        {
          title: '客户数（万）户',
          data: 293.7,
          item: [
            {
              title: '对公',
              data: '3.1'
            },
            {
              title: '个人',
              data: '290.4'
            }
          ]
        },
        {
          title: '不良率（百分比）',
          data: '4.7%',
          item: [
            {
              title: '比年初',
              data: 0.8,
              rise: true
            },
            {
              title: '不良余额',
              data: '12,325,890'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.height {
  height: 100%;
}
.item {
  width: 50%;
  height: 50%;
  &-title {
    font-size: 16px;
    font-weight: bolder;
    color: #0D47A1;
  }
  &-data {
    font-size: 24px;
    font-weight: bolder;
    color: #ff8c00;
  }
  &-item {
    .b {
      width: 50%;
    }
    .t {
      font-size: 12px;
      font-weight: bolder;
      color: #0D47A1;
    }
    .v {
      color: #ff8c00;

    }
  }
}
</style>
