<template>
  <div class="defense">
    <p>民防建筑总数 <m-count style="color:#6ae7b5" :value="data.num" :decimal="0"/>/<m-count :value="data.totalNum" :decimal="0"/></p>
    <div class="bar">
      <div class="inner green" :style="`background:#6ae7b5;width:${data.num / data.totalNum * 100}%;`"></div>
    </div>
    <p>使用面积 <m-count style="color:#ff9502" :value="data.area" /> <span class="unit">㎡</span></p>
    <p>建筑面积 <m-count :value="data.totalArea" /> <span class="unit">㎡</span></p>
    <div class="bar">
      <div class="inner red" :style="`background:#ff9502;width:${data.area / data.totalArea * 100}%;`"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Defense',
  computed: {
    data() {
      const {currentStreetInfo, streetInfo} = this.$store.state
      return streetInfo[currentStreetInfo.id]
    },
  }
}
</script>

<style lang="stylus" scoped>
.defense
  display flex
  flex-direction column
  justify-content space-around
  .bar
    width 90%
    height .06rem
    border-radius .02rem
    background #19487F
    >.inner
      height 99%
      border-radius inherit
      position relative
      &:after
        content ''
        width .04rem
        height 100%
        position absolute
        right -0.015rem
        transform skew(-30deg)
      &.green
        &:after
          background #CCFF78
          box-shadow 0 0 .03rem .01rem #9FFF00
      &.red
        &:after
          background #E02020
          box-shadow 0 0 .03rem .01rem #E63D3D
  .unit
    color #aaa
    font-size .08rem
</style>
