<template>
  <view class="custom-tabbar">
    <!-- 左侧两个菜单 -->
    <view class="tab-item" :class="{ active: currentIndex === 0 }" @click="switchTab(0)">
      <view class="tab-icon-wrapper">
        <view class="tab-icon">
          <view class="icon-home"></view>
        </view>
      </view>
      <text class="tab-text">工作台</text>
    </view>
    
    <view class="tab-item" :class="{ active: currentIndex === 1 }" @click="switchTab(1)">
      <view class="tab-icon-wrapper">
        <view class="tab-icon">
          <view class="icon-order"></view>
        </view>
      </view>
      <text class="tab-text">订单</text>
    </view>
    
    <!-- 中间扫码按钮 -->
    <view class="scan-btn-wrapper">
      <view class="scan-btn" @click="handleScan">
        <view class="scan-icon-circle">
          <view class="scan-qr-icon"></view>
        </view>
        <text class="scan-text">扫码</text>
      </view>
    </view>
    
    <!-- 右侧两个菜单 -->
    <view class="tab-item" :class="{ active: currentIndex === 2 }" @click="switchTab(2)">
      <view class="tab-icon-wrapper">
        <view class="tab-icon">
          <view class="icon-device"></view>
        </view>
      </view>
      <text class="tab-text">设备</text>
    </view>
    
    <view class="tab-item" :class="{ active: currentIndex === 3 }" @click="switchTab(3)">
      <view class="tab-icon-wrapper">
        <view class="tab-icon">
          <view class="icon-my"></view>
        </view>
      </view>
      <text class="tab-text">我的</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { logger } from '@/utils/logger';

const tabPages = [
  '/pages/index/index',
  '/pages/orders/list',
  '/pages/device/list',
  '/pages/my/my'
];

const currentIndex = ref(0);

onMounted(() => {
  // 获取当前页面路径
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentPath = '/' + currentPage.route;
  
  const index = tabPages.indexOf(currentPath);
  if (index !== -1) {
    currentIndex.value = index;
  }
});

const switchTab = (index: number) => {
  if (currentIndex.value === index) return;
  
  currentIndex.value = index;
  uni.switchTab({
    url: tabPages[index]
  });
};

const handleScan = () => {
  uni.scanCode({
    scanType: ['qrCode', 'barCode'],
    success: (res) => {
      logger.log('扫码结果:', res.result);
      // 解析设备ID
      let deviceId = '';
      
      // 尝试从URL中解析设备ID
      const urlPattern = /\/([A-Z0-9]+)(\?|$)/;
      const match = res.result.match(urlPattern);
      if (match && match[1]) {
        deviceId = match[1];
      } else {
        // 尝试解析JSON
        try {
          const qrData = JSON.parse(res.result);
          deviceId = qrData.deviceId || res.result;
        } catch {
          deviceId = res.result;
        }
      }
      
      if (deviceId) {
        // 跳转到设备详情页或上货页面
        uni.navigateTo({
          url: `/pages/device/detail?id=${deviceId}&mode=stock`
        });
      } else {
        uni.showToast({
          title: '无法识别设备',
          icon: 'none'
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: '扫码取消',
        icon: 'none'
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: $bg-color-card;
  border-top: 1rpx solid $border-color;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding-top: 8rpx;
  transition: all 0.2s;
}

.tab-icon-wrapper {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rpx;
}

.tab-icon {
  width: 44rpx;
  height: 44rpx;
  position: relative;
}

/* 首页图标 - 房子（线框） */
.icon-home {
  width: 32rpx;
  height: 32rpx;
  position: relative;
  margin: 0 auto;

  &::before {
    /* 屋顶 - 旋转正方形形成 ^ 形 */
    content: '';
    position: absolute;
    top: 2rpx;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    width: 18rpx;
    height: 18rpx;
    border-top: 2.5rpx solid $text-color-muted;
    border-right: 2.5rpx solid $text-color-muted;
  }

  &::after {
    /* 房屋主体 - 三边边框 */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24rpx;
    height: 16rpx;
    border-left: 2.5rpx solid $text-color-muted;
    border-right: 2.5rpx solid $text-color-muted;
    border-bottom: 2.5rpx solid $text-color-muted;
  }
}

/* 订单图标 - 文档（线框） */
.icon-order {
  width: 28rpx;
  height: 32rpx;
  border: 2.5rpx solid $text-color-muted;
  border-radius: 3rpx;
  position: relative;
  margin: 0 auto;

  &::before {
    /* 折角 */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 8rpx solid transparent;
    border-bottom: 8rpx solid $bg-color-card;
  }

  &::after {
    /* 文字横线 */
    content: '';
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 16rpx;
    height: 2.5rpx;
    background: $text-color-muted;
    border-radius: 1rpx;
    box-shadow: 0 6rpx 0 $text-color-muted;
  }
}

/* 设备图标 - 显示器（线框） */
.icon-device {
  width: 32rpx;
  height: 28rpx;
  position: relative;
  margin: 0 auto;

  &::before {
    /* 屏幕 */
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28rpx;
    height: 20rpx;
    border: 2.5rpx solid $text-color-muted;
    border-radius: 3rpx;
  }

  &::after {
    /* 底座 */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18rpx;
    height: 2.5rpx;
    background: $text-color-muted;
    border-radius: 1rpx;
  }
}

/* 我的图标 - 人物（线框） */
.icon-my {
  width: 28rpx;
  height: 32rpx;
  position: relative;
  margin: 0 auto;

  &::before {
    /* 头部 - 空心圆 */
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14rpx;
    height: 14rpx;
    border: 2.5rpx solid $text-color-muted;
    border-radius: 50%;
  }

  &::after {
    /* 身体 - 半圆弧 */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24rpx;
    height: 12rpx;
    border: 2.5rpx solid $text-color-muted;
    border-radius: 14rpx 14rpx 0 0;
    border-bottom: none;
  }
}

.tab-text {
  font-size: 20rpx;
  color: $text-color-primary;
  transition: all 0.2s;
}

.tab-item.active .tab-text {
  color: $primary-color;
  font-weight: 600;
}

/* 激活状态图标颜色 */
.tab-item.active .icon-home::before {
  border-top-color: $primary-color;
  border-right-color: $primary-color;
}

.tab-item.active .icon-home::after {
  border-left-color: $primary-color;
  border-right-color: $primary-color;
  border-bottom-color: $primary-color;
}

.tab-item.active .icon-order {
  border-color: $primary-color;
}

.tab-item.active .icon-order::after {
  background: $primary-color;
  box-shadow: 0 6rpx 0 $primary-color;
}

.tab-item.active .icon-device::before {
  border-color: $primary-color;
}

.tab-item.active .icon-device::after {
  background: $primary-color;
}

.tab-item.active .icon-my::before {
  border-color: $primary-color;
}

.tab-item.active .icon-my::after {
  border-color: $primary-color;
}

/* 扫码按钮 */
.scan-btn-wrapper {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-btn {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scan-icon-circle {
  width: 80rpx;
  height: 80rpx;
  min-width: 80rpx;
  min-height: 80rpx;
  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 20rpx rgba(255, 193, 7, 0.4);
  margin-bottom: 4rpx;
  transition: all 0.2s;
  flex-shrink: 0;
}

.scan-btn:active .scan-icon-circle {
  transform: scale(0.92);
  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.3);
}

.scan-qr-icon {
  width: 36rpx;
  height: 36rpx;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 14rpx;
    height: 14rpx;
    border: 3rpx solid $bg-color-card;
    border-radius: 3rpx;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14rpx;
    height: 14rpx;
    border: 3rpx solid $bg-color-card;
    border-radius: 3rpx;
  }
}

.scan-text {
  font-size: 18rpx;
  color: $text-color-primary;
  font-weight: 500;
}
</style>
