<template>
  <div class="cockpitContainer" :class="['cockpitContainer__' + size]">
    <div class="content-top" :class="['content-top__' + topSize]">
      <!-- 使用 flex 容器包裹图标和文字，实现垂直居中 -->
      <div class="title-wrapper">
        <svg-icon class="title-icon" :icon-class="icon" />
        <span class="title-text">
          {{ name }}
        </span>
      </div>
      <div v-if="isShowTab" class="tab-group">
        <!-- 月度Tab：点击切换状态，动态绑定样式 -->
        <div class="tab-item" :class="{ active: activeTab === 'month' }" @click="handleTabClick('month')">
          月度
        </div>
        <!-- 累计Tab：点击切换状态，动态绑定样式 -->
        <div class="tab-item" :class="{ active: activeTab === 'total' }" @click="handleTabClick('total')">
          累计
        </div>
      </div>
    </div>
    <div class="cockpitContainer-body">
      <slot>
        <div class="test-body">something test....</div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Container',
  components: {},
  // eslint-disable-next-line vue/require-prop-types
  props: ['name', 'size', 'icon', 'topSize', 'isShowTab'],
  data() {
    return {
      activeTab: 'month' // 初始化激活的Tab（支持父组件传默认值）
    };
  },
  computed: {},
  methods: {
    handleTabClick(tabType) {
      this.activeTab = tabType;
      // 向父组件派发Tab切换事件，传递当前选中的Tab类型
      this.$emit('tabChange', tabType);
      // 可选：同时传递更详细的信息（如标签名）
      // this.$emit('tabChange', { type: tabType, name: tabType === 'month' ? '月度' : '累计' });
    },
  },
};
</script>

<style scoped lang="scss">
.cockpitContainer {
  display: inline-block;
  // width: 100%;
  // height: 100%;
  padding: 6px;
  display: flex;
  flex-direction: column;
  position: relative;

  .content-top {
    height: 60px;

    .title-wrapper {
      display: flex;
      align-items: center;
      margin-left: 10px;
      /* 垂直居中关键属性 */
      height: 100%;
      /* 继承父容器高度，确保垂直居中范围 */
    }

    .title-icon {
      font-size: 30px;
      margin-right: 12px;
      margin-top: 4px;
      /* 图标和文字之间的间距 */
      flex-shrink: 0;
      /* 防止图标被压缩 */
    }

    .title-text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24px;
      color: #000000;
      letter-spacing: 3px;
      text-align: left;
      font-style: normal;
      // 移除固定行高，避免影响垂直对齐
      // line-height: 60px;
    }

    // width: 547px;
    // background: url(../../../assets/img/contentTopBasic.png) no-repeat;
    // background-size: 100% 100%;
    // background-position: 0 0;
    &__basic {
      // width: 547px;
      background: url(../../../assets/img/contentTopBasic.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__middle {
      background: url(../../../assets/img/topTileMiddle.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__large {
      background: url(../../../assets/img/topTitleLargeBg.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__KFAPTopTitle {
      background: url(../../../assets/img/KFAPTopTitle.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__psiTopTitleBasic {
      background: url(../../../assets/img/psiTopTitleBasic.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__rawTopTitleLarge {
      background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__calendarTitleBg {
      background: url(../../../assets/img/calendarTitleBg.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__indicatorDetailsTitleBg {
      background: url(../../../assets/img/indicatorDetailsTitleBg.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }
  }

  &__topBasic {
    background: url(../../../assets/img/top-basic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__bottomBasic {
    background: url(../../../assets/img/bottom-basic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__operatingBasic {
    background: url(../../../assets/img/operating-basic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__operatingLarge {
    background: url(../../../assets/img/operating-large.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__profitTopBasic {
    background: url(../../../assets/img/profitTopBasic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__profitMiddleBasic {
    background: url(../../../assets/img/profitMiddleBasic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__psiBasicBg {
    background: url(../../../assets/img/psiBasicBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__psiMiddleBg {
    background: url(../../../assets/img/psiMiddleBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__costBasicBg {
    background: url(../../../assets/img/costBasicBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__rawTopBg {
    background: url(../../../assets/img/rawTopBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__opLargeBg {
    background: url(../../../assets/img/opLargeBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__calendarBg {
    background: url(../../../assets/img/calendarBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__indicatorDetailsBg {
    background: url(../../../assets/img/indicatorDetailsBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  // &__left {
  //   background: url(../../../../../../../assets/img/left.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__energyConsumption {
  //   background: url(../../../../../../../assets/img/energyConsumption.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__left2 {
  //   background: url(../../assets/left_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__left3 {
  //   background: url(../../assets/left_3.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__mid2 {
  //   background: url(../../assets/mid_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__mid3 {
  //   background: url(../../assets/mid_3.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__right1 {
  //   background: url(../../assets/right_1.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__right2 {
  //   background: url(../../assets/right_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__right3 {
  //   background: url(../../assets/right_3.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__weekRight2 {
  //   background: url(../../assets/week_right_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__weekMidTop {
  //   background: url(../../assets/week-mid-top.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__weekMidMid {
  //   background: url(../../assets/week-mid-mid.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  &::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    // background: inherit;
    /* 设置模糊，不用 filter */
    backdrop-filter: blur(5px);
    z-index: -1;
  }
}

.container-body {
  flex: 1;
}

.tab-group {
  display: inline-flex;
  position: absolute;
  right: 5%;
  top: 10%;
  z-index: 9999;
  align-items: center;
  border-radius: 24px;
  overflow: hidden;
  gap: 8px; // Tab之间的间距
}

// Tab基础样式（统一）
.tab-item {
  padding: 0 24px;
  width: 79px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  border-radius: 12px;
  transition: all 0.2s ease; // 样式切换动画
}

// 未激活的Tab样式（原first-child样式）
.tab-item:not(.active) {
  background: #ECF4FE;
  color: #0B58FF;
}

// 激活的Tab样式（原last-child样式）
.tab-item.active {
  background: #3071FF;
  color: #F9FCFF;
  font-weight: bold;
}
</style>
