<template>
  <div class="population">
    <div class="info">
      <div v-for="item in population" :key="item.name">
        <p>{{item.name}}</p>
        <m-count class="count" :value="item.value" /> <span class="unit">人</span>
      </div>
    </div>
    <m-sub title="居委人口分布" />
    <div class="chart" v-if="showChart">
      <m-chart :config="config" :data="data" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Population',
  data() {
    return {
      showChart: false,
      population: [
        {name: '实有人口', value: 12772},
        {name: '本市户籍', value: 7126},
        {name: '境内外省', value: 5473},
        {name: '境外人口', value: 173},
      ],
      config: {
        colors: [['#07b1ff', '#1dfaff'], ['#5032b6', '#c56cd6']],
        legend: {
          align: 'right'
        },
        shape: [
          {key: 'actual', name: '实有', type: 'bar', barWidth: '20%'},
          {key: 'huji', name: '户籍', type: 'bar', barWidth: '20%'},
        ],
        xAxis: {
          key: 'name'
        }
      },
      data: [
        {name: '均乐', actual: 2971, huji: 6575},
        {name: '振兴', actual: 3807, huji: 4508},
        {name: '顺天村', actual: 3187, huji: 6575},
        {name: '江阴', actual: 1668, huji: 2443},
        {name: '新昌', actual: 1139, huji: 3585},
      ]
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  },
}
</script>

<style lang="stylus" scoped>
.population
  width 100%
  height 100%
  .info
    height .4rem
    background-image url(../../assets/images/info-wrapper.png)
    background-size 100% 100%
    display flex
    align-items center
    margin-bottom .1rem
    >div
      flex 1
      text-align center
      padding-left .05rem
      &:nth-of-type(1)
        .count
          color $color-yellow
      &:nth-of-type(2)
        margin-left .1rem
      p
        color $fontColor
      .unit
        $unit()
      .count
        font-size .12rem
  .chart
    width 100%
    height 1.1rem
</style>
