<template>
  <view class="custom-tabbar">
    <!-- 左侧两个菜单 -->
    <view class="tab-item" :class="{ active: currentIndex === 0 }" @click="switchTab(0)">
      <view class="tab-icon">
        <image :src="currentIndex === 0 ? '/static/tabbar/work-active.png' : '/static/tabbar/work.png'" mode="aspectFit" />
      </view>
      <text class="tab-text">工作台</text>
    </view>
    
    <view class="tab-item" :class="{ active: currentIndex === 1 }" @click="switchTab(1)">
      <view class="tab-icon">
        <image :src="currentIndex === 1 ? '/static/tabbar/order-active.png' : '/static/tabbar/order.png'" mode="aspectFit" />
      </view>
      <text class="tab-text">订单</text>
    </view>
    
    <!-- 中间扫码按钮 -->
    <view class="scan-btn-wrapper">
      <view class="scan-btn" @click="handleScan">
        <view class="scan-icon">
          <view class="scan-line"></view>
          <view class="scan-line vertical"></view>
        </view>
        <text class="scan-text">扫码上货</text>
      </view>
    </view>
    
    <!-- 右侧两个菜单 -->
    <view class="tab-item" :class="{ active: currentIndex === 2 }" @click="switchTab(2)">
      <view class="tab-icon">
        <image :src="currentIndex === 2 ? '/static/tabbar/device-active.png' : '/static/tabbar/device.png'" mode="aspectFit" />
      </view>
      <text class="tab-text">设备</text>
    </view>
    
    <view class="tab-item" :class="{ active: currentIndex === 3 }" @click="switchTab(3)">
      <view class="tab-icon">
        <image :src="currentIndex === 3 ? '/static/tabbar/my-active.png' : '/static/tabbar/my.png'" mode="aspectFit" />
      </view>
      <text class="tab-text">我的</text>
    </view>
  </view>
</template>

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

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) => {
      console.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: 100rpx;
  background: #ffffff;
  border-top: 1rpx solid #e2e8f0;
  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;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
}

.tab-icon {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.tab-text {
  font-size: 20rpx;
  color: #94a3b8;
  margin-top: 4rpx;
}

.tab-item.active .tab-text {
  color: #10b981;
  font-weight: 500;
}

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

.scan-btn {
  position: absolute;
  bottom: 16rpx;
  width: 100rpx;
  height: 100rpx;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.4);
}

.scan-btn:active {
  transform: scale(0.95);
  background: #059669;
}

.scan-icon {
  width: 36rpx;
  height: 36rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-line {
  position: absolute;
  width: 24rpx;
  height: 4rpx;
  background: #ffffff;
  border-radius: 2rpx;
}

.scan-line.vertical {
  width: 4rpx;
  height: 24rpx;
}

.scan-text {
  font-size: 18rpx;
  color: #ffffff;
  font-weight: 500;
  margin-top: 4rpx;
  white-space: nowrap;
}
</style>
