<style>
  @import '../../assets/css/customerManage.css';

  .SelectedAccount_box {
    display: flex;
    flex-wrap: wrap;
  }

  .SelectedAccount {
    margin: 5px;
    cursor: pointer;
  }

  .sub-header div.active {
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
  }

  .sub-header div {
    padding: 20px 15px;
    cursor: pointer;
  }

  .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>
    <!-- 排行统计配置 -->
    <rankConfig v-if="selectTitle==3"></rankConfig>
    <!-- 管理配置 -->
    <ManageConfiguration v-if="selectTitle==4"></ManageConfiguration>
  </div>
</template>
<script>
  import customerSource from "./customerSource";
  import distributionRules from "./distributionRules";
  import rankConfig from "./rankConfig";
  import ManageConfiguration from "./ManageConfiguration";
  export default {
    components: {
      customerSource,
      distributionRules,
      rankConfig,
      ManageConfiguration
    },
    data() {
      return {
        selectTitle: 4,
        headerList: [
          {
            title: '客户来源',
            id: 1
          },
          {
            title: '分配规则',
            id: 2
          },
          {
            title: '排行统计配置',
            id: 3
          },
          {
            title: '管理配置',
            id: 4
          },
        ]
      };
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {
      clickTitle(item) {
        this.selectTitle = item.id
      },
    }
  };
</script>