<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table class="table-box" :data="tableData" style="width: 100%;">
        <el-table-column label="Pay cycle" prop="PERIOD_NUM.value" width="100"><!-- 期数 -->
        </el-table-column>
        <el-table-column label="Welcome Bonus" prop="BONUS_TG.value" width="170" v-if="welcomeBonusSwitch === 1"><!-- 销售奖金 -->
        </el-table-column>
        <el-table-column label="Team Bonus" prop="ORI_BONUS_QY.value" width="170" v-if="teamBonusSwitch === 1"><!-- 绩效奖 -->
        </el-table-column>
        <el-table-column label="Director Bonus" prop="ORI_BONUS_BS.value" width="170"><!-- 蓝星奖金/管理奖 -->
        </el-table-column>
        <el-table-column label="Quarterly Bonus" prop="ORI_BONUS_QUARTER.value" width="170"><!-- 季度分红 -->
        </el-table-column>
        <el-table-column label="Stockist Commission" prop="BONUS_BD.value" width="170" v-if="stockistCommissionSwitch === 1"><!-- 服务中心 -->
        </el-table-column>
        <!-- <el-table-column label="Total Bonus" prop="BONUS_TOTAL.value" width="170"></el-table-column> --><!-- 合计 -->
        <el-table-column label="Actual Bonus" prop="BONUS_REAL.value" width="170"><!-- 实发 -->
        </el-table-column>
        <el-table-column >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click.native="showFlow(scope.row.PERIOD_NUM.value)">View<!-- 查看全部 --></el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <el-dialog :title="`Period ${periodNum} bonus`" :visible.sync="dialogFlowVisible" width="60%"><!-- 100期奖金 -->
        <el-descriptions title="" class="bonus-list" v-if="newData" :column="2" border size="medium" style="width: 100%">
          <el-descriptions-item class="bonus-item" label="Member Code">{{newData.USER_NAME.value}}</el-descriptions-item><!-- 用户编号 -->
          <el-descriptions-item class="bonus-item" label="Pay Cycle">{{newData.PERIOD_NUM.value}}</el-descriptions-item><!-- 期数 -->
          <el-descriptions-item class="bonus-item" label="Member Level">{{newData.LAST_DEC_LV.value}}</el-descriptions-item><!-- 会员等级 -->
          <el-descriptions-item class="bonus-item" label="Whether Active">{{ newData.IS_ACTIVE.value === 1 ? 'Yes' : 'No' }}</el-descriptions-item><!-- 是否活跃 -->
          <el-descriptions-item class="bonus-item" label="Latest Director">{{newData.LAST_EMP_LV.value}}</el-descriptions-item><!-- 会员管理星级 -->
          <el-descriptions-item class="bonus-item" label="Latest Crown">{{newData.LAST_CROWN_LV.value}}</el-descriptions-item><!-- 会员皇冠星级 -->
          <el-descriptions-item class="bonus-item" label="Director PGS Performance">{{newData.DIRECTOR_BONUS_PGS.value}}</el-descriptions-item><!-- 管理奖个人小组业绩 -->
          <el-descriptions-item class="bonus-item" label="Director Bonus">{{newData.ORI_BONUS_BS.value}}</el-descriptions-item><!-- 蓝星奖金/管理奖 -->
          <el-descriptions-item class="bonus-item" label="Welcome Bonus" v-if="newData.ORI_BONUS_TG_SWITCH === 1">{{newData.ORI_BONUS_TG.value}}</el-descriptions-item><!-- 销售奖金 -->
          <el-descriptions-item class="bonus-item" label="Team Bonus" v-if="newData.ORI_BONUS_QY_SWITCH === 1">{{newData.ORI_BONUS_QY.value}}</el-descriptions-item><!-- 绩效奖 -->
          <el-descriptions-item class="bonus-item" label="Quarterly Bonus">{{newData.ORI_BONUS_QUARTER.value}}</el-descriptions-item><!-- 季度分红 -->
          <el-descriptions-item class="bonus-item" label="Stockist Commission" v-if="newData.BONUS_BD_SWITCH === 1">{{newData.BONUS_BD.value}}</el-descriptions-item><!-- 服务中心 -->
          <el-descriptions-item class="bonus-item" label="Total Bonus">{{newData.BONUS_TOTAL.value}}</el-descriptions-item><!-- 合计 -->
          <el-descriptions-item class="bonus-item" label="Actual bonus">{{newData.BONUS_REAL.value}}</el-descriptions-item><!-- 实发奖金 -->
          <el-descriptions-item class="bonus-item" label="Left newly increased performance">{{newData.PV_1L.value}}</el-descriptions-item><!-- 一市场新增 -->
          <el-descriptions-item class="bonus-item" label="Left surplus performance">{{newData.SURPLUS_1L.value}}</el-descriptions-item><!-- 一市场结余 -->
          <el-descriptions-item class="bonus-item" label="Right newly increased performance">{{newData.PV_2L.value}}</el-descriptions-item><!-- 二市场新增 -->
          <el-descriptions-item class="bonus-item" label="Right surplus performance">{{newData.SURPLUS_2L.value}}</el-descriptions-item><!-- 二市场结余 -->
        </el-descriptions>
    </el-dialog>
  </div>
</template>

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

  export default {
    name: 'bonus_other',
    components: {},
    mounted() {
      this.getData()
    },
    data() {
      return {
        allData: null,
        tableKey: null,
        newData: null,
        loading: true,
        tableData: null,
        dialogFlowVisible:false,
        periodNum: '',
        dialogLoading: false,
        tool: tool,
        welcomeBonusSwitch: false,
        teamBonusSwitch: false,
        stockistCommissionSwitch: false,
      }
    },
    methods: {
      getData() {
        let vueObj = this
        vueObj.loading = true
        network.getData('bonus/other').then(response => {
          vueObj.tableData = response.tableData
          vueObj.tableKey = response.tableKey
          vueObj.welcomeBonusSwitch = response.bonusSwitch.welcomeBonusSwitch
          vueObj.teamBonusSwitch = response.bonusSwitch.teamBonusSwitch
          vueObj.stockistCommissionSwitch = response.bonusSwitch.stockistCommissionSwitch
          vueObj.loading = false
        }).catch(response => {
          vueObj.loading = false
        })
      },
      showFlow(periodNum){
        let vueObj = this
        this.$message({
          message: 'Getting data',
          type: 'info'
        })
        this.periodNum = periodNum
        vueObj.dialogFlowVisible = true
        vueObj.dialogLoading = true
        this.getFlowData()
      },
      getFlowData() {
        let vueObj = this
        network.getData('bonus/new',{periodNum: vueObj.periodNum}).then(response => {
          vueObj.newData = response
          vueObj.dialogLoading = false
        }).catch(response => {
          vueObj.dialogLoading = 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:after{content: '';clear: both;display: table;}
  .bonus-list{width: 600px;}
  .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;}
  .bonus-item{text-align: center;}
  .bonus-item:hover{background: #f5f5f5;cursor: pointer;}
</style>
