<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table class="table-box other-table-box" :data="tableData" style="width: 100%;">
        <el-table-column v-for="(item,key) in tableKey" :key="key">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row[item].name" placement="top">
            <div class="bonus-item">{{scope.row[item].value}}</div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click.native="showFlow(scope.row.PERIOD_NUM.value)">查看全部</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <el-dialog :title="`${periodNum}期奖金`" :visible.sync="dialogFlowVisible" width="80%">
      <div class="bonus-list" v-loading="dialogLoading">
        <div class="bonus-item" v-for="(item,key) in newData" :key="key">
          <el-tooltip effect="dark" :content="item.name" placement="top-end">
            <div>{{item.value}}</div>
          </el-tooltip>
        </div>
      </div>
    </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: '正在获取数据',
          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 .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>