<template>
  <div class="q-pa-md">
    <q-tabs
      v-model="tabs"
      active-color="primary"
      align="left"
      style="width:400px;"
    >
      <q-tab :name="1" label="操作日志" />
      <q-tab :name="2" label="客户" />
      <q-tab :name="3" label="订单" />
      <q-tab :name="4" label="返佣" />
      <q-tab :name="5" label="幸福存折" />
    </q-tabs>
    <div class="q-mb-lg">
      <log :Id="Id" v-if="tabs === 1"></log>
      <customer :Id="Id" v-if="tabs === 2"></customer>
      <order :Id="Id" v-if="tabs === 3"></order>
      <rakeback :Id="Id" v-if="tabs === 4"></rakeback>
      <passbook :Id="Id" v-if="tabs === 5"></passbook>
    </div>
  </div>
</template>
<script>
import log from "./log.vue";
import customer from "./customer";
import order from "./order";
import passbook from "./passbook";
import rakeback from "./rakeback";
export default {
  components: { log, customer, order, rakeback, passbook },
  props: {
    Id: {
      type: Number,
      default: 0
    },
    tabId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      tabs: 1,
    };
  },
  mounted() {
    this.tabs=this.tabId
  },
};
</script>
