<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%;" @row-click="handleBonusDetail">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div v-loading="expandLoading">
              <el-form label-position="left" inline class="table-expand">
                <el-form-item label="区域津贴">{{bonusDetailData[scope.row.PERIOD_NUM].BONUS_QY}}</el-form-item>
                <el-form-item label="育成津贴">{{bonusDetailData[scope.row.PERIOD_NUM].BONUS_YC}}</el-form-item>
                <el-form-item label="复销奖">{{bonusDetailData[scope.row.PERIOD_NUM].BONUS_FX}}</el-form-item>
                <el-form-item label="零售奖">{{bonusDetailData[scope.row.PERIOD_NUM].BONUS_LS}}</el-form-item>
                <el-form-item label="车房养老补贴">{{bonusDetailData[scope.row.PERIOD_NUM].BONUS_CF}}</el-form-item>
                <el-form-item label="领袖分红">{{bonusDetailData[scope.row.PERIOD_NUM].BONUS_LX}}</el-form-item>
              </el-form>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="PERIOD_NUM" label="期数"></el-table-column>
        <el-table-column label="所在结算年月">
          <template slot-scope="scope">
            {{scope.row.CALC_YEAR}}-{{scope.row.CALC_MONTH}}
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="200">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.START_TIME)}}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="200">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.END_TIME)}}
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from '@/utils/tool'
import store from '@/utils/vuexStore'
import Pagination from '@/components/Pagination'

export default {
  name: 'finance_period',
  components: {Pagination},
  mounted () {
    this.getData()
  },
  data () {
    return {
      tableData: null,
      bonusDetailData: {},
      loading: true,
      expandLoading: false,
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      tool: tool,
    }
  },
  methods: {
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    handleBonusDetail (row, event, column) {
      console.log(row)
      return false
      this.expandLoading = true
      if (typeof this.bonusDetailData[row.PERIOD_NUM] === 'undefined') {
        this.$set(this.bonusDetailData, row.PERIOD_NUM, {
          BONUS_QY: 0,
          BONUS_YC: 0,
          BONUS_FX: 0,
          BONUS_LS: 0,
          BONUS_CF: 0,
          BONUS_LX: 0,
        })
        network.getData(`finance/bonus-detail/${row.PERIOD_NUM}`).then(response => {
          this.$set(this.bonusDetailData, row.PERIOD_NUM, response.bonus)
          this.expandLoading = false
        })
      } else {
        this.expandLoading = false
      }
      this.$refs.multipleTable.toggleRowExpansion(row)
    },
    getData (page, pageSize) {
      let obj = this
      network.getPageData(this, 'finance/period', page, pageSize, null, function (response) {

      })
    },
  }
}
</script>

<style scoped>
  .table-expand {
    font-size: 0;
  }

  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>