<template>
  <div class="page card h-100 flex-gap-10 overflow-hidden flex">
    <div class="status-container">
      <div
        class="status-item"
        :class="{ 'is-active': currentStatus === 'sharedInventory' }"
        @click="handleStatusClick('sharedInventory')"
      >
        <span>共享库存设置</span>
      </div>
    </div>

    <div class="content-container flex-1 flex-column overflow-hidden">
      主要内容
    </div>
  </div>
</template>
<script lang="ts" setup>
const currentStatus = ref('sharedInventory')
const handleStatusClick = (status: string) => {
  currentStatus.value = status
}
</script>
<style scoped lang="scss">
.status-container {
  width: 160px;
  .status-item {
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    cursor: pointer;
    padding-left: 18px;
    &:hover {
      background-color: #f5f7fa;
    }
    &.is-active {
      background-color: #ecf5ff;
      color: #409eff;
      font-weight: 500;
    }
  }
}
</style>
