<template>
  <div class="app-container">
    <div class="u-m-10 bg-fff u-p-20">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="店铺信息" name="1"></el-tab-pane>
        <el-tab-pane label="安全设置" name="4"></el-tab-pane>
        <el-tab-pane label="跳转小程序" name="6" v-if="shopId == 1"></el-tab-pane>
        <el-tab-pane label="通知中心" name="7"></el-tab-pane>
        <el-tab-pane label="客服设置" name="8"></el-tab-pane>
      </el-tabs>
      <shopInfo v-if="activeName == 1" />
      <safe v-if="activeName == 4" />
      <notifications v-if="activeName == 7" />
      <!-- <goxcx v-if="activeName == 6" />-->
      <contactSetting v-if="activeName == 8" />
    </div>
  </div>
</template>

<script setup>
import shopInfo from "./components/shopInfo.vue";
import safe from "./components/safe.vue";
import notifications from "./components/notifications.vue";
import contactSetting from "./components/contactSetting.vue";

const state = reactive({
  activeName: "1",
  shopId: localStorage.getItem("shopId"),
});
const { activeName, shopId } = toRefs(state);
</script>