<template>
  <div style="padding: 15px;">
    <el-tabs type="border-card" v-model="datas.activeName" @tab-click="handleClick">
      <el-tab-pane label="基本设置" name="BasicSettings">
        <BasicSettings v-if="datas.activeName == 'BasicSettings'" />
      </el-tab-pane>
      <el-tab-pane label="商品设置" name="ProductSettings">
        <ProductSettings v-if="datas.activeName == 'ProductSettings'" />
      </el-tab-pane>
      <el-tab-pane label="兑换记录" name="Exchangerecords">
        <Exchangerecords v-if="datas.activeName == 'Exchangerecords'" />
      </el-tab-pane>
      <el-tab-pane label="会员积分" name="Memberpoints">
        <Memberpoints v-if="datas.activeName == 'Memberpoints'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import BasicSettings from './pointsconfig/BasicSettings.vue'
import Exchangerecords from './pointsconfig/exchangerecords.vue'
import Memberpoints from './pointsconfig/Memberpoints.vue'
import ProductSettings from './pointsconfig/ProductSettings.vue'
let datas = reactive({
  activeName: "BasicSettings",

})
function handleClick(tab) {
  datas.activeName = tab.props.name;
}
</script>