<style>
    .baseSet_Title {
      width: 120px !important;
      padding: 18px 0 0 16px;
      text-align: right;
    }
   .salesCommission  .border-bottom {
        /* border-bottom: 1px dashed #EEE; */
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    .salesCommission  .text-bottom{
        height: 32px;line-height: 32px; margin-bottom: 10px;
    }
   .salesCommission ._icon_btn i.icon-sousuo {
    background-color: #47BF8C;
  }
  .salesCommission ._icon_btn  .icon-add{
    background-color: #47BF8C;
  }
 .salesCommission ._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;
  }
 .salesCommission .el-table td,.el-table th{
    padding: 5px 0;
  }
  

  
  </style>
  <template>
    <div class="page-body salesCommission">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
              <!-- <div style="margin-right: 20px;" v-if='iscMaker==true'>
                <div class="block">
                  <span style="margin-right: 5px;">校区</span>
                  <el-select v-model="msg.SchoolId" filterable @change="handleCurrentChanges(1)">
                    <el-option value="-1" label="不限"></el-option>
                    <el-option v-for='item in CompanyList' :label='item.SName' :value='item.SId' :key='item.SId'></el-option>
                  </el-select>
                </div>
              </div> -->
              <div  v-if='isgenerate==true'>
                <div class="block" style="display:flex">
                  <span style="margin-right: 5px;">选择月份</span>
                  <el-date-picker
                    v-model="value2"
                    type="month"
                    placeholder="选择月">
                  </el-date-picker>
                  <q-btn :loading="loading1" color="primary" size="11px" label="生成提成" @click="scCommission" style="margin-left:10px"/>
                </div>
              </div>
            
            </div>
          </div>
      <template >
        <el-table
            ref="filterTable"
            :data="tableData"
            v-loading = 'loading'
            :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}"
            border
            style="width: 100%">
            <!-- <el-table-column prop="Id"  label="ID"  ></el-table-column> -->
            <el-table-column prop="Periods" label="周期"  ></el-table-column>
            <el-table-column prop="SumPrice" label="提成总金额" > </el-table-column>
            <el-table-column prop="SchooldCommission" label="校区提成总金额" >
              <template slot-scope="scope">
                <div style="display: flex;flex-wrap: wrap;" v-if='scope.row.SchooldCommission>=0'>
                  {{scope.row.SchooldCommission>=0?scope.row.SchooldCommission:'-'}}
                </div>
              </template>  
            </el-table-column>
            <el-table-column prop="FrIdList" label="财务单据" >
              <template slot-scope="scope">
                <div style="display: flex;flex-wrap: wrap;" v-if='scope.row.FrIdList.length>0'>
                  <span v-for="(x,y) in scope.row.FrIdList" @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" v-if='iscMaker==true'>
                      <i class="iconfont icon-add"  v-if='iscMaker==true'
                          @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='total'>
          </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="55" :selectable="checkSelectable"></el-table-column>
          <el-table-column  prop="UserName" label="用户" > </el-table-column>
          <el-table-column  prop="StudentCount" label="客人数量" > </el-table-column>
          <el-table-column  prop="CommissionMoney" label="应发提成金额" > </el-table-column>
          <el-table-column  prop="IsGiveOut" label="是否已发放" > 
            <template slot-scope="scope">
              <span v-if='scope.row.IsGiveOut==1'>已发放</span>
              <span v-if='scope.row.IsGiveOut==2'>未发放</span>
            </template>
          </el-table-column>
          
        </el-table>
        <div style="margin-top: 10px;">金额总额:{{totalAmount}}</div>
        <div slot="footer" class="dialog-footer">
          <el-button class="hollowFixedBtn" @click="costmode=false">取消</el-button>
          <el-button class="normalBtn" type="primary" @click="preservetransaction()">确定</el-button>
        </div>
      </el-dialog>
      
    </div>
  </template>
  <script>
     import {
        getSchoolDropdown
      } from '../../../api/school/index'
    import {
      GetClassTypePageList,
    } from '../../../api/system/index';
    import{
      getSellStudyAbroadPeriodsPageList,
        setSellCommissionRule,
        setSellStudyAbroadInfo,
        getSellStudyAbroadSendEmployeeList,
        setSellStudyAbroadSendEmployee
    } from '../../../api/finance/index'
    export default {
      meta: {
        title: "留学销售提成列表"
      },
      props: {},
      components: {},
      data() {
        return {
          loading: false,
          loading1: false,
          value2:'',
          //列表数据参数
          msg: {
            PageIndex: 1,
            PageSize: 15,
            Name:'',
            SchoolId:'-1'
          },
          pageCount: 0,
          persistent: false,
          listData:{},
          tableData:[],
          total:0,
          CompanyList:[],
          isgenerate:false,//是否有生成的权限
          iscMaker:false,//是否有制单的权限
          SendEmployeeList:[],//可发放提成的用户列表
          costmode:false,
          multipleSelection:[],
          totalAmount:0,//选中的金额总额
          CheckID:0,
        }
      },
      created() {
        let userinfo = this.getLocalStorage();
        userinfo.ActionMenuList.map(x=>{//判断权限
          if(x.FunctionCode == "SAGenerate_Commission"){//判断是否有生成的权限
            this.isgenerate = true;
          }
          if(x.FunctionCode == "SACommission_maker"){//判断是否有制单的权限
            this.iscMaker = true;
          }
        })
        var myDate=new Date();
        myDate.setMonth(myDate.getMonth()-1);
        this.value2 = myDate.getFullYear() + "-" + (myDate.getMonth()+1)

      },
      mounted() {
        this.getList();//获取提成周期列表
        this.getBranchList()
      },
      methods: {
        getList(){
            this.loading = true;
            getSellStudyAbroadPeriodsPageList(this.msg).then(res => {
              if (res.Code == 1) {
                this.loading = false;
                this.tableData = res.Data.PageData
                this.total = res.Data.Count
              }
            })
        },
        scCommission(){//生成提成
          if(this.loading1 == false){
            this.loading1= true;
            setSellStudyAbroadInfo({Month:this.value2}).then(res => {
              if (res.Code == 1) {
                this.$q.notify({
                  icon: 'iconfont icon-chenggong',
                  color: 'accent',
                  timeout: 2000,
                  message: '生成提成成功',
                  position: 'top'
                })
                this.getList()
              }
              this.loading1= false;
            }).catch(err=>{
              this.loading1= false;
            })
          }
        },
        getBranchList(){//获取校区
          getSchoolDropdown({}).then(res => {
            this.CompanyList = res.Data;
          }).catch(() => {

          })
        },
        goUrl(id ) {
            this.$router.push({
            path: '/financial/studyabroad/commissionDetail',
            query: {
                "id": id,
                blank: 'y',
            }
            })
        },
        gocaiwuxiangq(id){
            this.OpenNewUrl("/financial/financalDocument/FinancialDocumentsDetail", {
              id: id
            });
        },
        generalFinancacls(item) {
          this.CheckID = item.Id
          if(this.msg.SchoolId == -1){
              if(item.SumPrice>0){
                this.tishi(item.SumPrice,item.Id)
              }else{
                this.$message.error('提成总金额为0')
              }
          }else{
            if(item.SchooldCommission>0){
              this.goaddFinancial(item.SchooldCommission,item.Id,'')
            }else{
              this.$message.error('校区提成总金额为0')
            }
          }
          
        },
        goaddFinancial(Money,Id,EmpIds){
          let School_Id = 0;
          
          let obj = {
              CostType: 316,
              Money: Money,
              CurrencyId: 21,
              XSTC: 1,
              School_Id:this.msg.SchoolId == -1?0:this.msg.SchoolId,
              OtherType:44,//留学销售提成
              ReFinanceId:Id,
              ReFinanceId2:this.msg.SchoolId,
              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
            });
        },
        tishi(Money,Id){
          let that = this
                this.$q.dialog({
                  title: "销售制单",
                  message: "你正在进行所有校区一起制单操作？",
                  persistent: true,
                  cancel: {
                    label: "取消",
                    flat: true
                  },
                  ok: {
                    label: "确认",
                    flat: true,
                    focus: true
                  }
                }).onOk(() => {
                  this.getcomSendEmployeeList(Id)
                });
        },
        getcomSendEmployeeList(Id){//获取可发放提成的用户
          getSellStudyAbroadSendEmployeeList({PeriodId:Id}).then(res => {
            this.SendEmployeeList = res.Data;
            this.costmode = true
          }).catch(() => {

          })
        },
        handleCurrentChanges(val){
          this.msg.PageIndex= val;
          this.getList()
        },
        checkSelectable(row){
          return row.IsGiveOut==2
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
          let zong = 0
          this.multipleSelection.forEach(x=>{
            zong +=x.CommissionMoney
          })
          this.totalAmount = zong
        },
        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.UserId)
            })
            EmpIds = data.join(',')
            setSellStudyAbroadSendEmployee({PeriodId:this.CheckID,EmpIds:EmpIds}).then(res => {
                this.goaddFinancial(this.totalAmount,this.CheckID,EmpIds)
                this.$message.success('设置成功');
            }).catch(() => {

            })
          });
        }
     
      
      },
    }
  
  </script>
  <style lang="sass">
    @import url('~assets/css/table.sass')
  
  </style>
  