<template>
  <div class="house">
    <m-sub title="居住房屋" :value="11883" unit="幢" />
    <div class="info">
      <div v-for="item in house" :key="item.name">
        <p>{{item.name}}</p>
        <m-count class="count" :value="item.value" /> <span class="unit">人</span>
      </div>
    </div>
    <m-sub title="非居房屋" :value="7097" unit="幢" />
    <div class="chart" v-if="showChart">
      <m-chart :config="config" :data="data" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'House',
  data() {
    return {
      showChart: false,
      house: [
        {name: '商品房', value: 10647},
        {name: '直管公房', value: 618},
        {name: '二类旧里', value: 218},
        {name: '其他', value: 400},
      ],
      config: {
        colors: [['#F76B1C', '#FAD961']],
        legend: {
          align: 'right'
        },
        shape: [
          {key: 'value', name: '非居房屋', type: 'bar', barWidth: '20%'},
        ],
        xAxis: {
          key: 'name'
        }
      },
      data: [
        {name: '衣', value: 1250},
        {name: '食', value: 2700},
        {name: '住', value: 2800},
        {name: '行', value: 347},
      ]
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  },
}
</script>

<style lang="stylus" scoped>
.house
  .info
    height .4rem
    background-image url(../../assets/images/four.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(2)
        margin-left .1rem
      p
        color $fontColor
      .unit
        $unit()
      .count
        font-size .12rem
  .chart
    width 100%
    height 1.6rem
</style>
