<style>
  .empDetailDiv {
    width: 400px;
    max-height: 400px;
    overflow: auto;
  }
</style>
<template>
  <div class="page-body empBonus">
    <template>
      <el-table ref="filterTable" :data="dataList" v-loading='loading'
        :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}" border style="width: 100%">
        <el-table-column prop="EmployeeName" label="人员名称"> </el-table-column>
        <el-table-column prop="YearNum" label="年份"> </el-table-column>
        <el-table-column prop="MonthNum" label="月份"> </el-table-column>
        <el-table-column prop="OpenBonus" label="开单奖金"> </el-table-column>
        <el-table-column prop="ClueNumSalary" label="线索奖励"> </el-table-column>
        <el-table-column width="110" label="当月订单人数">
          <template slot-scope="scope">
            <a title="点击跳转" style="cursor:pointer;color:blue;text-decoration:underline;"
              @click="GoToOrderList(scope.row)">
              {{scope.row.CurGuestNum}}</a>
          </template>
        </el-table-column>
        <el-table-column label="当月奖励金额" width="110">
          <template slot-scope="scope">
            <el-popover placement="left" width="420" trigger="click">
              <div class="empDetailDiv">
                <el-table ref="filterTable" max-height="300" :data="scope.row.DetailList">
                  <el-table-column prop="OrderId" label="订单编号"> </el-table-column>
                  <el-table-column prop="OrderGuestNum" label="订单人数"></el-table-column>
                  <el-table-column prop="OrderMoney" label="订单金额"> </el-table-column>
                  <el-table-column prop="OrderStateName" label="订单状态"> </el-table-column>
                  <el-table-column prop="Remarks" label="备注"> </el-table-column>
                </el-table>
              </div>
              <el-button slot="reference" type="success" plain size="mini">{{scope.row.CurRewardMoney}}</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="BeforeMoney" width="150" label="以前月份的冲抵金额"></el-table-column>
        <el-table-column prop="CreateByName" label="创建人"> </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" width="150"> </el-table-column>
        <el-table-column prop="CurOrderMoney" width="110" label="当月订单金额"> </el-table-column>
        <el-table-column prop="DeductionMoney" width="100" label="待抵扣金额">
          <template slot-scope="scope">
            <span v-if="scope.row.DeductionMoney>0" style="color:red;">{{scope.row.DeductionMoney}}</span>
            <span v-else>{{scope.row.DeductionMoney}}</span>
          </template>
        </el-table-column>
        <el-table-column label="已抵扣金额" width="100">
          <template slot-scope="scope">
            <el-popover placement="left" width="420" trigger="click">
              <div class="empDetailDiv">
                <el-table ref="filterTable" max-height="300" :data="scope.row.DeductionList">
                  <el-table-column prop="CreateTimeStr" label="抵扣时间"> </el-table-column>
                  <el-table-column prop="DeductionMoney" label="抵扣金额"></el-table-column>
                  <el-table-column prop="DeductionContent" label="备注"> </el-table-column>
                </el-table>
              </div>
              <el-button slot="reference" type="success" plain size="mini">{{scope.row.FinishDeductionMoney}}
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="IsReachStr" label="是否达标">
          <template slot-scope="scope">
            <span class="text-negative" v-if="scope.row.IsReach==0">{{scope.row.IsReachStr}}</span>
            <span style="color:#67C23A" v-if="scope.row.IsReach==1">{{scope.row.IsReachStr}}</span>
          </template>
        </el-table-column>
        <el-table-column label="日志" width="110">
          <template slot-scope="scope">
            <el-popover placement="left" width="420" trigger="click">
              <div class="empDetailDiv">
                <el-table ref="filterTable" max-height="300" :data="scope.row.BonusLogList">
                  <el-table-column prop="CreateTimeStr" label="日志时间"> </el-table-column>
                  <el-table-column prop="LogContent" label="备注"> </el-table-column>
                </el-table>
              </div>
              <el-button slot="reference" type="success" plain size="mini">日志信息</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;text-align: center;">
        <el-pagination background @current-change="handleCurrentChanges" layout="total,prev, pager, next, jumper"
          :current-page.sync="msg.pageIndex" :page-size="msg.pageSize" :total='pageCount'>
        </el-pagination>
      </div>
    </template>
  </div>
</template>
<script>
  import {
    CreateEmpBonus,
    queryPersonnelPeriodPage,
    GetPersonnelPeriodDetails
  } from '../../../api/finance/index'

  export default {
    meta: {
      title: "员工人头奖励"
    },
    props: {},
    components: {

    },
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          pageIndex: 1,
          pageSize: 10,
          PeriodId: 0
        },
        pageCount: 0,
        dataList: [],
      }
    },
    created() {},
    mounted() {
      if (this.$route.query.Id) {
        this.msg.PeriodId = this.$route.query.Id;
        this.getList();
      }
      if (this.$route.query.UserId) {
        this.msg.EmployeeId = this.$route.query.UserId
        this.msg.YearNum = this.$route.query.Periods.slice(0, 4)
        this.msg.MonthNum = this.$route.query.Periods.slice(5, 7)
      }
    },
    methods: {
      GoToOrderList(item) {
        var lastDay = new Date(item.YearNum, item.MonthNum, 0).getDate()
        var qObj = {
          QStartTime: item.YearNum + "-" + item.MonthNum + "-01",
          QEndTime: item.YearNum + "-" + item.MonthNum + "-" + lastDay,
          EnterID: item.EmployeeId,
        };
    
        this.OpenNewUrl('/sale/orderStatistics', qObj);
      },
      //获取分页列表
      getList() {
        GetPersonnelPeriodDetails(this.msg).then(res => {
          this.dataList = res.Data.PageData
          this.pageCount = res.Data.PageCount;
        });
      },
      handleCurrentChanges(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
    },
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>