<template>
  <div class="home-container">
    <!-- header -->
    <div class="home-header">
      <div class="home-header-left">
        <div v-for="(item, index) in headerLeftList" :key="index">
          <div class="home-header-flex">
            <div
              class="home-header-name"
              :class="leftActiveIndex == index ? 'home-header-name-active' : ''"
              @click="headerLeftChange(item, index)"
            >
              {{ item.name }}
            </div>
            <div class="tab-border" v-if="leftActiveIndex == index"></div>
          </div>
        </div>
      </div>
      <div class="home-header-right">
        <div v-for="(item, index) in headerRightList" :key="index">
          <div class="home-header-flex">
            <div
              class="home-header-name"
              @click="headerRightChange(item, index)"
            >
              {{ item.name }}
            </div>
            <div class="tab-border" v-if="rightActiveIndex == index"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- body -->
    <transition name="fade">
      <div v-if="leftActiveIndex == 0">
        <!-- 实时监测 -->
        <real-time-monitor />
      </div>
    </transition>
    <transition name="fade">
      <div v-if="leftActiveIndex == 1">
        <!-- 线表分析 -->
        <line-table-analysis />
      </div>
    </transition>
    <transition name="fade">
      <div v-if="leftActiveIndex == 2">
        <!-- 前方需求分析 -->
        <forward-demand />
      </div>
    </transition>
    <transition name="fade">
      <div v-if="rightActiveIndex == 0">
        <!-- 月度计划分析 -->
        <month-plan />
      </div>
    </transition>
    <transition name="fade">
      <div v-if="rightActiveIndex == 1">
        <!-- 跨位分析 -->
        <amphi-position />
      </div>
    </transition>
    <transition name="fade">
      <div v-if="rightActiveIndex == 2">
        <!-- 小池集成分析 -->
        <integration />
      </div>
    </transition>
    <transition name="fade">
      <div v-if="rightActiveIndex == 3">
        <!-- 查看pdf -->
        <view-PDF />
      </div>
    </transition>
  </div>
</template>

<script>
import RealTimeMonitor from "@/components/RealTimeMonitor";
import LineTableAnalysis from "@/components/LineTableAnalysis";
import ForwardDemand from "@/components/ForwardDemand";
import MonthPlan from "@/components/MonthPlan";
import AmphiPosition from "@/components/AmphiPosition";
import Integration from "@/components/Integration";
import ViewPDF from "@/components/ViewPDF";
export default {
  name: "Home",
  components: {
    RealTimeMonitor,
    LineTableAnalysis,
    ForwardDemand,
    MonthPlan,
    AmphiPosition,
    Integration,
    ViewPDF,
  },
  data() {
    return {
      headerLeftList: [
        {
          id: 1,
          name: "实时监测",
        },
        {
          id: 2,
          name: "线表分析",
        },
        {
          id: 3,
          name: "前方需求分析",
        },
      ], //左侧tabs
      headerRightList: [
        {
          id: 4,
          name: "月度计划分析",
        },
        {
          id: 5,
          name: "跨位分析",
        },
        {
          id: 6,
          name: "小池集成",
        },
        {
          id: 7,
          name: "查看PDF",
        },
      ], //右侧tabs
      leftActiveIndex: 0,
      rightActiveIndex: 99,
    };
  },
  created() {},
  methods: {
    // 点击左侧tabs
    headerLeftChange(item, index) {
      this.leftActiveIndex = index;
      this.rightActiveIndex = 99;
    },
    // 点击右侧tabs
    headerRightChange(item, index) {
      this.rightActiveIndex = index;
      this.leftActiveIndex = 99;
    },
  },
};
</script>
<style lang="scss" scope>
.home-container {
  // width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-image: url("@/assets/image/bg02.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  .home-header {
    // height: 37px;
    display: flex;
    justify-content: space-between;
    .home-header-left {
      width: 18%;
      display: flex;
      justify-content: space-between;
      margin-left: 3%;
    }
    .home-header-right {
      min-width: 18%;
      display: flex;
      justify-content: space-between;
      margin-right: 3%;
    }
    .home-header-flex {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .home-header-name {
      font-size: 14px;
      color: #fff;
      opacity: 0.8;
      padding-top: 8px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 5px;
      cursor: pointer;
      text-shadow: 0 6px 8px #00225b;
      white-space: nowrap;
      &:hover {
        opacity: 1;
      }
    }
    .tab-border {
      width: 80%;
      border-radius: 1px;
      border-bottom: 4px solid #4b8df8;
    }
  }
  .fade-enter {
    opacity: 0;
  }
  .fade-enter-active {
    transition: opacity 1s;
  }
}
</style>
