<template>
  <div class="property-repair">
    <div class="sum">
      <div>
        <p>全区物业保修数</p>
        <p><m-count class="count" :value="+repairInfo.allRows || 0" /><span class="unit">个</span></p>
      </div>
      <div>
        <p>应急维修数</p>
        <p class="count">
          <m-count class="count red" :value="+repairInfo.emMaintenanceNotRows || 0" /> /
          <m-count class="count" :value="+repairInfo.emMaintenanceHandlerRows || 0" /> /
          <m-count class="count" :value="+repairInfo.emMaintenanceAllRows || 0" />
          <span class="unit">个</span>
          <span class="unit sub">逾期 / 执行中 / 总数</span>
        </p>
      </div>
    </div>
    <div class="rate">
      <RateComponent :list="listData" :info="repairInfo.mCommunity"/>
    </div>
  </div>
</template>

<script>
import RateComponent from './rate-component'
export default {
  name: 'PropertyRepair',
  components: {
    RateComponent,
  },
  computed: {
    repairInfo() {
      return this.$store.state.repairInfo
    },
    listData() {
      const {mCompany = {}} = this.repairInfo
      const keys = Object.keys(mCompany)
      return keys.map(key => mCompany[key])
    },
  },
}
</script>

<style lang="stylus" scoped>
.property-repair
  display flex
  flex-direction column
  .sum
    display flex
    align-items center
    justify-content space-between
    .count
      font-size .12rem
      color $color-yellow
      &.red
        color $color-red
    .unit
      font-size .08rem
      color #aaa
    >div
      display flex
      align-items center
      p
        position relative
        &:first-child
          margin-right .1rem
        .sub
          display block
          text-align right
          width 200%
          position absolute
          right 0
          bottom -70%
  .rate
    flex 1
</style>
