<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <HeaderCard name="分享配置" intro="商家可配置用户分享后可获得的奖励" icon="fxpz">
      </HeaderCard>
      <div class="row mt14">
        <tabHeader v-model="tabActiveIndex" :list="tabList" />
      </div>
      <div class="row mt14">
        <!-- 基础设置 -->
        <setting key="setting" name="setting" v-if="tabActiveIndex == 0" />
        <!-- 点餐页轮播图 -->
        <bannerSetting key="bannerSetting" name="bannerSetting" v-if="tabActiveIndex == 1" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HeaderCard from "../components/headerCard.vue";
import tabHeader from "../components/tabHeader.vue";
import setting from "./components/setting.vue";
import bannerSetting from "./components/banner_setting.vue";

const tabActiveIndex = ref(0)

const tabList = ref([
  {
    label: '基础设置',
    value: 0
  },
  {
    label: '点餐页轮播图',
    value: 1
  },
])
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}
</style>