<template>
  <div v-loading="loading">
    <div class="white-box">
      <div style="margin-bottom: 10px;">
        会员编号：
        <el-input v-model="filterForm.userName" size="mini" style="width:200px;"></el-input>
        深度：
        <el-input v-model="filterForm.deep" size="mini" style="width:60px;"></el-input>
        期数：
        <el-input v-model="filterForm.periodNum" size="mini" style="width:60px;"></el-input>
        <el-button type="primary" size="small" @click="handleFilter">确定</el-button>
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()">
        <el-table-column label="会员编号" prop="USER_NAME" width="150"></el-table-column>
        <el-table-column label="会员姓名" prop="REAL_NAME" width="110"></el-table-column>
        <el-table-column label="总网深度" prop="NETWORK_DEEP"></el-table-column>
        <el-table-column label="级别" prop="DEC_LV_NAME" width="110"></el-table-column>
        <el-table-column label="聘级" prop="EMP_LV_NAME" width="110"></el-table-column>
        <el-table-column label="团队人数" prop="CHILD_NUM"></el-table-column>
        <el-table-column label="区位" prop="LOCATION"></el-table-column>
        <el-table-column label="加入期数" prop="PERIOD_NUM" width="100"></el-table-column>
        <!--<el-table-column label="期新增业绩" prop="NEW_PERF" width="150"></el-table-column>-->
        <!--<el-table-column label="月业绩" prop="MONTH_PERF" width="150"></el-table-column>-->
        <!--<el-table-column label="一市场月业绩" prop="MONTH_PERF_1L" width="150"></el-table-column>-->
        <!--<el-table-column label="二市场月业绩" prop="MONTH_PERF_2L" width="150"></el-table-column>-->
        <!--<el-table-column label="三市场月业绩" prop="MONTH_PERF_3L" width="150"></el-table-column>-->
        <!--<el-table-column label="四市场月业绩" prop="MONTH_PERF_4L" width="150"></el-table-column>-->
        <!--<el-table-column label="五市场月业绩" prop="MONTH_PERF_5L" width="150"></el-table-column>-->
        <!--<el-table-column label="总网业绩" prop="TOTAL_PERF" width="150"></el-table-column>-->
        <!--<el-table-column label="一市场总网业绩" prop="TOTAL_PERF_1L" width="150"></el-table-column>-->
        <!--<el-table-column label="二市场总网业绩" prop="TOTAL_PERF_2L" width="150"></el-table-column>-->
        <!--<el-table-column label="三市场总网业绩" prop="TOTAL_PERF_3L" width="150"></el-table-column>-->
        <!--<el-table-column label="四市场总网业绩" prop="TOTAL_PERF_4L" width="150"></el-table-column>-->
        <!--<el-table-column label="五市场总网业绩" prop="TOTAL_PERF_5L" width="150"></el-table-column>-->
        <el-table-column label="省" prop="PROVINCE_NAME" width="110"></el-table-column>
        <el-table-column label="市" prop="CITY_NAME" width="110"></el-table-column>
        <el-table-column label="状态" prop="STATUS_NAME" width="110"></el-table-column>
        <el-table-column label="创建时间" width="170">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import store from '@/utils/vuexStore'
import baseInfo from '@/utils/baseInfo'
import Pagination from '@/components/Pagination'

export default {
  name: 'atlas_network-line',
  components: {Pagination},
  mounted () {
  },
  data () {
    return {
      allData: null,
      tableData: null,
      loading: false,
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      tool: tool,
      baseDecLevels: baseInfo.decLevels(),
      baseEmpLevels: baseInfo.empLevels(),
      filterForm: {
        userName: null,
        deep: null,
        periodNum: null,
      },
    }
  },
  methods: {
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    handleFilter () {
      this.getData(1, this.pageSize)
    },
    getData (page, pageSize) {
      let obj = this
      network.getPageData(this, 'atlas/network-line', page, pageSize, this.filterForm, function (response) {
        obj.allData = response
      })
    },
  }
}

</script>

<style scoped>

</style>