<template>

  <div style="height: 25px;width: auto">
      <button class="button_spacing button_search" @click="showaudio(1)" :class="{color:searchs.search1}">
        安检情况明细
      </button>
      <button class="button_spacing button_search" @click="showaudio(2)" :class="{color:searchs.search2}">
        小区隐患明细表
      </button>
      <button class="button_spacing button_search" @click="showaudio(3)" :class="{color:searchs.search3}">
        工商情况明细表
      </button>
      <button class="button_spacing button_search" @click="showaudio(4)" :class="{color:searchs.search4}">
        隐患类型明细表民用
      </button>
      <button class="button_spacing button_search" @click="showaudio(5)" :class="{color:searchs.search5}">
        安检员明细
      </button>
      <button class="button_spacing button_search" @click="showaudio(9)" :class="{color:searchs.search9}">
        安检员考核
      </button>
      <button class="button_spacing button_search" @click="showaudio(6)" :class="{color:searchs.search6}">
        安检日报表
      </button>
      <button class="button_spacing button_search" @click="showaudio(7)" :class="{color:searchs.search7}">
        安检月报表
      </button>
      <button class="button_spacing button_search" @click="showaudio(8)" :class="{color:searchs.search8}">
        安检年报表
      </button>
  </div>
    <!--安检情况明细-->
    <div v-if="searchs.search1">
      <safe-detail></safe-detail>
    </div>
    <!--小区隐患明细表-->
    <div v-if="searchs.search2">
      <community-detail ></community-detail>
    </div>
    <!--隐患类型明细表工商-->
    <div v-if="searchs.search3">
      <community-type-detail-g ></community-type-detail-g>
    </div>
    <!--隐患类型明细表民用-->
    <div v-if="searchs.search4">
      <community-type-detail-m ></community-type-detail-m>
    </div>
<!--    安检员明细-->
    <div v-if="searchs.search5">
      <safe-statistics ></safe-statistics>
    </div>
<!--安检日报表-->
    <div v-if="searchs.search6">
      <safe-statistics-day ></safe-statistics-day>
    </div>
    <!--安检月报表-->
    <div v-if="searchs.search7">
      <safe-statistics-month ></safe-statistics-month>
    </div>
<!--安检年报表-->
    <div v-if="searchs.search8">
      <safe-statistics-year ></safe-statistics-year>
    </div>
<!--安检年报表-->
  <div v-if="searchs.search9">
    <no-checkplan-safecheck ></no-checkplan-safecheck>
  </div>
</template>


<script>
import * as Util from '../../Util'
import {HttpResetClass} from "vue-client";

export default {
  title: '安检报表',
  data() {
    return {
      searchs: {
        search1: false,
        search2: false,
        search3: false,
        search4: false,
        search5: false,
        search6: false,
        search7: false,
        search8: false,
        search9: false
      },
      currentActiveSearch:''
    }
  },
  methods: {
    showaudio(index){
      for (const key in this.searchs) {
        this.searchs[key] = false;
      }
      this.searchs[`search${index}`] = true;
      this.currentActiveSearch = index;
    }
  }
}
</script>

<style scoped>
.div-1 {
  height: 99%;
  width: 100%
}
.color{
  background-color: #f7cb32;
}
.div-2 {
  height: 7%;
  width: 100%;
}

.div-3 {
  height: 90%;
  width: 100%;
  overflow-y: scroll;
}

.td-1 {
  float: left;
}

.td-2 {
  float: right;
}

.td-3 {
  margin-bottom: 1%;
}

</style>
