<template>
  <m-card title="行业监管">
    <div class="summary">
      <div class="rate">
        <div>
          <div>
            <span>
              <m-count
                class="count orange-count"
                :value="info.alreadyCheckCount"
              />
            </span>
            <p>已开</p>
          </div>
          <div>
            <span>
              <m-count class="count orange-count" :value="info.rectifyRatio" />%
            </span>
            <p>整改率</p>
          </div>
        </div>
        <div>
          <div v-for="item in summary" :key="item.name">
            <span> <m-count class="count" :value="item.value" />% </span>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="month">
        <p>房办月查完成情况</p>
        <div v-if="monthList.length > 0">
          <span
            v-for="item in monthList"
            :key="item.name"
            :style="`background:${item.color}`"
          >
            {{ item.name }}
          </span>
        </div>
        <div v-else>
          <span v-for="(_, i) in new Array(12)" :key="i">
            {{ i + 1 }}
          </span>
        </div>
      </div>
    </div>
    <m-sub>重大事件清单</m-sub>
    <div class="content">
      <div class="title">
        <p>小区名称</p>
        <span class="line" />
        <span>上报主题</span>
      </div>
      <div class="info">
        <div>
          <span>事件类型</span>
          <p>事件类型</p>
        </div>
        <div>
          <span>人员伤亡</span>
          <p>0人</p>
        </div>
        <div>
          <span>财产损失</span>
          <p>0元</p>
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
const _config = {
  name: 'A006',
  title: '行业监管',
  row: 1,
  apis: {
    main: '/service-documents-ddd/public/checkOrder/operatingIndex',
    month: '/service-documents-ddd/public/checkOrder/dahboard/countDatas',
  },
}
export default _config
</script>
<script lang="ts" setup>
import { ajax } from '@/ajax'
import { ref } from 'vue'

const monthList = ref<any[]>([])
ajax
  .get({
    url: _config.apis.month,
  })
  .then((res) => {
    const data = res?.data?.content?.HOUSING_OFFICE?.data || []
    const result = data.map((ele, i) => {
      let color = 'rgba(0,0,0,.3)'
      if (ele.rato == 1) {
        // 完成率100 绿色
        color = '#6EB629'
      } else if (ele.rato < 0.9) {
        // 完成率90以下 红色
        color = '#CC4D4D'
      } else if (ele.rato > 0.9) {
        // 完成率90到100之间 黄色
        color = '#FFD400'
      }
      return { name: i + 1, color }
    })
    while (result.length < 12) {
      result.push({ name: result.length + 1, color: 'rgba(0, 0, 0, 0.3)' })
    }
    monthList.value = result
  })

const info = ref({
  alreadyCheckCount: 0,
  shouldCheckCount: 0,
  rectifyRatio: 0,
})
const summary = ref([
  { name: '日查', value: 0 },
  { name: '双周查', value: 0 },
  { name: '月查', value: 0 },
])
ajax.get({ url: _config.apis.main }).then((res) => {
  const {
    alreadyCheckCount = 0, //已开
    ycRatio = 0, //月查
    rectifyRatio = 0, //执行率
    shouldCheckCount = 0, //应开
    szRatio = 0, //双周查
    zcRatio = 0, //自查
  } = res?.data?.content || {}
  summary.value = [
    { name: '日查', value: zcRatio },
    { name: '双周查', value: szRatio },
    { name: '月查', value: ycRatio },
  ]
  info.value = { alreadyCheckCount, shouldCheckCount, rectifyRatio }
})
</script>

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

.summary
  display flex
  .rate
    width 45%
    >div
      &:first-child
        display flex
        justify-content space-between
      >div
        display inline-block
        width 33%
      .count
        font-size .14rem
        color #fff
      span,
      p
        font-size .09rem
        color #ccc
  .month
    flex 1
    $box()
    padding .05rem .1rem
    display flex
    flex-direction column
    margin .04rem 0
    >div
      margin-top .04rem
      flex 1
      display grid
      grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr
      grid-template-rows 1fr 1fr
      grid-gap .04rem
      span
        $center()
        border-radius .02rem
        // background $green
        background rgba(0, 0, 0, 0.3)
.content
  $box()
  padding .04rem .1rem
  margin-bottom .04rem
  .title
    display flex
    align-items center
    .line
      flex 1
      height 0
      border-bottom .01rem dashed $blue
      margin 0 .05rem
  .info
    display flex
    >div
      flex 1

      span
        color #ccc
        font-size .08rem
</style>
