<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="130"><!-- 销售奖金 -->
        </el-table-column>
<!--        <el-table-column label="业绩奖金" prop="ORI_BONUS_QY.value">&lt;!&ndash; 业绩奖金 &ndash;&gt;-->
<!--        </el-table-column>-->
        <el-table-column label="Director Bonus" prop="ORI_BONUS_BS_MNT.value" width="125"><!-- 管理奖金 -->
        </el-table-column>
        <el-table-column label="Team Bonus" prop="ORI_BONUS_BS_ABBR.value" width="120"><!-- 绩效奖金 -->
        </el-table-column>
        <el-table-column label="quarterly bonus" prop="ORI_BONUS_QUARTER.value" width="190px"><!-- 季度分红 -->
        </el-table-column>
<!--        <el-table-column label="Travel" prop="BONUS_TOURISM.value">&lt;!&ndash; 旅游奖 &ndash;&gt;-->
<!--        </el-table-column>-->
<!--        <el-table-column label="Car/Villa" prop="BONUS_GARAGE.value">&lt;!&ndash; 豪宅奖 &ndash;&gt;-->
<!--        </el-table-column>-->
        <el-table-column label="Total bonus" prop="BONUS_TOTAL.value" width="100"><!-- 合计 -->
        </el-table-column>
        <el-table-column label="Actual bonus" prop="BONUS_REAL.value" width="110"><!-- 实发 -->
        </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="`${periodNum}期奖金`" :visible.sync="dialogFlowVisible" width="70%">

        <el-descriptions title="" class="bonus-list" v-if="newData" :column="2" border>
          <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="Welcome Bonus">{{newData.ORI_BONUS_TG.value}}</el-descriptions-item><!-- 销售奖金 -->
<!--          <el-descriptions-item class="bonus-item" label="业绩奖金">{{newData.ORI_BONUS_QY.value}}</el-descriptions-item>&lt;!&ndash; 业绩奖金 &ndash;&gt;-->
          <el-descriptions-item class="bonus-item" label="Director Bonus">{{newData.ORI_BONUS_BS_MNT.value}}</el-descriptions-item><!-- 管理奖金 -->
          <el-descriptions-item class="bonus-item" label="Team Bonus">{{newData.ORI_BONUS_BS_ABBR.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="Travel">{{newData.BONUS_TRAVEL.value}}</el-descriptions-item>&lt;!&ndash; 旅游奖 &ndash;&gt;-->
<!--          <el-descriptions-item class="bonus-item" label="Car House">{{newData.BONUS_GARAGE.value}}</el-descriptions-item>&lt;!&ndash; 车房奖 &ndash;&gt;-->
          <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="一市场新增">{{newData.PV_1L.value}}</el-descriptions-item><!-- 一市场新增 -->
          <el-descriptions-item class="bonus-item" label="一市场结余">{{newData.SURPLUS_1L.value}}</el-descriptions-item><!-- 一市场结余 -->
          <el-descriptions-item class="bonus-item" label="二市场新增">{{newData.PV_2L.value}}</el-descriptions-item><!-- 二市场新增 -->
          <el-descriptions-item class="bonus-item" label="二市场结余">{{newData.SURPLUS_2L.value}}</el-descriptions-item><!-- 二市场结余 -->
<!--          <el-descriptions-item class="bonus-item" label="三市场新增">{{newData.PV_3L.value}}</el-descriptions-item>&lt;!&ndash; 三市场新增 &ndash;&gt;-->
<!--          <el-descriptions-item class="bonus-item" label="三市场结余">{{newData.SURPLUS_3L.value}}</el-descriptions-item>&lt;!&ndash; 三市场结余 &ndash;&gt;-->
        </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,
      }
    },
    methods: {
      getData() {
        let vueObj = this
        vueObj.loading = true
        network.getData('bonus/other').then(response => {
          vueObj.tableData = response.tableData
          vueObj.tableKey = response.tableKey
          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>
