<template>
  <div class="mainContentBox">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="齐套叫料" name="first">
        <div class="contentBox">
          <CompleteSuit />
        </div>
      </el-tab-pane>
      <!--      <el-tab-pane label="未齐套叫料" name="second">-->
      <!--        <div class="contentBox">-->
      <!--          <InCompleteSuit />-->
      <!--        </div>-->
      <!--      </el-tab-pane>-->
      <el-tab-pane label="零星叫料" name="third">
        <div class="contentBox">
          <Desperse />
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="call-history">
      <svg-icon icon-class="jiaoliaolishi" size="80" @click="showHistory" />
    </div>
    <CallHistory ref="callHistoryRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import CompleteSuit from "@/views/pro-operation/call-materiel/complete-suit.vue";
import Desperse from "@/views/pro-operation/call-materiel/desperse.vue";
import CallHistory from "@/views/pro-operation/call-materiel/components/call-history.vue";

const activeName = ref("first");

const callHistoryRef = ref<InstanceType<typeof CallHistory>>();
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const showHistory = () => {
  callHistoryRef.value?.showDrawer();
};
</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 - 225px);
  overflow-y: auto;
}

.call-history {
  position: fixed;
  top: 80px;
  right: 20px;
  height: 80px;
  width: 80px;
  font-size: 24px;
}
</style>
