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