 <script setup lang="ts">
import { ref, computed } from 'vue'
import AsinQueryPanel from './AsinQueryPanel.vue'
import GenmaiSpiritPanel from './GenmaiSpiritPanel.vue'
import TrademarkCheckPanel from './TrademarkCheckPanel.vue'
const props = defineProps<{
  isVip: boolean
}>()
const currentTab = ref<'asin' | 'genmai' | 'trademark'>('asin')
const asinPanelRef = ref<any>(null)
const trademarkPanelRef = ref<any>(null)
const currentPage = ref(1)
const pageSize = ref(15)
const localProductData = ref<any[]>([])
const trademarkData = ref<any[]>([])
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  if (currentTab.value === 'trademark') {
    return trademarkData.value.slice(start, end)
  }
  return localProductData.value.slice(start, end)
})
const progressVisible = computed(() => {
  return asinPanelRef.value?.progressVisible || false
})
const progressPercentage = computed(() => {
  if (currentTab.value === 'trademark') {
    return trademarkPanelRef.value?.trademarkProgress || 0
  }
  return asinPanelRef.value?.progressPercentage || 0
})

const loading = computed(() => {
  if (currentTab.value === 'asin') {
    return asinPanelRef.value?.loading || false
  } else if (currentTab.value === 'trademark') {
    return trademarkPanelRef.value?.trademarkLoading || false
  }
  return false
})

function handleAsinDataUpdate(data: any[]) {
  localProductData.value = data
}

function handleTrademarkDataUpdate(data: any[]) {
  trademarkData.value = data
}

function isOutOfStock(product: any) {
  const sellerEmpty = !product?.seller || product.seller === '无货'
  const priceEmpty = !product?.price || product.price === '无货'
  return sellerEmpty || priceEmpty
}

function handleSizeChange(size: number) {
  pageSize.value = size
  currentPage.value = 1
}

function handleCurrentChange(page: number) {
  currentPage.value = page
}
</script>

<template>
  <div class="amazon-root">
    <div class="main-container">
      <!-- 顶部标签栏 -->
      <div class="top-tabs">
        <div :class="['tab-item', { active: currentTab === 'asin' }]" @click="currentTab = 'asin'">
          <img src="/icon/asin.png" alt="ASIN查询" class="tab-icon" />
          <span class="tab-text">ASIN查询</span>
        </div>  
        <div :class="['tab-item', { active: currentTab === 'genmai' }]" @click="currentTab = 'genmai'">
          <img src="/icon/anjldk.png" alt="跟卖精灵" class="tab-icon" />
          <span class="tab-text">跟卖精灵</span>
        </div>
        <div :class="['tab-item', { active: currentTab === 'trademark' }]" @click="currentTab = 'trademark'">
          <img src="/icon/plsb.png" alt="批量筛查商标" class="tab-icon" />
          <span class="tab-text">批量筛查商标</span>
        </div>
      </div>
      
      <div class="body-layout">
        <!-- 左侧步骤栏 -->
        <aside :class="['steps-sidebar', currentTab === 'trademark' ? 'wide' : 'narrow']">
          <div class="steps-title">操作流程：</div>
          
          <!-- ASIN查询面板 -->
          <AsinQueryPanel 
            v-if="currentTab === 'asin'" 
            ref="asinPanelRef"
            :is-vip="isVip"
            @update-data="handleAsinDataUpdate"
          />
          
          <!-- 跟卖精灵面板 -->
          <GenmaiSpiritPanel 
            v-if="currentTab === 'genmai'" 
            :is-vip="isVip"
          />
          
          <!-- 商标筛查面板 -->
          <TrademarkCheckPanel 
            v-if="currentTab === 'trademark'" 
            ref="trademarkPanelRef"
            :is-vip="isVip"
            @update-data="handleTrademarkDataUpdate"
          />
        </aside>

        <!-- 右侧主区域 -->
        <section class="content-panel">
          <!-- 数据显示区域 -->
          <div class="table-container">
            <div class="table-section">
              <!-- 表格上方进度条 -->
              <div v-if="progressVisible || (currentTab === 'trademark' && progressPercentage > 0)" class="progress-head">
                <div class="progress-section">
                  <div class="progress-box">
                    <div class="progress-container">
                      <div class="progress-bar">
                        <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
                      </div>
                      <div class="progress-text">{{ progressPercentage }}%</div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="table-wrapper">
                <!-- 跟卖精灵内容 -->
                <div v-if="currentTab === 'genmai'" class="genmai-content">
                  <div class="genmai-image-wrapper">
                    <img src="/image/img_1.png" alt="跟卖精灵提示" class="genmai-image" draggable="false" />
                  </div>
                  
                  <div class="genmai-info-boxes">
                    <div class="info-box">
                      <div class="info-title">功能说明</div>
                      <div class="info-text">通过此功能，可以实现多设备使用同一个跟卖精灵账号。</div>
                    </div>
                    
                    <div class="info-box">
                      <div class="info-title">需要注意</div>
                      <div class="info-text">必须安装Chrome浏览器。启动此服务会清除Chrome全部进程。</div>
                    </div>
                    
                    <div class="info-box">
                      <div class="info-title">收费标准</div>
                      <div class="info-text">目前免费试用3天，付费会员无使用限制。<a href="#" class="info-link">点击付费会员</a></div>
                    </div>
                  </div>
                </div>
                
                <!-- ASIN查询表格 -->
                <table v-if="currentTab === 'asin'" class="table">
                  <thead>
                  <tr>
                    <th>ASIN</th>
                    <th>卖家/配送方</th>
                    <th>当前售价</th>
                  </tr>
                  </thead>
                  <tbody>
                    <tr v-for="row in paginatedData" :key="row.asin">
                      <td><span :class="{ 'asin-out': isOutOfStock(row) }">{{ row.asin }}</span></td>
                      <td>
                        <div class="seller-info">
                          <span class="seller">{{ row.seller || '无货' }}</span>
                          <span v-if="row.shipper && row.shipper !== row.seller" class="shipper">/ {{ row.shipper }}</span>
                        </div>
                      </td>
                      <td>
                        <span class="price">{{ row.price || '无货' }}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
                
                <!-- 商标筛查表格 -->
                <table v-if="currentTab === 'trademark'" class="table table-trademark">
                  <thead>
                  <tr>
                    <th>商标名称</th>
                    <th>状态</th>
                    <th>类别</th>
                    <th>权利人</th>
                    <th>到期日期</th>
                    <th>相似度</th>
                  </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(row, idx) in paginatedData" :key="idx">
                      <td><span class="trademark-name">{{ row.name }}</span></td>
                      <td>
                        <span :class="{
                          'status-registered': row.status === '已注册',
                          'status-risk': row.status === '近似风险',
                          'status-available': row.status === '可注册'
                        }">{{ row.status }}</span>
                      </td>
                      <td>{{ row.class }}</td>
                      <td class="truncate-cell">{{ row.owner }}</td>
                      <td>{{ row.expireDate }}</td>
                      <td>
                        <span v-if="row.similarity > 0" :class="{ 'similarity-high': row.similarity >= 80 }">
                          {{ row.similarity }}%
                        </span>
                        <span v-else>-</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div v-if="paginatedData.length === 0" class="empty-abs">
                <!-- 商标筛查状态显示 -->
                <div v-if="currentTab === 'trademark' && trademarkPanelRef?.queryStatus" class="empty-container">
                  <img 
                    :src="trademarkPanelRef.statusConfig[trademarkPanelRef.queryStatus].icon" 
                    :alt="trademarkPanelRef.statusConfig[trademarkPanelRef.queryStatus].title" 
                    :class="['status-image', { 'status-loading': trademarkPanelRef.queryStatus === 'inProgress' }]"
                  />
                  <div class="empty-title">{{ trademarkPanelRef.statusConfig[trademarkPanelRef.queryStatus].title }}</div>
                  <div v-if="trademarkPanelRef.statusConfig[trademarkPanelRef.queryStatus].desc" class="empty-desc">
                    {{ trademarkPanelRef.statusConfig[trademarkPanelRef.queryStatus].desc }}
                  </div>
                </div>
                <!-- 其他tab的加载状态 -->
                <div v-else-if="loading" class="empty-container">
                  <div class="spinner">⟳</div>
                  <div>加载中...</div>
                </div>
                <!-- 默认空状态 -->
                <div v-else class="empty-container">
                  <img src="/image/img.png" alt="暂无数据" class="empty-image" />
                  <div class="empty-text">暂无数据，请按左侧流程操作</div>
                </div>
              </div>
            </div>
            <div v-if="currentTab !== 'genmai'" class="pagination-fixed">
              <el-pagination
                :current-page="currentPage"
                :page-sizes="[15,30,50,100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="currentTab === 'trademark' ? trademarkData.length : localProductData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
.amazon-root { 
  position: absolute; 
  inset: 0; 
  background: #fff; 
  box-sizing: border-box; 
  overflow: hidden;
}
.main-container { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 12px; 
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
}

/* 顶部标签栏 */
.top-tabs { 
  display: flex; 
  gap: 8px; 
  margin-bottom: 12px; 
  flex-shrink: 0;
}
.tab-item { 
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 12px;
  gap: 8px;
  width: 140px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  background: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  flex: none;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #606266;
  font-size: 14px;
  font-weight: 400;
}
.tab-item:hover { 
  background: #f0f9ff; 
  border-color: #1677FF; 
  color: #1677FF; 
}
.tab-item.active { 
  background: #FFFFFF; 
  border: 1px solid #1677FF; 
  color: #1677FF; 
  cursor: default; 
}
.tab-icon { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
.tab-text { 
  line-height: 1; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  min-width: 0;
}

/* 账号列表样式（和斑马一致） */
.account-list { height: auto; }
.scroll-limit { max-height: 140px; }
.placeholder-box { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100px; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 8px; }
.placeholder-img { width: 80px; opacity: 0.9; }
.placeholder-tip { margin-top: 6px; font-size: 12px; color: #a8abb2; }
.avatar { width: 18px; height: 18px; border-radius: 50%; }
.acct-row { display: grid; grid-template-columns: 6px 18px 1fr auto; align-items: center; gap: 6px; width: 100%; }
.acct-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.status-dot.on { background: #22c55e; }
.status-dot.off { background: #f87171; }
.acct-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
.acct-item.selected { background: #eef5ff; box-shadow: inset 0 0 0 1px #d6e4ff; }
.acct-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: #111; font-size: 12px; }
.account-list::-webkit-scrollbar { width: 0; height: 0; }

.body-layout { 
  display: flex; 
  gap: 12px; 
  flex: 1; 
  overflow: hidden; 
  min-height: 0;
}
.steps-sidebar { 
  background: #fff; 
  border: 1px solid #ebeef5; 
  border-radius: 6px; 
  padding: 12px; 
  height: 100%; 
  flex-shrink: 0; 
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: width 0.3s ease;
}
.steps-sidebar.narrow { 
  width: 240px; 
}
.steps-sidebar.wide { 
  width: 280px; 
}
.steps-title { 
  font-size: 14px; 
  font-weight: 600; 
  color: #303133;  
  text-align: left; 
  flex-shrink: 0;
  margin-bottom: 8px;
}
.steps-flow { position: relative; }
.steps-flow:before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6); }
.flow-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; }
.flow-item .step-index { position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px; }
.flow-item:after { display: none; }
.step-card { border: none; border-radius: 0; padding: 0; background: transparent; }
.step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.title { font-size: 14px; font-weight: 600; color: #303133; text-align: left; }
.desc { font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5; }
.mini-hint { font-size: 12px; color: #909399; margin-top: 6px; }
.links { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.link { color: #409EFF; cursor: pointer; font-size: 12px; }
.sep { color: #dcdfe6; }
.content-panel { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  min-width: 0; 
  min-height: 0;
  overflow: hidden;
}

.left-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.dropzone { border: 1px dashed #c0c4cc; border-radius: 6px; padding: 16px; text-align: center; cursor: pointer; background: #fafafa; }
.dropzone:hover { background: #f6fbff; border-color: #409EFF; }
.dz-icon { font-size: 20px; margin-bottom: 6px; }
.dz-text { color: #303133; font-size: 13px; }
.dz-sub { color: #909399; font-size: 12px; }
.file-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f5f7fa; border-radius: 4px; font-size: 12px; color: #606266; margin-top: 6px; }
.file-chip .dot { width: 6px; height: 6px; background: #409EFF; border-radius: 50%; display: inline-block; }
.file-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.single-input.left { display: flex; gap: 8px; }
.action-buttons.column { display: flex; flex-direction: column; gap: 8px; }
.step-actions { margin-top: 8px; display: flex; gap: 8px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w50 { width: 100%; }
.form-row { margin-bottom: 10px; }
.label { display: block; font-size: 12px; color: #606266; margin-bottom: 6px; }

/* 统一左侧控件宽度与主色 */
.steps-sidebar :deep(.el-date-editor),
.steps-sidebar :deep(.el-range-editor.el-input__wrapper),
.steps-sidebar :deep(.el-input),
.steps-sidebar :deep(.el-input__wrapper),
.steps-sidebar :deep(.el-select) { width: 100%; box-sizing: border-box; }
.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
.w100 { width: 100%; }
.steps-sidebar :deep(.el-button + .el-button) { margin-left: 0; }
.import-section { margin-bottom: 10px; flex-shrink: 0; }
.import-controls { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.single-input { display: flex; align-items: center; gap: 8px; }
.text { width: 180px; height: 32px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s ease; }
.text:focus { border-color: #409EFF; }
.text:disabled { background: #f5f7fa; color: #c0c4cc; }
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.progress-section { margin: 0px 12px 0px 12px; }
.progress-head { margin-bottom: 8px; }
.progress-box { padding: 4px 0; }
.progress-container { display: flex; align-items: center; gap: 8px; }
.progress-bar { flex: 1; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease; }
.progress-text { font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right; }
.current-status { font-size: 12px; color: #606266; padding-left: 2px; }
.table-container { 
  display: flex; 
  flex-direction: column; 
  flex: 1; 
  min-height: 0; 
  overflow: hidden; 
}
.table-section { 
  flex: 1; 
  overflow: hidden; 
  position: relative; 
  background: #fff; 
  border: 1px solid #ebeef5; 
  border-radius: 4px; 
  display: flex; 
  flex-direction: column;
  min-height: 0;
}
.table-wrapper { 
  flex: 1; 
  min-height: 0;
  overflow: auto; 
  scrollbar-width: thin; 
  scrollbar-color: #c0c4cc transparent; 
}
.table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
.table-wrapper::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }
.table-wrapper:hover::-webkit-scrollbar-thumb { background: #a8abb2; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.table th { background: #f5f7fa; color: #909399; font-weight: 600; padding: 12px 8px; border-bottom: 2px solid #ebeef5; text-align: center; }
.table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; text-align: center; }
.table tbody tr:hover { background: #f9f9f9; }
.table th:nth-child(1), .table td:nth-child(1) { width: 33.33%; }
.table th:nth-child(2), .table td:nth-child(2) { width: 33.33%; }
.table th:nth-child(3), .table td:nth-child(3) { width: 33.33%; }
.asin-out { color: #f56c6c; font-weight: 600; }
.seller-info { display: flex; align-items: center; gap: 4px; justify-content: center; }
.seller { color: #303133; font-weight: 500; }
.shipper { color: #909399; font-size: 12px; }
.price { color: #e6a23c; font-weight: 600; }
.table-loading { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266; }
.spinner { font-size: 24px; animation: spin 1s linear infinite; margin-bottom: 8px; }
.inline-spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.pagination-fixed { flex-shrink: 0; padding: 8px 12px 0 12px; background: #fff; display: flex; justify-content: flex-end; }
.pagination-fixed :deep(.el-pager li.is-active) { border: 1px solid #1677FF; border-radius: 4px; color: #1677FF; background: #fff; }
.empty-tip { text-align: center; color: #909399; padding: 16px 0; }
.import-section[draggable], .import-section.drag-active { border: 1px dashed #409EFF; border-radius: 6px; }
.empty-container { text-align: center; }
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.empty-image { max-width: 200px; width: 100%; height: auto; margin-bottom: 16px; opacity: 0.8; }
.empty-text { font-size: 14px; color: #909399; }
.empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; }

/* 状态图标样式 */
.status-image { 
  max-width: 160px; 
  width: 100%;
  height: auto; 
  margin-bottom: 20px; 
  opacity: 0.9;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.status-loading {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}
.empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}
.empty-desc {
  font-size: 14px;
  color: #909399;
  line-height: 1.5;
}

/* 商标筛查相关样式 */
.table-trademark th:nth-child(1), .table-trademark td:nth-child(1) { width: 15%; }
.table-trademark th:nth-child(2), .table-trademark td:nth-child(2) { width: 12%; }
.table-trademark th:nth-child(3), .table-trademark td:nth-child(3) { width: 18%; }
.table-trademark th:nth-child(4), .table-trademark td:nth-child(4) { width: 25%; }
.table-trademark th:nth-child(5), .table-trademark td:nth-child(5) { width: 15%; }
.table-trademark th:nth-child(6), .table-trademark td:nth-child(6) { width: 15%; }

.trademark-name { font-weight: 600; color: #303133; }
.truncate-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.status-registered { color: #67c23a; font-weight: 500; }
.status-risk { color: #f56c6c; font-weight: 500; }
.status-available { color: #409EFF; font-weight: 500; }

.similarity-high { color: #f56c6c; font-weight: 600; }

.dz-el-icon { font-size: 18px; margin-bottom: 4px; color: #909399; }

/* 跟卖精灵内容样式 */
.genmai-content { 
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: space-between; 
  height: 100%;
}
.genmai-image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.genmai-image { 
  max-width: 100%;
  max-height: 370px;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.genmai-info-boxes {
  box-sizing: border-box;
  display: flex;
  text-align: left;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 0px;
  gap: 10px;
  width: 90%;
  max-width: 872px;
  height: 200rpx;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.info-box {
  flex: 1;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.info-box:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.info-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}
.info-text {
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}
.info-link {
  color: #1677FF;
  text-decoration: none;
}
.info-link:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .steps-sidebar.narrow { 
    width: 220px; 
  }
  /* wide保持280px不变 */
  .tab-item {
    width: 120px;
    padding: 0px 8px;
  }
}

@media (max-width: 1024px) {
  .steps-sidebar.narrow { 
    width: 200px; 
  }
  .steps-sidebar.wide { 
    width: 260px; 
  }
  .genmai-info-boxes {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .body-layout {
    flex-direction: column;
  }
  .steps-sidebar.narrow,
  .steps-sidebar.wide { 
    width: 100%; 
    max-height: 300px;
  }
  .tab-item {
    width: 100px;
    font-size: 13px;
  }
}
</style>

<script lang="ts">
export default {
  name: 'AmazonDashboard',
}
</script>
