<style>
  .empBonus ._icon_btn i.icon-sousuo,
  .empBonus ._icon_btn i.icon-add {
    background-color: #47BF8C;
  }

  .empBonus ._icon_btn i {
    width: 26px;
    height: 26px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }
</style>
<template>
  <div class="page-body empBonus">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div>
          <div class="block" style="display:flex">
            <span style="margin-right: 5px;">选择月份</span>
            <el-date-picker v-model="StartDate" size="small" value-format="yyyy-MM" type="month" placeholder="选择月">
            </el-date-picker>
            <q-btn color="primary"  size="11px"  label="生成提成"  @click="createBonus"  style="margin-left:10px" />
          </div>
        </div>
      </div>
    </div>
    <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="Periods" label="周期"></el-table-column>
        <el-table-column prop="Name" label="名称"></el-table-column>
        <el-table-column prop="SumPrice" label="人头奖励总金额"> </el-table-column>
        <el-table-column prop="FrIdList" label="财务单据">
          <template slot-scope="scope">
            <div style="display: flex;flex-wrap: wrap;" v-if='scope.row.Financials'>
              <span v-for="(x,y) in getFrnancialArr(scope.row.Financials)" @click="gocaiwuxiangq(x)"
                style="cursor: pointer;text-decoration: underline;margin-right: 5px; color: #409EFF;">{{x}}</span>
            </div>
            <div v-else>无</div>
          </template>
        </el-table-column>
        <el-table-column prop="CreateByName" label="创建人"> </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="_icon_btn">
              <el-tooltip class="item" effect="dark" content="查看" placement="top">
                <i class="iconfont icon-sousuo" @click="goUrl(scope.row.Id)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="制单" placement="top">
                <i class="iconfont icon-add" @click="generalFinancacls(scope.row)"></i>
              </el-tooltip>
            </div>
          </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>
    <el-dialog title="设置发放用户" width="700px" :visible.sync="costmode" center>
      <el-table :data="SendEmployeeList" border @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="selection" width="50" :selectable="checkSelectable"></el-table-column>
        <el-table-column prop="EmployeeName" label="用户"> </el-table-column>
        <el-table-column prop="CurGuestNum" label="客人数量"> </el-table-column>
        <el-table-column prop="ClueNumSalary" label="应发提成金额">
          <template slot-scope="scope">
            {{getTicheng(scope.row)}}
          </template>
        </el-table-column>
        <el-table-column prop="IsGiveOut" label="是否已发放">
          <template slot-scope="scope">
            <span v-if='scope.row.IsIssue==1'>已发放</span>
            <span v-if='scope.row.IsIssue==0'>未发放</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;">金额总额：{{totalAmount}}</div>
      <div slot="footer" class="dialog-footer">
        <el-button class="hollowFixedBtn" size="small" @click="costmode=false">取消</el-button>
        <el-button class="normalBtn" size="small" type="primary" @click="preservetransaction()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    CreateEmpBonus,
    saveEmployeeBounsIssue,
    queryPersonnelPeriodPage
  } from '../../../api/finance/index'

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

    },
    data() {
      return {
        loading: false,
        //列表数据参数
        msg: {
          PageIndex: 1,
          PageSize: 10,
        },
        StartDate: '',
        pageCount: 0,
        dataList: [],
        CheckID: 0,
        SendEmployeeList: [], //可发放提成的用户列表
        multipleSelection: [],
        totalAmount: 0, //选中的金额总额
        costmode: false,
      }
    },
    created() {},
    mounted() {
      this.getList();
    },
    methods: {
      //制单
      generalFinancacls(item) {
        this.CheckID = item.Id;
        this.SendEmployeeList = item.BonusList;
        this.tishi();
      },
      tishi() {
        let that = this
        this.$q.dialog({
          title: "销售制单",
          message: "你正在进行所有校区一起制单操作？",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          this.costmode = true
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        let zong = 0
        this.multipleSelection.forEach(x => {
          zong = this.accAdd(zong, Number(x.ClueNumSalary + x.CurRewardMoney + x.OpenBonus) - Number(x.BeforeMoney))
        })
        this.totalAmount = zong
      },
      checkSelectable(row) {
        return row.IsGiveOut = 2
      },

      preservetransaction() {
        let that = this
        if (this.multipleSelection.length == 0) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择您要发放的用户`
          })
          return
        }
        this.$q.dialog({
          title: "设置用户状态",
          message: "确认后无法更改用户制单状态，如果需修改请联系管理员",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          let EmpIds = '';
          let data = []
          this.multipleSelection.forEach(x => {
            data.push(x.Id)
          })
          EmpIds = data.join(',')
          saveEmployeeBounsIssue({
            Ids: EmpIds
          }).then(res => {
            this.goaddFinancial(this.totalAmount, this.CheckID, EmpIds)
            this.$message.success('设置成功');
          }).catch(() => {

          })
        });
      },
      goaddFinancial(Money, Id, EmpIds) {
        let School_Id = 0;
        let obj = {
          CostType: 316,
          Money: Money,
          CurrencyId: 21,
          XSTC: 1,
          School_Id: 0,
          OtherType: 51, //业绩提成
          ReFinanceId: Id,
          ReFinanceId2: 0,
          EduCommissionEmp: EmpIds
        }
        let query = {
          blank: "y",
          tab: "新增付款单据",
          Type: 2,
          IsUploadPic: 1,
          Name: '销售提成单',
          id: 143,
          orderObj: JSON.stringify(obj)
        }
        this.$router.push({
          path: "/financial/financalDocument/addFinancialDocuments",
          query
        });
      },

      //生成提成
      createBonus() {
        if (this.StartDate) {
          let msg = {
            StartDate: this.StartDate + '-01'
          }
          CreateEmpBonus(msg).then(res => {
            if (res.Code == 1) {
              this.getList();
            }
          });
        }
      },
      //获取分页列表
      getList() {
        queryPersonnelPeriodPage(this.msg).then(res => {
          this.dataList = res.Data.PageData
          this.pageCount = res.Data.PageCount;
        });
      },
      handleCurrentChanges(val) {
        this.msg.PageIndex = val;
        this.getList()
      },
      //跳转详情
      goUrl(Id) {
        this.OpenNewUrl('../market/empBonusDetail', {
          Id: Id
        })
      },
      //计算提成数
      getTicheng(Obj) {
        let Num = Number(Obj.ClueNumSalary + Obj.CurRewardMoney + Obj.OpenBonus) - Number(Obj.BeforeMoney);
        return Num;
      },
      getFrnancialArr(Financials) {
        if (Financials) {
          let FinanArr = Financials.split(',');
          return FinanArr
        }
      },
      gocaiwuxiangq(id) {
        this.OpenNewUrl("/financial/financalDocument/FinancialDocumentsDetail", {
          id: id
        });
      }
    },
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>