<template>
  <div style="padding: 0 10px;background-color:#f7f7f7;">
    <div class="topPadding">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="业绩管理" name="first">
          <!-- 点击按钮栏 -->
          <div class="btnList">
            <el-radio-group v-model="radio1" @change="touchBtn">
              <el-radio-button label="1">分销订单</el-radio-button>
              <el-radio-button label="2">分销员业绩</el-radio-button>
              <el-radio-button label="3">分销方案</el-radio-button>
            </el-radio-group>
          </div>
          <Order v-if="radio1 ==='1' && activeName === 'first'" />
          <Humens v-if="radio1 === '2' && activeName === 'first'" />
          <Programme v-if="radio1 === '3' && activeName === 'first'" />
        </el-tab-pane>
        <el-tab-pane label="分销员" name="second">
          <!-- 点击按钮栏 -->
          <div class="btnList">
            <el-radio-group v-model="radio2" @change="touchBtns">
              <el-radio-button label="1">分销员列表</el-radio-button>
              <el-radio-button label="2">待审核信息</el-radio-button>
              <el-radio-button label="3">招募设置</el-radio-button>
            </el-radio-group>
          </div>
          <List v-if="radio2 ==='1' && activeName === 'second'" />
          <Msg v-if="radio2 === '2' && activeName === 'second'" />
          <Sys v-if="radio2 === '3' && activeName === 'second'" />
        </el-tab-pane>
        <el-tab-pane label="客户关系" name="third">
          <div class="btnList">
            <el-radio-group v-model="radio3" @change="touchBtn3">
              <el-radio-button label="1">关系查询</el-radio-button>
              <el-radio-button label="2">关系设置</el-radio-button>
            </el-radio-group>
          </div>
          <PopSearch v-if="radio3 ==='1' && activeName === 'third'" />
          <PopSys v-if="radio3 === '2' && activeName === 'third'" />
        </el-tab-pane>
        <!--<el-tab-pane label="推广设置" name="fourth">
          <div class="btnList">
            <el-radio-group v-model="radio4" @change="touchBtn4">
              <el-radio-button label="1">推广店铺</el-radio-button>
              <el-radio-button label="2">邀请下级</el-radio-button>
            </el-radio-group>
          </div>
          <ShopTen v-if="radio4 ==='1' && activeName === 'fourth'" />
          <Invite v-if="radio4 === '2' && activeName === 'fourth'" />
        </el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Order from './achievement/order'
import Humens from './achievement/humens'
import Programme from './achievement/programme'
import List from './personnel/list'
import Msg from './personnel/msg'
import Sys from './personnel/sys'
import PopSearch from './customer/popSearch'
import PopSys from './customer/popSys'
export default {
  components: {
    Order,
    Humens,
    Programme,
    List,
    Msg,
    Sys,
    PopSearch,
    PopSys
  },
  data() {
    return {
      activeName: 'first',
      radio1: '1',
      radio2: '1',
      radio3: '1',
      radio4: '4',
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    // 顶部切换
    handleClick(tab, event) {
      this.activeName = tab.name
      this.radio1 = '1'
      this.radio2 = '1'
      this.radio3 = '1'
      this.radio4 = '1'
    },
    // 查询
    onSubmit() {
    },
    touchBtn(index) {
      this.radio2 = index
    },
    touchBtns(index) {
      this.radio2 = index
    },
    touchBtn3(index) {
      this.radio3 = index
    },
    touchBtn4(index) {
      this.radio4 = index
    },

    // 表格选中
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.formParams.pageSize = val
      this.getAll(this.formParams)
    },
    handleCurrentChange(val) {
      this.formParams.page = val
      this.getAll(this.formParams)
    },
    // 查询
    search() {
      this.total = 1
      this.formParams.page = 1
      this.getAll(this.formParams)
    }
  }
}
</script>
<style lang="scss" scope>
@import url("../../styles/elDialog.scss");
.topPadding {
  padding: 0 20px 20px 20px;
  background-color:#fff;
}
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }
  .formSearch {
      display: flex;
      width: 100%;
      font-size: 14px;
      justify-content: space-between;
    }
</style>
