<template>
  <m-card title="物业报修">
    <div class="sum">
      <div>
        全区物业报修数
        <span><m-count class="orange-count" :value="100" /></span>
        个
      </div>
      <div>
        应急维修数
        <span class="orange-count">
          <m-count :value="2" />/<m-count :value="4" />/<m-count :value="18" />
        </span>
        个
      </div>
    </div>
    <div class="bar">
      <div
        v-for="item in list"
        :key="item.name"
        :style="{ flex: item.rate, background: item.color }"
      >
        <div :style="{ borderColor: item.color }">
          <p>
            <span :style="{ color: item.color }">
              {{ item.value }} / {{ item.rate }}% / {{ item.count }}
            </span>
            {{ item.name }}
          </p>
        </div>
      </div>
    </div>
    <div class="content">
      <div v-for="item in companyData" :key="item.name">
        <span>{{ item.name }}</span>
        <div class="progress">
          <m-progress :color="['#FF692D', '#F7973D']" :value="+item.rate" />
        </div>
        <!-- <m-count class="count" :value="item.value" /> -->
        <p>{{ item.value }} / {{ item.rate }}% / {{ item.count }}</p>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A007',
  title: '物业报修',
  row: 1,
}
</script>
<script lang="ts" setup>
const list = [
  { name: '商品房', value: 60, rate: 20, count: 0.1, color: '#72c011' },
  { name: '老旧小区', value: 135, rate: 45, count: 0.5, color: '#ff9d26' },
  { name: '保障房', value: 105, rate: 35, count: 0.3, color: '#01bffe' },
]

const total = 255
const companyData = [
  {
    name: '物业企业1',
    value: 21,
    rate: ((21 / total) * 100).toFixed(0),
    count: 0.5,
  },
  {
    name: '物业企业2',
    value: 12,
    rate: ((12 / total) * 100).toFixed(0),
    count: 0.4,
  },
  {
    name: '物业企业3',
    value: 12,
    rate: ((12 / total) * 100).toFixed(0),
    count: 0.4,
  },
  {
    name: '其他',
    value: 210,
    rate: ((210 / total) * 100).toFixed(0),
    count: 0.9,
  },
]
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'

.sum
  $box()
  display flex
  align-items center
  justify-content space-between
  padding .03rem .05rem
  span
    margin-left .1rem
.bar
  display flex
  width 100%
  height .06rem
  margin .35rem 0 .05rem
  >div
    position relative
    .count
      font-size .12rem
    p
      position absolute
      min-width 1rem
      span
        display block
    >div
      height .25rem
    &:nth-of-type(1)
      >div
        transform translateY(-90%)
        border-left .01rem solid
      p
        top -0.09rem
        left .05rem
    &:nth-of-type(2)
    &:nth-of-type(3)
      >div
        transform translateY(-90%)
        border-right .01rem solid
      p
        top -0.09rem
        right .05rem
        text-align right
.content
  >div
    display flex
    align-items center
    justify-content space-between
    .progress
      flex 1
      margin 0 .05rem
    span
      min-width .5rem
    p
      min-width .5rem
      text-align right
</style>
