<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">
          <span v-if="child.value === null" class="count"> - </span>
          <m-count v-else 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"/>
          <img v-else-if="child.down" src="@/assets/images/down.png"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LandPopulation',
  data() {
    return {
      labels: ['土地面积', '总户籍人口', '人口密度', '户籍同比'],
    }
  },
  computed: {
    list() {
      const [year1 = {}, year2 = {}] = this.$store.state.landPopulationInfo
      const {year: label1 = '', area: area1 = 0, registered_population: population1 = 0, population_density: density1 = 0} = year1
      const {year: label2 = '', area: area2 = 0, registered_population: population2 = 0, population_density: density2 = 0} = year2
      const rate = (+density2 - +density1) / +density1
      return [
        {
          label: label1 + '年末',
          data: [
            {value: +area1 || 0, unit: 'k㎡', dec: 2},
            {value: +population1 || 0, unit: '人'},
            {value: +density1 || 0, unit: '人/k㎡'},
            {value: null, unit: '', },
          ]
        },
        {
          label: label2 + '年末',
          data: [
            {value: +area2 || 0, unit: 'k㎡', dec: 2, up: area2 > area1, down: area2 < area1},
            {value: +population2 || 0, unit: '人', up: population2 > population1, down: population2 < population1},
            {value: +density2 || 0, unit: '人/k㎡', up: density2 > density1, down: density2 < density1},
            {value: rate, unit: '%', dec: 2, down: true, },
          ]
        },
      ]
    },
  }
}
</script>

<style lang="stylus" scoped>
.land-population
  display flex
  justify-content space-between
  .labels
    color $fontColor
    background $cardBg
    padding .03rem .05rem
    border .01rem dotted $fontColor
    margin-top 0.22rem
    display flex
    flex-direction column
    justify-content center
    >p
      line-height .2rem
      margin-bottom .01rem
  .content
    width 36%
    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>
