<template>
  <div class="shop-box">
    <el-tabs v-model="activeName" class="shop-tabs" @tab-change="tabChange">
      <el-tab-pane label="线下区域" name="first">
        <offlineShop ref="first" />
      </el-tab-pane>
      <el-tab-pane label="小程序" name="second">
        <appletView ref="second" />
      </el-tab-pane>
    </el-tabs>
  </div>
 
</template>

<script setup>
  import { ref,getCurrentInstance } from "vue";
  import offlineShop from "./components/offlineShop.vue";
  import appletView from "./components/appletView.vue";
  const { proxy,ctx:that } = getCurrentInstance();

  const activeName = ref('first')

  const tabChange = (tab) => {
    proxy.$refs[tab].calculateTable();
  }
</script>
<style lang="scss" scoped>
.shop-box{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 16px;
}
</style>

<style lang="scss">
.shop-tabs{
  height: 100%;
  width: 100%;
  .el-tabs__content{
    height: calc(100% - 55px);
    .el-tab-pane{
      height: 100%;
      width: 100%;
    }
  }
}
</style>