<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="info.alreadyCheckCount" /></p>
            <p>已开</p>
          </div>
          |
          <div>
            <p class="count">
              <m-count :value="info.rectifyRatio" :decimal="2" />%
            </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: {
    community: '/service-customkey-ddd/public/communities/v2?pageSize=9000',
    api1: '/service-basicdatasync-ddd/public/indCous',
    api2: '/service-basicdatasync-ddd/public/residentsCommitteesV2',
    api3: '/service-basicdatasync-ddd/public/propCompanies',
    checks: '/service-documents-ddd/public/checkOrder/operatingIndex',
  },
}
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 { ref, PropType } from 'vue'
import { ajax } from '@/ajax'

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

ajax
  .post({
    url: _config.apis.community,
    params: {
      conditions: [{ conditionsGroup: [] }],
      subject: 'tbl_community',
    },
  })
  .then((res) => {
    const communityAmount = (res?.data?.content || [])?.length || 0
    Promise.all([
      ajax.get({ url: _config.apis.api1, params: { sectType_in: '1' } }),
      ajax.get({
        url: _config.apis.api3,
        params: { sectType_in: '1', managedNum_desc: '1' },
      }),
    ]).then(([data1, data2]) => {
      summary.value = [
        { icon: icon1, name: '小区', value: communityAmount },
        { icon: icon2, name: '业委会', value: data1?.data?.totalRows || 0 },
        { icon: icon3, name: '物业企业', value: data2?.data?.totalRows || 0 },
      ]
    })
  })

ajax.get({ url: _config.apis.checks }).then((res) => {
  const {
    alreadyCheckCount = 0, //已开
    ycRatio = 0, //月查
    rectifyRatio = 0, //执行率
    shouldCheckCount = 0, //应开
    szRatio = 0, //双周查
    zcRatio = 0, //自查
  } = res?.data?.content || {}
  list.value = [
    { name: '房办月查', value: ycRatio },
    { name: '物企双周查', value: szRatio },
    { name: '物业日查', value: zcRatio },
  ]
  info.value = { alreadyCheckCount, rectifyRatio }
})

const summary = ref([
  { icon: icon1, name: '小区', value: 0 },
  { icon: icon2, name: '业委会', value: 0 },
  { icon: icon3, name: '物业服务企业', value: 0 },
])
const list = ref([
  { name: '房办月查', value: 79 },
  { name: '物企双周查', value: 83 },
  { name: '物业日查', value: 100 },
])
const info = ref({ alreadyCheckCount: 0, rectifyRatio: 0 })
</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>
