<style>
@import '../../assets/css/customerManage.css';
.SelectedAccount_box{
  display: flex;
  flex-wrap: wrap;
}
.SelectedAccount{
  margin: 5px;
}
.sub-header div.active{
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}
.sub-header div{
  padding: 20px 15px;
}
.sub-header{
  display: flex;
  padding: 0 20px;
  background-color: #fff;
}
</style>
<template>
  <div class="customerManage">
    <div class="sub-header">
      <div v-for="(item,index) in headerList" :key="index"
      :class="selectTitle==item.id?'active':''"
      @click="clickTitle(item)">{{item.title}}</div>
    </div>
    <!-- 客户来源 -->
    <customerSource v-if="selectTitle==1"></customerSource>
    <!-- 分配规则 -->
    <distributionRules v-if="selectTitle==2"></distributionRules>
  </div>
</template>
<script>
import customerSource from "./customerSource";
import distributionRules from "./distributionRules";
export default {
    components: {
      customerSource,
      distributionRules
    },
    data() {
        return {
            selectTitle:1,
            headerList:[
              {title:'客户来源',id:1},
              {title:'分配规则',id:2},
            ]
        };
    },
    mounted() {
        
    },
    beforeDestroy() {
        
    },
  methods: {
      
      clickTitle(item){
        this.selectTitle = item.id
      },
  }
};
</script>
