<template>
  <div class="main-container flex jc-center">
    <div>
      <!-- 头部统计数据 -->
      <div class="data-cards" v-if="true">
        <div 
          class="data-card" 
          v-for="(item, index) in eleCondList" 
          :key="index"
        >
          <div class="border-wrapper">
            <dv-border-box-10 class="card-border">
              <div class="card-content">
                <div class="num">{{ item.num }}</div>
                <div class="label">{{ item.name }}</div>
              </div>
            </dv-border-box-10>
          </div>
        </div>
      </div>

      <!-- Tab导航 -->
      <div class="tab-nav" v-if="true">
        <div 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="['tab-item', { active: currentTab === index }]"
          @click="currentTab = index"
        >
          {{ tab.name }}
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-container" v-if="true">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <component 
            :is="currentComponent" 
            v-show="isComponentVisible"
          ></component>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import Left1 from "./components/left1.vue";
import Right1 from "./components/right1.vue";
import Right2 from "./components/right2.vue";
import Right3 from "./components/right3.vue";
import { getElevatorMaintenanceTotal } from "@/api/elevator";

export default {
  components: { Left1, Right1, Right2, Right3 },
  data() {
    return {
      refreshing: false,
      currentTab: 0,
      isComponentVisible: true,
      maintenanceName: '',
      tabs: [
        { name: '维保单位' },
        { name: '维保工作' },
        { name: '超期统计' },
        { name: '超期率' }
      ],
      eleCondList: [
        {
          name: "维保单位数量(家)",
          num: 0,
          key: "companyTotal",
        },
        {
          name: "今日维保任务",
          num: 0,
          key: "dayTaskTotal",
        },
        {
          name: "超期维保任务", 
          num: 0,
          key: "overdueTaskTotal",
        },
      ],
    };
  },
  provide() {
    return {
      maintenanceNameProvider: {
        get: () => this.maintenanceName,
        set: (val) => this.maintenanceName = val
      }
    };
  },
  computed: {
    currentComponent() {
      const components = ['Left1', 'Right1', 'Right2', 'Right3'];
      return components[this.currentTab];
    }
  },
  watch: {
    currentTab() {
      // 切换时先隐藏组件
      this.isComponentVisible = false;
      // 等待 DOM 更新后再显示
      this.$nextTick(() => {
        this.isComponentVisible = true;
      });
    }
  },
  mounted() {
    this.getElevatorMaintenanceTotalApi();

    // 避免重复监听
    this.$EventBus.$off("maintenanceName");
    this.$EventBus.$on("maintenanceName", (maintenanceName) => {
      this.maintenanceName = maintenanceName;
    });
  },
  methods: {
    async getElevatorMaintenanceTotalApi() {
      const res = await getElevatorMaintenanceTotal();
      this.eleCondList.map(item => {
        item.num = res.data[item.key];
      });
    },
    async onRefresh() {
      await this.getElevatorMaintenanceTotalApi();
      this.refreshing = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  width: 100%;
  min-height: 100vh;
  background: rgb(6, 15, 48);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .data-cards {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem;
    
    .data-card {
      width: 32%;

      .border-wrapper {
        position: relative;
        width: 100%;
        height: 2.2rem;
        
        // 强制覆盖第三方组件的固定尺寸
        :deep(.dv-border-box-10) {
          position: absolute !important;
          width: 100% !important;
          height: 100% !important;
          
          .dv-border-svg-container {
            width: 100% !important;
            height: 100% !important;
          }
          
          .dv-border-box-content {
            width: 100% !important;
            height: 100% !important;
          }
          
          // 修改四个角的 SVG 尺寸
          svg {
            width: 0.3rem !important;
            height: 0.3rem !important;
          }
        }
      }

      .card-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.2rem;

        .num {
          font-size: 0.6rem;
          color: #02dff6;
          font-weight: bold;
          margin-bottom: 0.2rem;
        }

        .label {
          font-size: 0.24rem;
          color: #ffffff;
          text-align: center;
          line-height: 1.2;
        }
      }
    }
  }

  .tab-nav {
    display: flex;
    justify-content: space-around;
    padding: 0.2rem 0;
    background: rgba(12, 31, 79, 0.8);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    .tab-item {
      position: relative;
      padding: 0.2rem 0;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.28rem;
      transition: all 0.3s ease;
      min-width: 1.6rem;
      text-align: center;
      
      &.active {
        color: #02dff6;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40%;
          height: 0.04rem;
          background: #02dff6;
          border-radius: 0.02rem;
          transition: all 0.3s ease;
        }
      }
    }
  }

  .content-container {
    padding: 0.3rem;

    .section {
      margin-bottom: 0.3rem;
      background: rgba(12, 31, 79, 0.8);
      border-radius: 0.1rem;
      padding: 0.3rem;
    }
  }
}

// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}
</style>

<style scoped>
.main-container {
  width: 100%;
  min-height: 100vh;
  background: rgb(6, 15, 48);
  overflow-y: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 3rem;
  padding-top: 1.05rem;
  -webkit-overflow-scrolling: touch;
}
</style>