<template>
  <div class="q-pa-md">
    <q-page padding class="page"  :style-fn="myTweak(640)">
      <q-tabs
        v-model="tab"
        dense
        class="text-grey"
        align="left"
        active-color="primary"
        indicator-color="primary"
        narrow-indicator
      >
        <q-tab name="model" label="业务模式" />
        <q-tab name="field" label="客户字段" />
        <q-tab name="label" label="标签" />
        <q-tab name="clue" label="线索分配规则" />
        <q-tab name="laqun" label="拉群分配客人" />
        <q-tab name="phase" label="客户阶段" />
        <q-tab name="operation" label="客户操作" />
        <q-tab name="lib" label="客户库-公海" />
      </q-tabs>
      <div class="container fit">
        <businessModel v-if="tab == 'model'"></businessModel>
        <customer-Field v-if="tab == 'field'"></customer-Field>
        <clue-rule v-if="tab == 'clue'"></clue-rule>
        <laqundistribution v-if="tab == 'laqun'"></laqundistribution>
        <customer-phase v-if="tab == 'phase'"></customer-phase>
        <customerlabel v-if="tab == 'label'"></customerlabel>
        <CustomerOperation v-if="tab == 'operation'"></CustomerOperation>
        <CustomerLibrary v-if="tab == 'lib'"></CustomerLibrary>
      </div>
    </q-page>
  </div>
</template>

<script lang="ts">
import businessModel from './components/businessModel.vue'
import customerField from './components/customerField.vue'
import clueRule from './components/clueRule.vue'
import laqundistribution from './components/laqundistribution.vue'//拉群分配客人
import customerPhase from './components/customerPhase.vue'

import customerlabel from './components/customerlabel.vue'
import CustomerOperation from "./components/CustomerOperation.vue"
import CustomerLibrary from "./components/CustomerLibrary.vue"
import router from '@/router/index'
 import { useMeta } from 'quasar'
import {
  defineComponent,
  ref
} from 'vue'   

export default defineComponent({

  components: {
    businessModel,
    customerField,
    clueRule,
    customerPhase,
    customerlabel,
    CustomerOperation,
    CustomerLibrary,
    laqundistribution
  },
  setup() {
    useMeta({title: '客户设置'})
    let tab = ref<string>('field')
    if (router.currentRoute.value.query && router.currentRoute.value.query.type) {
      tab.value = router.currentRoute.value.query.type as string

    }
    let myTweak= (offset)=> {
      return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
    }
    return {
      tab,
      myTweak
    }

  }
})

</script>
<style lang="scss" scoped>
.page{
   background: #FFF;
   box-sizing: border-box;
   border-radius: 10px;
}
  .container{
    box-sizing: border-box;
    overflow: scroll;

  }
</style>