<template>
  <div v-loading="loading">
    <div class="white-box">
      <h3>当周新增业绩</h3>
      <el-table class="table-box" :data="weekData" stripe style="width: 100%;">
        <el-table-column label="一市场" prop="PV_1L"></el-table-column>
        <el-table-column label="二市场" prop="PV_2L"></el-table-column>
        <el-table-column label="三市场" prop="PV_3L"></el-table-column>
        <!--<el-table-column label="四市场" prop="PV_4L"></el-table-column>-->
        <!--<el-table-column label="五市场" prop="PV_5L"></el-table-column>-->
      </el-table>
      <h3>当月实时业绩</h3>
      <el-table class="table-box" :data="monthData" stripe style="width: 100%;">
        <el-table-column label="一市场" prop="PV_1L"></el-table-column>
        <el-table-column label="二市场" prop="PV_2L"></el-table-column>
        <el-table-column label="三市场" prop="PV_3L"></el-table-column>
        <!--<el-table-column label="四市场" prop="PV_4L"></el-table-column>-->
        <!--<el-table-column label="五市场" prop="PV_5L"></el-table-column>-->
      </el-table>
      <h3>上月累计业绩</h3>
      <el-table class="table-box" :data="lastData" stripe style="width: 100%;">
        <el-table-column label="一市场" prop="PV_1L">
          <template slot-scope="scope">
            <span :class='chkBig(bigLocation,1)'>{{scope.row.PV_1L}}</span>
          </template>
        </el-table-column>
        <el-table-column label="二市场" prop="PV_2L">
          <template slot-scope="scope">
            <span :class='chkBig(bigLocation,2)'>{{scope.row.PV_2L}}</span>
          </template>
        </el-table-column>
        <el-table-column label="三市场" prop="PV_3L">
          <template slot-scope="scope">
            <span :class='chkBig(bigLocation,3)'>{{scope.row.PV_3L}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="四市场" prop="PV_4L">-->
          <!--<template slot-scope="scope">-->
            <!--<span :class='chkBig(bigLocation,4)'>{{scope.row.PV_4L}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="五市场" prop="PV_5L">-->
          <!--<template slot-scope="scope">-->
            <!--<span :class='chkBig(bigLocation,5)'>{{scope.row.PV_5L}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

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

  export default {
    name: 'bonus_real-time-perf',
    components: {},
    mounted() {
      this.loading = false
      this.getData()
    },
    data() {
      return {
        weekData: null,
        monthData: null,
        lastData: null,
        loading: true,
        tool: tool,
        bigLocation: null,
        // lastChkStatus: '',
      }
    },
    methods: {
      chkBig(big, loc) {
        big = Number(big)
        loc = Number(loc)
        return (loc === big) ? 'text-danger' : ''
      },
      getData() {
        let vueObj = this
        vueObj.loading = true
        network.getData('bonus/real-time-perf').then(response => {
          vueObj.weekData = response.weekData
          vueObj.monthData = response.monthData
          vueObj.lastData = response.lastData
          // vueObj.bigLocation = response.bigLocation
          // vueObj.lastChkStatus = response.lastChkStatus
          vueObj.loading = false
        }).catch(response => {
          vueObj.loading = false
        })
      },
    }
  }

</script>
