<template>
  <div class="left-component">
    <div class="left">
      <m-card title="实有人口" :value="12772" unit="人">
        <Population />
      </m-card>
      <m-card title="实有房屋" :value="18980" unit="幢">
        <House />
      </m-card>
      <m-card title="实有单位" :value="11633" unit="家">
        <Company />
      </m-card>
    </div>
    <div class="right">
      <m-card title="便民设施">
        <div class="info">
          <div v-for="item in convenient" :key="item.name">
            <p>{{item.name}}</p>
            <m-count class="count" :value="item.value" /> <span class="unit">人</span>
          </div>
        </div>
      </m-card>
      <m-card title="历史保护建筑">
        <div class="info three">
          <div v-for="item in building" :key="item.name">
            <p>{{item.name}}</p>
            <m-count class="count" :value="item.value" /> <span class="unit">人</span>
          </div>
        </div>
      </m-card>
      <m-card title="地标性建筑">
        <Building />
      </m-card>
      <m-card title="微型消防站">
        <MicFire />
      </m-card>
    </div>
  </div>
</template>

<script>
import Population from '../components/population'
import House from '../components/house'
import Company from '../components/company'
import Building from '../components/building'
import MicFire from '../components/mic-fire'
export default {
  name: 'LeftComponent',
  components: {
    Population,
    House,
    Company,
    Building,
    MicFire,
  },
  data() {
    return {
      convenient: [
        {name: '便利店', value: 6},
        {name: '早餐车', value: 0},
        {name: '公厕', value: 2},
        {name: '居民活动室', value: 12},
      ],
      building: [
        {name: '文保', value: 0},
        {name: '历保', value: 8},
        {name: '文历双保', value: 0},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.left-component
  display flex
  z-index 99
  width 100%
  height calc(100vh - 0.5rem)
  position relative
  >div
    width calc(33.3vw / 2)
    height 100%
    &.left
      >div
        height 40%
        &:nth-child(3)
          height 20%
    &.right
      >div
        &:nth-child(1)
        &:nth-child(2)
          height 16%
        &:nth-child(3)
        &:nth-child(4)
          height 34%
  .info
    height .4rem
    background-image url(../../assets/images/four.png)
    background-size 100% 100%
    display flex
    align-items center
    margin-bottom .1rem
    &.three
      background-image url(../../assets/images/three.png)
      >div
        &:nth-of-type(2)
          margin-left -0.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
</style>
