<template>
  <div class="mainContentBox">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="预齐套" name="first">
        <Transition name="tab">
          <div v-if="activeName == 'first'" class="contentBox">
            <First />
          </div>
        </Transition>
      </el-tab-pane>
      <el-tab-pane label="出库" name="second">
        <Transition name="tab">
          <div v-if="activeName === 'second'" class="contentBox">
            <StorageOut />
          </div>
        </Transition>
      </el-tab-pane>
      <el-tab-pane label="入库" name="third">
        <Transition name="tab">
          <div v-if="activeName == 'third'" class="contentBox">
            <StorageIn />
          </div>
        </Transition>
      </el-tab-pane>
      <el-tab-pane label="调仓" name="tiaocang">
        <Transition name="tab">
          <div v-if="activeName == 'tiaocang'" class="contentBox">
            <StorageChange />
          </div>
        </Transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import First from "./components/first.vue";
import StorageOut from "@/views/storage-out/index.vue";
import StorageIn from "@/views/storage-in/index.vue";
import { TabsPaneContext } from "element-plus";
import StorageChange from "@/views/storage-change/index.vue";

const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {};
</script>

<style lang="scss" scoped>
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  border: 0;
}

:deep(.el-tabs--card > .el-tabs__header) {
  height: 80px;
  border: 0;
  overflow: hidden;
  border-radius: 16px 16px 16px 16px;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  width: 290px;
  height: 80px;
  border-radius: 0;
  font-weight: 500;
  font-size: 24px;
  overflow: hidden;
  background: transparent;
  border-color: transparent;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  background: white;
  border-radius: 16px 16px 16px 16px;
  border-color: transparent;
  overflow: hidden;
}

.contentBox {
  height: calc(100vh - 199px);
}
</style>
