<template>
  <m-card title="物业监管">
    <div class="wrapper">
      <div class="left">
        <m-progress
          v-for="item in summary"
          :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-sub :addition="{ value: 1684, unit: '万元' }"> 维修资金 </m-sub>
    <!-- <Summary title="续筹分布" :list="list" :avatar="avatar1" /> -->
    <div class="warn">
      <div>
        <p>{{ list[0].name }}</p>
        <m-count class="orange-count" :value="list[0].value" />
        <span>户</span>
      </div>
      <div v-for="item in list.slice(1)" :key="item.name">
        <m-count :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="chart">
      <m-bar
        v-if="barData.source.length > 0"
        :dataset="barData"
        :option="barOption"
      />
      <m-empty v-else />
    </div>
    <m-sub>物业党建</m-sub>
    <div class="party">
      <div v-for="item in partys" :key="item.name">
        <m-count class="orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A016',
  title: '物业监管',
  row: 2,
}
</script>
<script lang="ts" setup>
import avatar1 from '@/assets/images/avatar1.png'
import Summary from '@/components/summary.vue'
import { ref } from 'vue'

const summary = [
  { name: '房办月查', value: 79 },
  { name: '物企双周查', value: 83 },
  { name: '物业日查', value: 100 },
]
const list = ref([
  { name: '续筹预警', value: 47520 },
  { name: '涉及门牌', value: 3960 },
  { name: '涉及小区', value: 45 },
])

const partys = [
  { name: '业委会党小组', value: 29 },
  { name: '居委交叉任职', value: 51 },
  { name: '物业公司党小组', value: 167 },
]

const barData = {
  dimensions: [
    { name: 'street', displayName: '街道' },
    { name: 'value', displayName: '数量' },
  ],
  source: [
    { street: '街道1', value: 20 },
    { street: '街道2', value: 20 },
    { street: '街道3', value: 30 },
    { street: '街道4', value: 40 },
    { street: '街道5', value: 50 },
    { street: '街道6', value: 50 },
    { street: '街道7', value: 50 },
    { street: '街道8', value: 20 },
  ],
}
const barOption = {
  legend: false,
  yAxis: {
    minInterval: 1,
  },
  grid: {
    bottom: 0,
  },
  xAxis: [
    {
      type: 'category',
      show: false,
    },
  ],
  series: [
    {
      type: 'bar',
      barWidth: '30%',
    },
  ],
}
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.wrapper
  display flex
  padding-bottom .04rem
  .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
.warn
  $box()
  padding .05rem .1rem
  display flex
  justify-content space-between
  align-items center
  >div
    text-align center
    flex 1
    position relative
    p
      color #ccc
    span
      font-size .08rem
      margin-left .05rem
      color #ccc
    &:first-child
      flex 1.5
      p
        font-size .12rem
        color #fff
    &:last-child
      &:before
        content '|'
        position absolute
        top 50%
        transform translateY(-50%)
        left 0
.chart
  width 100%
  height .8rem
  margin-bottom .03rem
.party
  display flex
  justify-content space-between
  text-align center
  margin-bottom .04rem
  p
    font-size .09rem
    color #ccc
</style>
