<template>
  <div v-loading="loading">
    <el-table
    border
    :data="userData"
    style="width: 100%"
    :cell-style="tableCellStyle"
    >
    <el-table-column label="个人情况">
      <el-table-column
      type="index"
      :index="indexMethod"
          width="60px"
          label=""
          >
        </el-table-column>
        <el-table-column
          prop="number"
          label="会员编号"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="会员姓名"
          >
        </el-table-column>
        <el-table-column
          prop="perf_status_name"
          label="状态"
          >
        </el-table-column>
        <el-table-column
          prop="user_perf"
          label="个人业绩"
          >
        </el-table-column>
         <el-table-column
          prop="team_perf"
          label="累计业绩"
          >
        </el-table-column>
         <el-table-column
          prop="total_perf"
          label="合计"
          >
        </el-table-column>
      </el-table-column>

  </el-table>

  <el-table
    border
    :data="tableData"
    style="width: 100%;margin-top:20px;"
    :cell-style="tableCellStyle"
   >
    <el-table-column label="团队情况">
      <el-table-column
      type="index"
      :index="indexMethod"
          width="60px"
          label=""
          >
        </el-table-column>
         <el-table-column
          prop="number"
          label="会员编号"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="会员姓名"
          >
        </el-table-column>
        <el-table-column
          class="dsdd"
          prop="perf_status_name"
          label="状态"
          >
        </el-table-column>
        <el-table-column
          prop="user_perf"
          label="个人业绩"
          >
        </el-table-column>
         <el-table-column
          prop="team_perf"
          label="累计业绩"
          >
        </el-table-column>
         <el-table-column
          prop="total_perf"
          label="合计"
          >
        </el-table-column>
      </el-table-column>

  </el-table>
  <el-descriptions  :column="2"  >
  <el-descriptions-item label="最新计算时间" >{{calcTime}}</el-descriptions-item>
</el-descriptions>
  </div>
</template>

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

export default {
  name: 'bonus_teams',
  components: {Pagination},
  mounted () {
    this.getData()
  },
  data () {
    return {
      calcTime: '',
      userData: [],
      tableData: [],
      allData: null,
      walletData: null,
      dealSwitch: null,
      loading: true,
      dialogFlowVisible: false,
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      walletType: 'bonus',
      walletName: '',
      dialogLoading: false,
      tool: tool,
      createAt: '',
      dealType: null,
      remark: '',
      dealTypes: []
    }
  },
  methods: {
    tableCellStyle ({row, column, rowIndex, columnIndex}) {
      // console.log(row,column,rowIndex,columnIndex)
      if (row.perf_status === '0' && columnIndex === 3) {
        return 'background-color:rgb(225, 25, 98);font-weight:bold'
      } else if (row.perf_status === '1' && columnIndex === 3) {
        return 'background-color:rgb(31, 156, 18);font-weight:bold'
      }
    },
    indexMethod (index) {
      return index + 1
    },
    getData () {
      let vueObj = this
      vueObj.loading = true
      network.getData('bonus/teams').then(response => {
        this.userData = response.user
        this.tableData = response.team
        this.calcTime = response.calcAt
        vueObj.loading = false
      }).catch(response => {
        vueObj.loading = false
      })
    },
    showFlow (walletType, walletName) {
      let vueObj = this
      this.$message({
        message: '正在获取数据',
        type: 'info'
      })
      this.walletType = walletType
      this.walletName = walletName
      vueObj.dialogFlowVisible = true
      vueObj.dialogLoading = true
      this.handleFilterClear()
    }
  }
}

</script>
<style scoped>
  .leo-filter {
    padding: 0 0 15px 0;
  }

  .leo-filter .filter-hidden {
    display: none;
  }

  .filter-item {
    margin-right: 10px;
  }

  @media (min-width: 768px) {
    .leo-filter {
    }

    .leo-filter .filter-item {
      display: inline-block;
      max-width: 200px;
    }

    .leo-filter .filter-item.filter-date-month-picker {
      display: inline-block;
      max-width: 220px;
    }

    .leo-filter .filter-item.filter-date-range-picker {
      display: inline-block;
      max-width: 380px;
    }

    .leo-filter .filter-item.filter-filter-btn {
      height: 38px;
      width: 80px;
    }

    .leo-filter .filter-hidden {
      display: none;
    }
  }
</style>
<style scoped>
.dialog-footer:after{content: '';
  clear: both;display: table;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
    /* color:rgb(225, 25, 98)   */
}
.el-descriptions {
  margin-top:20px;
}
/deep/ .el-descriptions-item__container {
  margin-top:10px;
}
/deep/ .el-descriptions-item__label.has-colon {
  margin-left:10px;
}
</style>
