
<template>
  <el-tabs v-model="showType" @tab-click="handleTabClick" class="parent-tabs" >
    <el-tab-pane label="每日订单" :name="1" />
    <el-tab-pane label="结帐单" :name="2" />
  </el-tabs>
  <div>
    <dailybill :merchantId="id" :isDetail="isDetail" v-if="showType === 1"/>
    <shopsettlement :merchantId="id" :isDetail="isDetail" v-if="showType === 2"/>
  </div>
</template>

<script setup lang="ts">
  import { TabsPaneContext } from 'element-plus'
  import dailybill from '@/views/system/distri/dailybill/index.vue';
  import shopsettlement from '@/views/system/distri/shopsettlement/index.vue';
  const props = defineProps({
    id: {
      type: Number,
      default: 0
    },
  });
  const showType = ref(1)
  const handleTabClick = (tab: TabsPaneContext) => {
    showType.value = tab.paneName as number
  }
  // console.log(props)
</script>
<style scoped>
.parent-tabs {
  width: 150px;
  margin-bottom: 10px;
}

::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

::v-deep .el-tabs__header {
  margin: 0;
}

::v-deep .el-tabs__active-bar {
  background-color: unset;
}

::v-deep .el-tabs__item {
  padding: 0 6px !important;
  margin: 0 6px;
  box-sizing: border-box;
}

::v-deep .el-tabs__item.is-active {
  color: var(--el-color-primary);
  border-bottom: 2px solid var(--el-color-primary);
}
</style>