<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="上报期间" prop="repTime">
        <el-date-picker v-model="queryParams.repTime" type="month" placeholder="选择月份" value-format="YYYY年MM月" format="YYYY年MM月" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="totalList" border style="width: 100%; text-align: center;">
      <el-table-column label="单位类型" align="center" prop="repType" width="160" />
      <el-table-column label="重大隐患" align="center" prop="impHiddCount" />
      <el-table-column label="逾期未整改" align="center" prop="overUnImplRect" />
      <el-table-column label="未落实整改" align="center" prop="unImplRect" />
      <el-table-column label="落实整改" align="center" prop="implRect" />
      <el-table-column label="正在整改" align="center" prop="inRect" />
      <el-table-column label="已完成整改" align="center" prop="compRect" />
      <el-table-column label="整改率" align="center">
        <template #default="scope">
          <span v-if="scope.row.implRect + scope.row.inRect + scope.row.compRect > 0">
            {{ ((scope.row.compRect / (scope.row.implRect + scope.row.inRect + scope.row.compRect)) * 100).toFixed(1) }}%
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="HiddTotalList">
import { getMonthTotalList } from "@/api/slaj/hidd"

const { proxy } = getCurrentInstance()

const totalList = ref([])
const loading = ref(false)
const showSearch = ref(true)

const data = reactive({
  queryParams: {
    repTime: undefined
  }
})

const { queryParams } = toRefs(data)

function getList() {
  loading.value = true
  getMonthTotalList(queryParams.value).then(res => {
    loading.value = false
    totalList.value = res.data || []
  })
}

function handleQuery() {
  getList()
}

function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

onMounted(() => {
  getList()
})
</script>
