<template>
  <div class="land-population">
    <div class="labels">
      <p v-for="label in labels" :key="label">{{label}}</p>
    </div>
    <div class="content" v-for="item in list" :key="item.label">
      <p>{{item.label}}</p>
      <div>
        <div v-for="(child, i) in item.data" :key="i">
          <m-count class="count" :value="child.value" :decimal="child.dec || 0"/>
          <span class="unit">{{child.unit}}</span>
          <img v-if="child.up" src="@/assets/images/up.png"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LandPopulation',
  data() {
    return {
      labels: ['土地面积', '总户籍人口', '人口密度', '户籍同比'],
      list: [
        {
          label: '2018年末',
          data: [
            {value: 8.69, unit: 'k㎡', dec: 2},
            {value: 29182, unit: '人'},
            {value: 3358, unit: 'k㎡'},
            {value: 1.08, unit: '%', dec: 2},
          ],
        },
        {
          label: '2019年末',
          data: [
            {value: 8.69, unit: 'k㎡', dec: 2},
            {value: 31676, unit: '人', up: true},
            {value: 3645, unit: 'k㎡', up: true},
            {value: 1.18, unit: '%', dec: 2, up: true},
          ],
        },
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.land-population
  display flex
  justify-content space-between
  .labels
    color $fontColor
    background $cardBg
    padding .05rem
    border .01rem dotted $fontColor
    margin-top 0.22rem
    display flex
    flex-direction column
    justify-content center
    >p
      line-height .2rem
  .content
    width 38%
    height 100%
    display flex
    flex-direction column
    >p
      color $fontColor
      background $cardBg
      padding .03 .05rem
      border .01rem dotted $fontColor
      text-align center
      width 50%
      margin 0 auto .05rem
    >div
      flex 1
      background-image url('../../assets/images/land-bg.png')
      background-size 100% 100%
      $flex-center()
      flex-direction column
      >div
        line-height .2rem
        border-bottom 0.01rem solid rgba(71,179,255,.5)
        .count
          color $color-yellow
          font-size .12rem
        .unit
          color #aaa
          font-size .06rem
        img
          width .06rem
</style>
