<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:37
 * @FilePath: src/views/screen/data/index.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="container_index">
    <div class="container_content_index">
      <div class="title">
        <div class="btn">
          <div style="display: flex; flex-direction: row; width: 100%">
            <div :class="buttonClass(1)" @click="changeTab(1)" style="margin-left: 7%"><span>数据管理</span></div>
            <div :class="buttonClass(2)" @click="changeTab(2)" style="margin-left: 7%"><span>终端设备巡检</span></div>
            <div :class="buttonClass(3)" @click="changeTab(3)" style="margin-left: 33.5%">
              <span>固定摄像头巡检</span>
            </div>
            <div :class="buttonClass(4)" @click="changeTab(4)" style="margin-left: 7%"><span>无人机巡检</span></div>
          </div>
        </div>
      </div>
      <div class="contents">
        <DataOverview v-if="activeTab === 1" v-on:jumpPage="jumpPage" />
        <TerminalInspection v-if="activeTab === 2" />
        <FixedCameraInspection v-if="activeTab === 3" />
        <DroneInspection v-if="activeTab === 4" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    VideoTab: () => import('@/views/screen/components/video/TerminalInspection.vue'),
    DataOverview: () => import('@/views/screen/components/dataManagement/DataOverview.vue'),
    TerminalInspection: () => import('@/views/screen/components/video/TerminalInspection.vue'),
    FixedCameraInspection: () => import('@/views/screen/components/video/FixedCameraInspection.vue'),
    DroneInspection: () => import('@/views/screen/components/video/DroneInspection.vue'),
  },
  data() {
    return {
      activeTab: 1,
    }
  },
  methods: {
    changeTab(index) {
      this.activeTab = index
      console.log(this.activeTab)
    },
    buttonClass(index) {
      return this.activeTab === index ? 'btn_tab_select' : 'btn_tab'
    },
    jumpPage(index) {
      this.activeTab = index
    },
  },
}
</script>

<style scoped lang="scss">
.container_index {
  background: rgba(5, 32, 75);
  height: 100%;
}

.container_content_index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: url('../../../assets/screen/bg.png') no-repeat;
  background-size: 100% 100%;
}

.title {
  font-size: 2rem;
  position: absolute;
  top: 6vh;
  width: 100%;
  padding: 5px;
  min-height: 3rem;

  .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    color: white;
    font-weight: bold;
  }
}

.contents {
  font-size: 1.5rem;
  position: absolute;
  width: 100%;
  height: 82%;
  top: 13vh;
}

.btn_tab {
  width: 180px;
  padding: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  background: url('../../../assets/screen/btn.png') no-repeat;
  background-size: 100% 100%;

  .span {
    margin-top: -5px;
  }
}

.btn_tab_select {
  width: 180px;
  padding: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  background: url('../../../assets/screen/btn_select.png') no-repeat;
  background-size: 100% 100%;

  .span {
    margin-top: -5px;
  }
}
</style>
