
<template>
  <div class="Feedback">
      <ul style="overflow: initial!important">
         <!-- <li>
          <span>
            <em>{{$t('sm.company')}}</em>
          </span>
          <el-select filterable v-model="obj.BranchId" >
            <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
              <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
              </el-option>
          </el-select>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_line')}}</em>
          </span>
          <el-select filterable v-model="obj.LineId" >
            <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
            <el-option v-for="item in LineList" :label='item.LineName' :value='item.LineID' :key='item.LineID'></el-option>
          </el-select>
        </li> -->

        <li style="float:right;margin-bottom:10px">
          <!-- <input
            type="button"
            class="hollowFixedBtn"
            :value="$t('pub.searchBtn')"
            @click="getList()"
          > -->
          <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 style="width:30%">{{$t('system.query_lineName')}}</th>
        <th>{{$t('salesModule.Personnel')}}</th>
        <th>{{$t('salesModule.ZB')}}</th>
        <th>{{$t('leader.leader_Set')}}</th>
      </tr>
      <tr>
        <td>{{$t('advmanager.v_all')}}</td>
        <td>{{$t('objFill.v101.FinancialModule.dijiezhjj')}}</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 v-for="(com,index) in item.OPCommissionList" :key="index">
            <td :rowspan="item.OPCommissionList.length" v-if="index==0">{{item.LineName}}</td>
            <td>{{com.EmployeeName}}</td>
            <td>{{com.CommissionPercent}}%</td>
            <td>
              <el-button @click="SetRules(com)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>
              <el-button @click="Delete(com)" 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="$t('fnc.tcguize')"
        :visible.sync="ruleVisible"
        width="400px">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <!-- <el-form-item :label="$t('advmanager.v_line')" prop="LineIdList">
                <el-select class="multiple_input" filterable value-key="item" v-model="form.LineIdList" @change="getLine">
                    <el-option v-for="item in LineList" :label='item.LineName' :value='item' :key='item.LineID'></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item :label="$t('salesModule.Personnel')" 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="$t('salesModule.ZB')" prop="CommissionPercent">
                <el-input class="w220" @keyup.native="checkPrice(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')">{{$t('pub.sureBtn')}}</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:[],
            LineList:[],
            companyList:[],
            ruleVisible:false,
            form:{
                // LineIdList:[],
                LineName:'出境日本线',
                LineID:14,
                EmployeeId:'',
                CommissionPercent:0,
            },
            departmentMsg: {
                RB_Group_Id: '0',
                RB_Branch_Id:'-1',
                Status:'0',
                ParentId:'-1',
                Tier:'0',
            },
            LineTeamList:[],
            EmployeeList:[],
            rules:{
                EmployeeId: [
                    { required: true, message: this.$t('objFill.v101.FinancialModule.qingxzcyrs'), trigger: 'change' }
                ],
                CommissionPercent: [{ required: true, message: this.$t('objFill.v101.FinancialModule.qingsrzb'), trigger: "blur" }],
            },
            departmentList:[]
        }
    },
    created(){
    },
    mounted(){
       this.getList();
       this.getEmployeeList();
       this.getLineList();

    },
    methods:{

        Delete(item) {
            this.$confirm(this.$t('objFill.shifouscbkhf'), this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                type: "warning"
            })
            .then(() => {
                this.apipost('OPCommission_RemoveOPCommission', {ID:item.Id}, res => {
                if (res.data.resultCode == 1) {
                    this.Success(res.data.message)
                    this.getList()
                }else{
                    this.Error(res.data.message)

                }
                })
            })
            .catch(() => {});
        },
        addRule(){
            this.ruleVisible=true;
            this.form={
              LineName:'出境日本线',
              LineID:14,
              EmployeeId:'',
              CommissionPercent:0,
            }
        },
        SetRules(item){
            this.ruleVisible=true;
            this.form={
              LineName:'出境日本线',
              LineID:14,
              EmployeeId:item.EmployeeId,
              CommissionPercent:item.CommissionPercent,
              Id:item.Id
            }
        },
        RulesOk(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                  let num=0;
                  let newnum=0;
                  if(this.form.Id){
                    this.dataList.forEach(item=>{
                      item.OPCommissionList.forEach(com=>{
                        if(com.Id!=this.form.Id){
                          num+=com.CommissionPercent;
                        }
                      })
                    })
                    newnum=100-num;
                  }else{
                    newnum=this.allzb;
                  }

                    if(Number(this.form.CommissionPercent)>newnum || Number(this.form.CommissionPercent)==0){
                      this.Error(this.$t('objFill.v101.FinancialModule.qingsrzqdzb'));
                      return;
                    }
                    this.apipost(
                        'OPCommission_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 => {
            }
            )
        },

      getLineList() {
        this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        });
      },

       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("OPCommission_GetPageList", {}, res => {
            this.loading=false;
        if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            // allzb
            let num=0;
            this.dataList.forEach(item=>{
              item.OPCommissionList.forEach(com=>{
                num+=com.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>
