<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, index) in list" :key="item.label + index">
      <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: ['土地面积', '总户籍人口', '人口密度', '户籍同比'],
    }
  },
  computed: {
    list() {
      const {year1 = {}, year2 = {}, year3 = {}} = this.$store.state.landPopulationInfo
      const {density1 = 0} = year1
      const {year: label2 = '', area: area2 = 0, registered_population: population2 = 0, population_density: density2 = 0} = year2
      const {year: label3 = '', area: area3 = 0, registered_population: population3 = 0, population_density: density3 = 0} = year3
      const rate2 = (+density2 - +density1) / +density1
      const rate3 = (+density3 - +density2) / +density2
      return [
        {
          label: label2 + '年末',
          data: [
            {value: +area2 || 0, unit: 'k㎡', dec: 2},
            {value: +population2 || 0, unit: '人'},
            {value: +density2 || 0, unit: '人/k㎡'},
            {value: rate2, unit: '%', dec: 2},
          ]
        },
        {
          label: label3 + '年末',
          data: [
            {value: +area3 || 0, unit: 'k㎡', dec: 2, up: area3 > area2},
            {value: +population3 || 0, unit: '人', up: population3 > population2},
            {value: +density3 || 0, unit: '人/k㎡', up: density3 > density2},
            {value: rate3, unit: '%', dec: 2, up: rate3 > rate2},
          ]
        },
      ]
    },
  }
}
</script>

<style lang="stylus" scoped>
.land-population
  display flex
  justify-content space-between
  .labels
    color $fontColor
    background $cardBg
    padding .03rem
    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>
