<template>
  <m-card :title="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']"
          @click="test(item)"
        />
      </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">
const _config = {
  name: 'A001',
  title: '物业',
  row: 1,
  baseUrl: window._base_url,
  apis: [
    { key: 'summary', value: '/api1' },
    { key: 'list', value: '/api2' },
  ],
}
export default _config
</script>
<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 '@/components/brief.vue'
import bus from '@/util/event-bus'
import { PropType } from '@vue/runtime-core'

const props = defineProps({
  title: {
    type: String as PropType<string>,
    default: _config.title,
  },
})

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 },
]

/**
 * 'addPoints'
 * 'removePoints'
 * 'focus'
 *
 */
const test = () => {
  bus.emit('map', 'A001')
}
bus.on('config-A001', (config) => {})
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.wrapper
  display flex
  padding-bottom .05rem
  .left
    flex 1.8
  .right
    flex 1
    $box()
    margin .06rem .06rem 0 .1rem
    padding .06rem .1rem
    >div
      display flex
      align-items center
      margin-top .1rem
      >div
        flex 1
        text-align center
        .count
          font-size .12rem
          color $yellow
          font-family $font-din
          font-weight bold
        >p
          color #ccc
</style>
