<template>
  <div class="health">
    <div class="selections mg-b-16">
      <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">未确认缺陷</div>
      <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">已确认缺陷</div>
      <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">已分配任务</div>
      <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">已完成任务</div>
    </div>
    <div v-if="tabIndex == 0">
      <health-tab-1 />
    </div>
    <div v-if="tabIndex == 1">
      <health-tab-2 />
    </div>
    <div v-if="tabIndex == 2">
       <health-tab-3 /> 
      <!-- <button class="btn" @click="dialogVisible = true">点击弹窗</button>
      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
        <dayinfo />
      </el-dialog> -->
    </div>
    <div v-if="tabIndex == 3">
      <health-tab-4 /> 
    </div>
  </div>
</template>

<script>
import HealthTab1 from "./HealthTab1.vue";
import HealthTab2 from "./HealthTab2.vue";
import HealthTab3 from "./HealthTab3.vue";
import HealthTab4 from "./HealthTab4.vue";

export default {
  setup() {},
  components: {HealthTab1, HealthTab2, HealthTab3, HealthTab4},
  data() {
    return {
       tabIndex: 0,
    };
  },
  methods: {
     tabSelect(state) {
        this.tabIndex = state;
     }
  }
};
</script>

<style lang="less" scope>
.health {
  .selections {
    display: flex;

    .item {
      flex: 0 0 128px;
      text-align: center;
      line-height: 33px;
      margin-right: 8px;
      color: @font-color;
      font-size: @fontsize-s;
      background: fade(@gray, 20);
      border: 1px solid fade(@gray, 20);

      &:hover,
      &.active {
        background: fade(@green, 20);
        border: 1px solid @green;
        color: @green;
        cursor: pointer;
      }
    }
  }
}
</style>
