<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table class="table-box" :data="tableData" style="width: 100%;">
        <el-table-column label="Welcome Bonus" prop="BONUS_TG.value" v-if="welcomeBonusSwitch === 1"></el-table-column><!-- 销售奖金 -->
        <el-table-column label="Team Bonus" prop="ORI_BONUS_QY.value" v-if="teamBonusSwitch === 1"></el-table-column><!-- 绩效奖 -->
        <el-table-column label="Director Bonus" prop="ORI_BONUS_BS.value"></el-table-column><!-- 蓝星奖金/管理奖 -->
        <el-table-column label="Quarterly Bonus" prop="ORI_BONUS_QUARTER.value"></el-table-column><!-- 季度分红 -->
        <el-table-column label="Stockist Commission" prop="BONUS_BD.value" v-if="stockistCommissionSwitch === 1"></el-table-column><!-- 服务中心 -->
         <el-table-column label="Total Bonus" prop="BONUS_TOTAL.value"></el-table-column>  <!--合计-->
      </el-table>
    </div>
  </div>
</template>

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

  export default {
    name: 'historical-cumulative-bonus',
    components: {},
    mounted() {
      this.getData()
    },
    data() {
      return {
        loading: true,
        tableData: null,
        welcomeBonusSwitch: false,
        teamBonusSwitch: false,
        stockistCommissionSwitch: false,
      }
    },
    methods: {
      getData() {
        let vueObj = this
        vueObj.loading = true
        network.getData('bonus/historical-cumulative-bonus').then(response => {
          vueObj.tableData = response.tableData
          vueObj.welcomeBonusSwitch = response.bonusSwitch.welcomeBonusSwitch
          vueObj.teamBonusSwitch = response.bonusSwitch.teamBonusSwitch
          vueObj.stockistCommissionSwitch = response.bonusSwitch.stockistCommissionSwitch
          vueObj.loading = false
        }).catch(_ => {
           vueObj.loading = false
        })
      },
    }
  }
</script>
<style>
  .other-table-box .el-table__header-wrapper{display: none;}
  .other-table-box .el-table__body tr:hover>td{background-color: #fff!important;}
  .other-table-box .el-table__body tr td:not(:last-child):hover{background-color: #f5f5f5!important;}
  .bonus-list .bonus-item{float: left;width: 33.333%;background: #fff;height:36px;line-height:36px;border: 1px solid #ddd;margin: -1px 0 0 -1px;box-sizing: border-box;}
</style>
