<template>
  <m-card title="物业">
    <Brief :list="summary" />
    <div class="wrapper">
      <div class="left">
        <m-progress
          v-for="item in list"
          :key="item.name"
          :value="item.value"
          :msg="{
            name: item.name,
            value: item.value,
            unit: '%',
            color: '#fff',
          }"
          :color="['rgb(36,59,86)', '#F4923E']"
        />
      </div>
      <div class="right">
        <p>整改执行</p>
        <div>
          <div>
            <p class="count"><m-count :value="63" /></p>
            <p>已开</p>
          </div>
          |
          <div>
            <p class="count"><m-count :value="76" />%</p>
            <p>完成率</p>
          </div>
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts" setup>
import icon1 from '@/assets/images/icon1.png'
import icon2 from '@/assets/images/icon2.png'
import icon3 from '@/assets/images/icon3.png'
import Brief from './brief.vue'

const summary = [
  { icon: icon1, name: '小区', value: 904 },
  { icon: icon2, name: '业委会', value: 400 },
  { icon: icon3, name: '物业服务企业', value: 130 },
]
const list = [
  { name: '房办月查', value: 79 },
  { name: '物企双周查', value: 83 },
  { name: '物业日查', value: 100 },
]
</script>

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

.wrapper
  display flex
  padding-bottom .05rem
  .left
    flex 1.8
  .right
    flex 1
    background rgba(70,83,97,.4)
    border-radius .04rem
    box-shadow 0 0.01rem .01rem 0 rgba(255,255,255,.2) inset
    margin .06rem .06rem 0 .1rem
    padding .06rem .1rem
    box-sizing border-box
    >div
      display flex
      align-items center
      margin-top .1rem
      >div
        flex 1
        text-align center
        .count
          font-size .12rem
          color #EDB872
          font-family $font-din
          font-weight bold
        >p
          color #ccc
</style>
