<template>
  <div class="flex-row">
    <div class="basic-main">
      <!-- Tab 切换 -->
      <ul class="nav nav-tabs" style="margin-bottom: 10px">
        <li role="presentation" :class="{active: activeTab === 'user'}" @click="activeTab = 'user'">
          <a style="color: #5ac0d9 !important; cursor: pointer;">用户隐患汇总</a>
        </li>
        <li role="presentation" :class="{active: activeTab === 'production'}" @click="activeTab = 'production'">
          <a style="color: #5ac0d9 !important; cursor: pointer;">生产隐患汇总</a>
        </li>
      </ul>

      <!-- 用户隐患汇总 -->
      <user-defect-summary v-if="activeTab === 'user'"></user-defect-summary>

      <!-- 生产隐患汇总 -->
      <production-defect-summary v-if="activeTab === 'production'"></production-defect-summary>
    </div>
  </div>
</template>

<script>
  import UserDefectSummary from './UserDefectSummary.vue'
  import ProductionDefectSummary from './ProductionDefectSummary.vue'

  export default {
    title: '隐患汇总查询',
    components: {
      'user-defect-summary': UserDefectSummary,
      'production-defect-summary': ProductionDefectSummary
    },
    data() {
      return {
        activeTab: 'user'
      }
    }
  }
</script>

<style scoped>
</style>
