<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="yewumoshi" label="业务模式" />
        <q-tab name="field" label="客户字段" />
        <q-tab name="label" label="标签" />
        <q-tab name="clue" label="线索分配规则" />
        <q-tab name="phase" label="客户阶段" />
        <q-tab name="operation" label="客户操作" />
      </q-tabs>
      <div class="container fit">
        <customer-Field v-if="tab == 'field'"></customer-Field>
        <clue-rule v-if="tab == 'clue'"></clue-rule>
        <customer-phase v-if="tab == 'phase'"></customer-phase>
        <customerlabel v-if="tab == 'label'"></customerlabel>
        <CustomerOperation v-if="tab == 'operation'"></CustomerOperation>
      </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 customerlabel from './components/customerlabel.vue'
import CustomerOperation from "./components/CustomerOperation.vue"
import router from '@/router/index'

import {
  defineComponent,
  ref
} from 'vue'

export default defineComponent({

  components: {
    customerField,
    clueRule,
    customerPhase,
    customerlabel,
    CustomerOperation
  },
  setup() {
    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>