<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',
            decimal: 2,
          }"
          :color="['rgb(36,59,86)', '#F4923E']"
        />
      </div>
      <div class="right">
        <p>整改执行</p>
        <div>
          <div>
            <p class="count"><m-count :value="info.rectifyCount" /></p>
            <p>已开</p>
          </div>
          |
          <div>
            <p class="count">
              <m-count :value="info.rectifyRatio" :decimal="2" />%
            </p>
            <p>完成率</p>
          </div>
        </div>
      </div>
    </div>
    <m-sub :addition="{ value: capital, unit: '万元', decimal: 2 }">
      维修资金
    </m-sub>
    <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 class="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">
const _config = {
  name: 'A016',
  title: '物业监管',
  row: 2,
  apis: {
    main: '/service-documents-ddd/public/checkOrder/operatingIndex',
    capital: '/service-documents-ddd/public/maintenance/count/amt',
    amount: '/service-documents-ddd/public/houseContinuedWarnings',
    list: '/service-documents-ddd/public/buildingWarnings/countByStreet',
  },
}
export default _config
</script>
<script lang="ts" setup>
import Summary from '@/components/summary.vue'
import { computed, onMounted, ref } from 'vue'
import { ajax } from '@/ajax'

const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
onMounted(() => {
  ajax.get({ url: _config.apis.main }).then((res) => {
    const {
      rectifyCount = 0, //已开
      ycRatio = 0, //月查
      rectifyRatio = 0, //执行率
      shouldCheckCount = 0, //应开
      szRatio = 0, //双周查
      zcRatio = 0, //自查
    } = res?.data?.content || {}
    summary.value = [
      { name: '房办月查', value: ycRatio },
      { name: '物企双周查', value: szRatio },
      { name: '物业日查', value: zcRatio },
    ]
    info.value = { rectifyCount, rectifyRatio }
  })
  ajax.get({ url: _config.apis.capital }).then((res) => {
    const { tranAmt = 0 } = res?.data?.content || {}
    capital.value = tranAmt / 10000
  })
  ajax.get({ url: _config.apis.amount }).then((res) => {
    const {
      yjmpzSum = 0, //门牌幢
      yjxqSum = 0, //小区
      yjfhSum = 0, //分户
    } = res?.data?.content || {}
    list.value = [
      { name: '续筹预警', value: yjfhSum },
      { name: '涉及门牌', value: yjmpzSum },
      { name: '涉及小区', value: yjxqSum },
    ]
  })
  ajax.get({ url: _config.apis.list }).then((res) => {
    barData.value.source = res?.data?.content || []
  })
})
const capital = ref(0)
const info = ref({
  rectifyCount: 0,
  rectifyRatio: 0,
})
const summary = ref([
  { name: '房办月查', value: 0 },
  { name: '物企双周查', value: 0 },
  { name: '物业日查', value: 0 },
])
const list = ref([
  { name: '续筹预警', value: 0 },
  { name: '涉及门牌', value: 0 },
  { name: '涉及小区', value: 0 },
])

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

const barData = ref({
  dimensions: [
    { name: 'streetName', displayName: '街道' },
    { name: 'num', displayName: '数量' },
  ],
  source: [],
})
const barOption = {
  legend: false,
  yAxis: {
    minInterval: 1,
  },
  grid: {
    left: '2%',
    right: '1%',
    bottom: '1%',
    top: '8%',
    containLabel: true,
  },
  // xAxis: [
  //   {
  //     type: 'category',
  //     show: false,
  //   },
  // ],
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        interval: 0,
        rotate: 45,
        fontSize: fontSize.value * 0.8,
      },
    },
  ],
  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
    .count
      font-size .12rem
    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 1.4rem
  margin-bottom .03rem
.party
  display flex
  justify-content space-between
  text-align center
  margin-bottom .04rem
  p
    font-size .09rem
    color #ccc
</style>
