<template>
  <div class="q-pa-md">
    <q-page padding style="background: #FFF;border-radius: 10px;" >
      <q-tabs
        v-model="tab"
        dense
        class="text-grey"
        align="left"
        active-color="primary"
        indicator-color="primary"
        narrow-indicator
        @update:model-value='gettabs'
      >
        <q-tab name="yewumoshi" label="业务模式" />
        <q-tab name="field" label="客户字段" />
        <q-tab name="label" label="标签" />
        <q-tab name="clue" label="线索分配规则" />
        <q-tab name="phase" label="客户阶段" />
      </q-tabs>
      <div>
        <customer-Field v-if="tab == 'field'"></customer-Field>
        <clue-rule v-if="tab == 'clue'"></clue-rule>
        <customer-phase v-if="tab == 'phase'"></customer-phase>
      </div>
    </q-page>
  </div>
</template>

<script lang="ts">
import customerField from './components/customerField.vue'
import clueRule from './components/clueRule.vue'
import customerPhase from './components/customerPhase.vue'
import router from '@/router/index'

import {
  defineComponent,
  ref
} from 'vue'

export default defineComponent({
 
  components: {
    customerField,
    clueRule,
    customerPhase
  },
  setup() {
    let tab = ref<string>('phase')
    if( router.currentRoute.value.query && router.currentRoute.value.query.type){
      tab.value = router.currentRoute.value.query.type as string
      
    }
    const gettabs = () => {
      // console.log(tab.value)
    }

    // if(props && props.type){
    // }
    return {
      tab,
      gettabs
    }

  }
})

</script>
