<!--
 * @Author: liguigong liguigong@shopline.com
 * @Date: 2025-09-19 16:26:36
 * @LastEditors: liguigong liguigong@shopline.com
 * @LastEditTime: 2025-09-19 17:56:16
 * @FilePath: pages/fittingRoom/components/STabs.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <view class="tabContainer">
    <view class="tab-top">
      <view class="parent-tab" @click="() => fittingRoom.changeType()"
        >{{ !fittingRoom.type ? '我的衣橱' : '衣服库' }}
      </view>
      <view class="title">赴宴试衣间</view>
    </view>
    <view class="tab-bottom">
      <view class="mainTitle"
        >{{ fittingRoom.type ? '我的衣橱' : '衣服库' }}
        <view class="slash">/</view>
      </view>
      <v-tabs
        v-model="fittingRoom.tab"
        :lineScale="0.2"
        :tabs="fittingRoom.tabs"
        activeColor="#fff"
        bgColor="#000000"
        color="#fff"
        fontSize="24rpx"
        height="50rpx"
        lineColor="#fff"
        lineHeight="2rpx"
        paddingItem="0 18rpx"
        @change="changeTab"
      ></v-tabs>
    </view>
  </view>
</template>
<script setup>
  import sheep from '@/sheep';

  const fittingRoom = sheep.$store('fittingRoom');

  function changeTab(index) {
    console.log('当前选中的项：' + index);
  }
</script>
<style lang="scss" scoped>
  .tabContainer {
    height: 130rpx;
    background: #000;
    width: 100%;

    .tab-top {
      margin: 18rpx 0 14rpx;
      color: rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .parent-tab {
        position: absolute;
        font-size: 20rpx;
        left: 0;
        top: 0;
        width: 180rpx;
        text-align: center;
      }

      .title {
        font-size: 24rpx;
      }
    }

    .tab-bottom {
      display: flex;
      align-items: center;

      .mainTitle {
        flex: 0 0 180rpx;
        color: #ffffff;
        font-size: 26rpx;
        text-align: center;
        position: relative;

        .slash {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }
</style>
