  <style scoped>
    .addContacts .add-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
}
.addContacts .add-tit p {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: rgba(17, 17, 17, 1);
  font-size: 14px;
}
.addContacts .add-tit p span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #409efe;
  border-radius: 50%;
  margin-right: 10px;
}
.addContacts .el-dialog__header {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 1);
}
.addContacts .dialog-footer {
  text-align: center;
  background-color: rgba(248, 250, 251, 1);
  padding-bottom: 20px;
}
.addContacts .el-dialog__footer {
  padding: 0;
}
.cursor-p{
  cursor: pointer;
}
.cursor-p:hover{
  color: #409EFF;
}
  </style>
  <template>
    <div>
    <el-dialog @closed="closedDialog" 
    width="70%"
    :modal="false" 
    :visible.sync="dialogTableVisible" 
    :close-on-click-modal="false" class="addContacts">
      <div class="add-tit" slot="title">
        <p><span></span>提成列表</p>
        <span icon="el-icon-close"></span>
     </div>
      <div class="form-box">
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="dataList"
            style="width: 100%"
            :height="dataList.length > 0 ? '400' : '400'"
            row-class-name="font-size-12">
            <!-- <el-table-column fixed type="selection" width="40"></el-table-column> -->
            <el-table-column 
                label="类型"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.EmpType!=1?'引流':'销售'}}
                </template>
            </el-table-column>
            <el-table-column 
                prop="BranchName"
                label="公司"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="DeptName"
                label="部门"
                show-overflow-tooltip>
            </el-table-column>
            <!-- <el-table-column 
                label="岗位"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.PostName?scope.row.PostName:'-'}}
                </template>
            </el-table-column> -->
            <el-table-column 
                prop="EmName"
                label="姓名"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="OrderId"
                label="订单号"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="OrderProfit"
                label="订单利润"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="YCommission"
                label="应发"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="Commission"
                label="提成"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                label="提成比例"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.CommissionRate}}%
                </template>
            </el-table-column>
            <el-table-column
                label="依据类型"
                show-overflow-tooltip min-width="90">
                <template slot-scope="scope">
                  <span
                  :class="scope.row.WageReId?'cursor-p':''"
                  @click="scope.row.WageType?GenerateScale(scope.row):''">{{scope.row.WageType==1?'新员工比例':scope.row.WageType==2?'上季度定档':'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column 
                prop="BonusMoney"
                label="年终"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.BranchName!='微途科技'?scope.row.BonusMoney:'-'}}
                </template>
            </el-table-column>
            <el-table-column 
                label="年终比例"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.BranchName!='微途科技'?scope.row.BonusRate+'%':'-'}}
                </template>
            </el-table-column>
            <el-table-column 
                prop="Month"
                label="期数"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                label="备注"
                show-overflow-tooltip min-width="200px">
                <template slot-scope="scope">
                    {{scope.row.Remark?scope.row.Remark:'-'}}
                </template>
            </el-table-column>
            <!-- <el-table-column 
                prop="IsFirstContact"
                label="操作"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
            :page-sizes="[15, 30, 60, 90, 100]" :page-size="msg.pageSize" layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange" :total="total">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="add-box-btn" @click="dialogTableVisible = false">确 定</el-button>
        <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisible = false">取 消
        </el-button>
      </div>
    </el-dialog>
    <!-- 查看生成比例 -->
    <el-dialog custom-class='w1006' title="员工生成比例" :visible.sync="outerVisible" center>
      <inAccordanceWith v-if="objNew" :msgNew="objNew"></inAccordanceWith>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="add-box-btn" @click="outerVisible = false">确 定</el-button>
        <el-button class="add-box-btn add-box-cancel" @click="outerVisible = false">取 消
        </el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  <script>
    import inAccordanceWith from "./inAccordanceWithDialog"
    export default {
      props: {
        parameters:{
            type: Object,
            default: true
        }
      },
      components:{inAccordanceWith},
      data() {
        return {
            outerVisible:false,
            objNew:{},
            total:0,
            dataList:[],
            msg: {
                pageIndex: 1,
                pageSize: 20,
                // EmpId: -1,
                // PeriodsId: -1,
                // EmpType: '-1',
                OrderId:''
            },
            loading:false,
            dialogTableVisible:false
        };
      },
      watch: {},
      created(){
         
      },
      mounted() {
        this.msg.OrderId = this.parameters.OrderId
        this.dialogTableVisible = true
        this.getList()
      },    
      methods: {
        GenerateScale(item){
          if(!item.WageReId){
              return
          }
          this.objNew = item
          this.outerVisible = true
        },
        //获取数据
        getList() {
            this.loading = true;
            this.apipost(
                "/api/Commission/GetCommissionOrderDetialPageList",
                this.msg,
                res => {
                    this.loading = false;
                    if (res.data.resultCode == 1) {
                        this.dataList = res.data.data.pageData;
                        this.total = res.data.data.count;
                    } else {
                        this.Error(res.data.message);
                    }
                }
            );
        },
        handleSizeChange(val) {
            this.msg.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        closedDialog(){
            this.MsgBus.$emit("closeaddContacts");
        }
      },
    };
  </script>