<template>
  <div class="cockpitContainer" :class="['cockpitContainer__' + size]">
    <div class="container-top">
      <!-- 左侧标题：点击切换到采购标签，并更新透明度 -->
      <div class="content-top-left title-wrapper" @click="handleLeftClick"
        :style="{ opacity: isLeftTransparent ? 1 : 0.3 }">
        <svg-icon class="title-icon" style="font-size: 32px; margin-left: 16px" :icon-class="icon" />
        <span class="title-text">{{ name }}</span>
        <!-- <span v-if="!isLeftTransparent" class="change-text">点击切换</span> -->

      </div>
      <!-- 右侧标题：点击切换到存货标签，并更新透明度 -->
      <div class="content-top-right title-wrapper" v-if="nameTwo" @click="handleRightClick"
        :style="{ opacity: isRightTransparent ? 1 : 0.3 }">
        <svg-icon class="title-icon" style="font-size: 32px; margin-left: 16px" :icon-class="iconTwo || icon" />
        <span class="title-text">{{ nameTwo }}</span>

      </div>
      <!-- <span class="change-text" :class="{ 'change-text-right': isLeftTransparent }">点击切换</span> -->
       <div 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="container-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Container',
  components: {},
  props: {
    name: { type: String, required: true },
    nameTwo: { type: String, required: false },
    size: { type: String, default: 'default' },
    icon: { type: String, default: '' },
    iconTwo: { type: String, default: '' }
  },
  data() {
    return {
      // 初始状态：左侧不透明（1），右侧透明（0.3）
      isLeftTransparent: true,  // 左侧透明度状态（true=1，false=0.3）
      isRightTransparent: false,  // 右侧透明度状态（true=1，false=0.3）
      activeTab: 'month', // 默认激活的Tab为月度
    };
  },
  methods: {
    handleTabClick(tabType) {
      this.activeTab = tabType;
      // 向父组件派发Tab切换事件，传递当前选中的Tab类型
      this.$emit('tabChange', tabType);
      // 可选：同时传递更详细的信息（如标签名）
      // this.$emit('tabChange', { type: tabType, name: tabType === 'month' ? '月度' : '累计' });
    },
    // 点击左侧标题：左侧保持不透明，右侧变透明，并派发采购标签事件
    handleLeftClick() {
      this.isLeftTransparent = true;   // 左侧不透明
      this.isRightTransparent = false; // 右侧透明
      this.$emit('switchTab', 'purchase'); // 通知父组件切换到采购内容
    },
    // 点击右侧标题：右侧保持不透明，左侧变透明，并派发存货标签事件
    handleRightClick() {
      this.isLeftTransparent = false;  // 左侧透明
      this.isRightTransparent = true;  // 右侧不透明
      this.$emit('switchTab', 'inventory'); // 通知父组件切换到存货内容
    }
  }
};
</script>

<style scoped lang="scss">
// 样式保持不变，确保透明度过渡生效
.cockpitContainer {
  display: inline-block;
  padding: 6px;
  display: flex;
  flex-direction: column;
  position: relative;

  .container-top {
    position: relative;
    height: 60px;
    width: 100%;
  }

  .content-top-left {
    width: 746px;
    height: 60px;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(253, 255, 255, 0) 100%);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: opacity 0.3s ease; // 透明度过渡动画
  }
.title-wrapper {
  display: flex;
  align-items: center;
  // margin-left: 10px;
  /* 垂直居中关键属性 */
  height: 100%;
  /* 继承父容器高度，确保垂直居中范围 */
}

.title-icon {
  font-size: 30px;
  margin-right: 12px;
  margin-top: 4px;
  margin-left: 10px;
  /* 图标和文字之间的间距 */
  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;
}
  /* 左侧标题 - 左上角折现边框 */
  .content-top-left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid;
    border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
    z-index: 3;
  }

  /* 左侧标题 - 左上角折现细节 */
  .content-top-left::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: #E1f0fd;
    border-top: 1px solid rgba(92, 140, 255, 1);
    border-left: 1px solid rgba(92, 140, 255, 1);
    transform: rotate(135deg) translate(-50%, -50%);
    transform-origin: top left;
    z-index: 3;
  }

  .content-top-right {
    width: 368px;
    height: 60px;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(253, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    left: 240px;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.3s ease; // 透明度过渡动画
  }

  /* 右侧标题 - 左上角折现边框 */
  .content-top-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid;
    border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
    z-index: 12;
  }

  /* 右侧标题 - 左上角折现细节 */
  .content-top-right::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: #E1f0fd;
    border-top: 1px solid rgba(92, 140, 255, 1);
    border-left: 1px solid rgba(92, 140, 255, 1);
    transform: rotate(135deg) translate(-50%, -50%);
    transform-origin: top left;
    z-index: 12;
  }

  .title-text {
    margin-left: 6px;
    height: 32px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24px;
    color: #000000;
    // line-height: 60px;
    letter-spacing: 3px;
    text-align: left;
    font-style: normal;
    display: inline-block;
    position: relative;
    z-index: 1;
  }

  &__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;
  }
}

.container-body {
  flex: 1;
}

.test-body {
  padding: 20px;
  color: #666;
}
.change-text{
  position: absolute;
  top: 26px;
  left: 300px;
  z-index: 999;
  // width: 48px;
  //   height: 17px;
  // margin-left: 80px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #0B58FF;
    line-height: 17px;
    text-align: left;
    font-style: normal;
}
.change-text-right {
  // position: absolute;
  // top: 26px;
  left: auto; // 清除左侧定位
  right: 30px;
  // z-index: 999;
  // // width: 48px;
  // //   height: 17px;
  // // margin-left: 80px;
  // font-family: PingFangSC, PingFang SC;
  // font-weight: 400;
  // font-size: 12px;
  // color: #0B58FF;
  // line-height: 17px;
  // text-align: left;
  // font-style: normal;
}
.tab-group {
  display: inline-flex;
  position: absolute;
  right: 5%;
  top:20px;
  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>
