<template>
  <div class="Feedback">
      <ul style="overflow: initial!important">
        
        <li style="float:right;margin-bottom:10px">
          <input
            type="button"
            class="hollowFixedBtn"
            :value="$t('pub.addBtn')"
            @click="addRule"
          >
        </li>
      </ul>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>人员</th>
        <th>占比</th>
        <th>设置</th>
      </tr>
      <tr>
        <td>地接账户基金</td>
        <td>{{allzb}}%</td>
        <td>
          <!-- <el-button @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button> -->
        </td>
      </tr>
      <tbody v-for="(item,i) in dataList" :key="i">
          <tr>
            <td>{{item.EmployeeName}}</td>
            <td>{{item.CommissionPercent}}%</td>
            <td width="150">
              <el-button @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>
              <el-button @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>
            </td>
          </tr>
      </tbody>
      <tr v-if="dataList.length==0">
        <td colspan="12" align="center">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <el-dialog
        title="提成规则"
        :visible.sync="ruleVisible"
        width="400px">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="人员" prop="EmployeeId">
                <el-select class="multiple_input" filterable v-model="form.EmployeeId" >
                    <el-option v-for="item in EmployeeList" :label="item.EmName"
                          :value="item.EmployeeId" :key="item.EmployeeId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="占比" prop="CommissionPercent">
                <el-input class="w220" @keyup.native="checkInteger(form,'CommissionPercent')" v-model="form.CommissionPercent"></el-input>
            </el-form-item>
        </el-form> 
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="ruleVisible = false">{{$t('pub.cancelBtn')}}</el-button>
            <el-button size="small" type="danger" @click="RulesOk('form')">确 定</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'Feedback',
    data (){
        return{
          allzb:100,
            obj:{
                BranchId:-1,
                LineId:0,
            },
            dataList:[],
            loading:false,
            dateList:[],
            companyList:[],
            ruleVisible:false,
            form:{
                EmployeeId:'',
                CommissionPercent:0,
            },
            departmentMsg: {
                RB_Group_Id: '0',
                RB_Branch_Id:'-1',
                Status:'0',
                ParentId:'-1',
                Tier:'0',
            },
            EmployeeList:[],
            rules:{ 
                EmployeeId: [
                    { required: true, message: '请选择参与人员', trigger: 'change' }
                ],
                CommissionPercent: [{ required: true, message: "请输入占比", trigger: "blur" }],
            },
        }
    },
    created(){
    },
    mounted(){
       this.getList();
       this.getEmployeeList();
    },
    methods:{
        addRule(){
          this.ruleVisible=true;
          this.form={
            EmployeeId:'',
            CommissionPercent:0,
          }
        },
        Delete(item) {
            this.$confirm("是否删除? 删除后不可恢复", this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                type: "warning"
            })
            .then(() => {
                this.apipost('VisaCommission_RemoveOPCommission', {ID:item.Id}, res => {
                if (res.data.resultCode == 1) {
                    this.Success(res.data.message)
                    this.getList()
                }else{
                    this.Error(res.data.message)
                    
                }
                })
            })
            .catch(() => {});
        },
        RulesOk(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                  let num=0;
                  let newnum=0;
                  if(this.form.Id){
                    this.dataList.forEach(item=>{
                      if(item.Id!=this.form.Id){
                        num+=item.CommissionPercent; 
                      }
                    })
                    newnum=100-num;
                  }else{
                    newnum=this.allzb;
                  }
                  
                    if(Number(this.form.CommissionPercent)>newnum || Number(this.form.CommissionPercent)==0){
                      this.Error("请输入正确的占比！");
                      return;
                    }
                    this.apipost(
                        'VisaCommission_SetOPCommission', this.form,
                        res => {
                            if (res.data.resultCode == 1) {
                                this.getList();
                                this.ruleVisible=false;
                                this.Success(res.data.message)

                            }else{
                                this.Error(res.data.message)
                            }
                        },
                        err => {
                        }
                        )
                } else {
                    
                    
                }
                });
            
        },
        getEmployeeList () {
            let userInfo = this.getLocalStorage()
            let msg = {
            GroupId: userInfo.RB_Group_id,
            BranchId: '-1',
            DepartmentId: '-1',
            PostId: '-1',
            IsLeave: '0'
            }
            this.apipost(
            'admin_get_EmployeeGetList', {},
            res => {
                if (res.data.resultCode == 1) {
                this.EmployeeList = res.data.data
                }
            },
            err => {
            }
            )
        },
       
        SetRules(item){
          this.ruleVisible=true;
          this.form={ 
            EmployeeId:item.EmployeeId,
            CommissionPercent:item.CommissionPercent,
            Id:item.Id
          }
        },
       linkageDepartment(){
            this.departmentMsg.RB_Branch_Id=this.form.BranchId;
            this.departmentList=[];
            this.form.DepartmentId=-1;
            this.getDepartment();
       },
       getDepart(id){
           this.form.DepartmentId= id;
           this.$forceUpdate();
       },
      getDepartment() {
        this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
            if(res.data.resultCode == 1) {
                this.departmentList = res.data.data;
            }
        }, err => {})				
     },
      getList(){
        this.loading=true;
        this.apipost("VisaCommission_GetPageList", {}, res => {
            this.loading=false;
        if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            // allzb
            let num=0;
            this.dataList.forEach(item=>{
              num+=item.CommissionPercent; 
            })
            this.allzb=100-num;
        }
        });
      },
    }	
}
		
</script>
<style>
.Feedback ul>li{
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin: 20px 30px 0px 0;
}
.Feedback .singeRowTable{
    margin-top: 20px;
}
</style>